js配合html實現360小球變化

阿新 • • 發佈：2018-12-23

今天實現以下360的小球

效果如下，（有如下疑惑，在設定閃爍狀態的時候，發現如果內容為空，就會出現異常，不知道為什麼）：
360小球，定時器中更改小球的狀態

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" 
 />
<title>Bootloader</title>
<script type="text/javascript" src="./jquery-3.2.1.js"></script>
<style type="text/css">
    .box {
        width:34px;
        height:34px;
        content:"58%";
        line-height:34px;
        text-align:center;
        left:3px;
        top 
:3px;
        border-radius:50%;
        border:2px solid #43a547;
        box-shadow:0 0 2px 0 #e8e5df inset;
        background:linear-gradient(#f4f4f4 25%,#b6e48f 40%,#9cd87a);
        background:-webkit-linear-gradient(#f4f4f4 25%,#b6e48f 40%,#9cd87a);
        background:-moz-linear-gradient(#f4f4f4 25 
%,#b6e48f 40%,#9cd87a);
    }
</style>
<script type="text/javascript">
    var totaltime=0;
    var intervalid=0;
    var intervalid1=0;
    function intervalcall(periodtime){
        totaltime = totaltime+periodtime;
        var percect = totaltime/100;
        var mpercent1 = percect>10?(percect-10):percect;
        var mpercent2 = percect>20?(percect-20):percect;
        if(percect>=100){
            //結束定時器
            mpercent1=100;
            mpercent2=0;
            window.clearInterval(intervalid);
        }
        if(totaltime%1000!=0){//需要更新進度條
            $("#box1").text("...");//實現閃爍狀態
        }else{
            $("#box1").text(percect+"%");/*percect.toString()或者改寫法會自動轉換為字串*///(#3D9171    " + mpercent+ "%,#4BCC60 " + percect + "%,#4BCC60)");
            $("#box1").css("background","linear-gradient(#f4f4f4    " + (100-percect)+ "%,#b6e48f " + (100-mpercent1) + "%,#9cd87a " + (100-mpercent2) + "%,#9cd87a)");
            $("#box1").css("background","-webkit-linear-gradient(#f4f4f4    " + (100-percect)+ "%,#b6e48f " + (100-mpercent1) + "%,#9cd87a " + (100-mpercent2) + "%,#9cd87a)");
            $("#box1").css("background","-moz-linear-gradient(#f4f4f4    " + (100-percect)+ "%,#b6e48f " + (100-mpercent1) + "%,#9cd87a " + (100-mpercent2) + "%,#9cd87a)");
        }
    }
    $(document).ready(function($) {
        intervalid = setInterval("intervalcall(500)",500);
    });
</script>
</head>

<body>
<div>
    <ul>
        <li>
           <div class="box" id="box1">58%</div>
        </li>
    </ul>
</div>
</body>
</html>

js配合html實現360小球變化

今天實現以下360的小球效果如下，（有如下疑惑，在設定閃爍狀態的時候，發現如果內容為空，就會出現異常，不知道為什麼）： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

js css+html實現簡單的日曆

(function(){ /* * 用於記錄日期，顯示的時候，根據dateObj中的日期的年月顯示 */ var dateObj = (function(){ var _date = new Date(); // 預設為當前系統時間 return { g

angular js 配合ajax 實現購物車功能

<?php namespace app\index\controller; use think\Controller; use think\Db; class Gowu extends Controller { public function index() {

html 使用js+css+html實現圖片劃過預覽效果

效果圖：：：當滑鼠劃過的時候圖片自動開啟和摺疊程式碼：： html程式碼：：命名為：index.html <!DOCTYPE html> <html><head><meta charset="utf-8" />

html+JS刷圖實現視頻效果

java scrip snap hive image com htm load() logs 網頁播放視頻須要載入播放器，可是通過刷圖也能實現視頻播放的效果 JS中用到Z-index屬性，記錄一篇解說Z-index屬性的博客的地址： http://www.cnblogs

對js操作html的實踐【1】——實現網頁假崩潰吸引網友註意力

code 自己頁面註意力 size mat pre fun hidden 前些天逛網站的時候，發現了一些好玩的細節：當網頁失去焦點後標題顯示網頁崩潰，這將使得瀏覽者重新點回網頁。來自ANOTHERHOME（https://www.anotherhome.net/）與晨

HTML實現通過超連結下載檔案，還附帶一些js輔助函式

下載檔案函式 download (src, fileName) { let $a = document.createElement('a'); $a.setAttribute('href', src); $a.setAttribute('download', fileName);

JS將html生成為圖片並下載（適用於大多數瀏覽器，包含手機瀏覽器等（需配合後臺處理））(筆記)

（1）html程式碼 <div id="id="content""> //此處放置需要生成圖片的程式碼 <div class="order_payCon"> <div class="submit_pay_success"

webview中巢狀html實現精準定位（百度地圖、高德地圖、騰訊地圖、H5原生定位）js對比

最近在實現一個功能，就是在安卓手機和蘋果手機嵌入html程式碼，實現精準定位，我為此對比幾種定位的方法。我要的是精準定位，就是誤差在100米左右的功能，類似與外賣app那種定位精確度 1. 首先是原生h5定位 if(browser.versions.an

分別使用js和JQuery實現html首頁圖片輪播以及廣告圖片定時彈出

主要使用setInterval方法設定更新週期，clearInterval清除週期。（如果不清除會一直週期迴圈執行下去，而setTimeout只是在指定時間後執行一次，這裡完全可以替換為setTimeout方法）一、js首頁輪播第一步：確定事件(onload)併為

自動調節html的font-size配合rem實現等比例縮放

jsoup+htmlUnit可以實現抓取執行過js的html頁面

1：背景　　本來想用jsoup去抓取一個頁面但是抓取的資料總是不全，然後發現有的資料是頁面執行過js之後渲染到頁面上的，也就是說只有執行過js之後資料頁面上才會顯示資料，但是jsoup並不能實現執行頁面的js。 2：解決　　搜尋後發現htmlunit網路工具可以實現執行js，他是一個相當於一個沒

案例：原生JS實現360開機動畫

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>

簡易音樂播放器（js，html，css實現）

本人大專生一枚，這個也是本人作業之一，打算從此開始記錄自己的成長本播放器功能主要有：播放暫停，音樂進度，音樂進度計時，音量調節，快進退，重播，切換歌曲（本地歌曲）拖拉進度條播放（有時需要點多兩次目標位置，問題未知，猜測是定時呼叫衝突）主用函式：play(); pause();

用html、js、css實現通訊錄功能

<html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width

js動畫效果（移動、變化效果）實現整理

如在前兩篇部落格中的效果，圖片實現減速滑動到指定位置，在網頁效果上看起來比較美觀，對使用者比較友善，這種效果的實現整理下發現有一個固定的模式。實現步驟：定義需要修改的屬性當前值：var current = 0；定義需要修改的屬性目標值：var target = 值；定

Android使用Html實現登入功能——重點掌握Webview js的使用

大家好，很久沒有寫部落格了，因為工作需要，專案需要轉換成H5的形式，所以閉關修煉html，所以可能在未來的幾篇部落格，我都會涉及到這類的知識，我不會太多的涉及到理論，更多的是實際的程式碼，下面就開始這次需求的實現，先看看主要介面。這就是主要的效果了，程式

原生js實現檢測物件變化

最近這段時間，前端開發開始逐漸模組化，一些MVC、MVVM等框架比較流行，比如angular、vue、react；這三個框架比較相似的有一點就是資料的雙向繫結，檢視的更新導致相應資料變化，資料的改變引起檢視的變化。像這種魔法的操作是怎麼實現的呢？像angular則是採用了‘

結合zTree實現 Js/jQuery/Html 下拉樹（下拉框嵌入樹結構）

一、效果圖二、專案結構三、使用方法（1）引入 jQuery 包，下載地址（2）引入 zTree 包，下載地址（3）引入 tree-select.js （4）$("#id").treeSelect(data); 一句話搞定四、實現原始

通過原生js 簡單的實現過濾html標籤功能

使用場景：想輸出一個div裡的純文字內容，例如： <div id="divA"> This is <span>some</span> text <br&

js配合html實現360小球變化

今天實現以下360的小球

相關推薦