進度條

原創 一例沙白 2018-08-23 23:26
  1. <!DOCTYPE>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5.     <title>進度條事件</title>  
  6.     <style type="text/css" media="screen">  
  7.         *{margin:0; padding: 0;}  
  8.         .f-wrap{margin:100px auto; width: 1000px;}  
  9.         p{ line-height: 24px; padding: 10px 0;}  
  10.         .s-gray{color:#999;}  
  11.         #progressBar{width:800px; height:25px; border:1px solid #ddd; background-color: #fff; position: relative; }  
  12.         #progressBar #bar,#progressBar #text{ position:absolute; top:0; left: 0; z-index: 1; width:100%; font-weight: bold; font-family:georgia; font-size: 16px; text-align: center; height:25px; line-height:25px;}  
  13.         #progressBar #bar{z-index:2; background-color:blue; color:#fff; clip:rect(0px,0,25px,0);}  
  14.     </style>  
  15. </head>  
  16. <body>  
  17.     <div class="f-wrap">  
  18.         <div id="progressBar">  
  19.             <div id="bar">0%</div>  
  20.             <div id="text">0%</div>  
  21.         </div>  
  22.         <div class="s-gray">  
  23.             <p>clip是css2中的一個樣式</p>  
  24.             <ol>  
  25.                 <li>硬編碼：寫死</li>  
  26.                 <li>跟flash配合，as3</li>  
  27.                 <li>html5 : xhr2 :onprogress onload</li>  
  28.                 <li>跟後臺的配合，ajax實時返回（cent）</li>  
  29.             </ol>  
  30.         </div>  
  31.     </div>  
  32.     <script>  
  33.      window.onload = function(){  
  34.         var iProgress = 0;  
  35.         var timer = null;  
  36.         timer = setInterval(function(){  
  37.             if(iProgress == 100){  
  38.                  clearInterval(timer);  
  39.             }else{  
  40.                 iProgress+=5;  
  41.                 progressFn(iProgress);  
  42.             }  
  43.         },100);  
  44.           
  45.   
  46.         // 封裝成一個函數  
  47.         function progressFn(cent){  
  48.               var oDiv1 = document.getElementById('progressBar');  
  49.               var oDiv2 = document.getElementById('bar');  
  50.               var oDiv3 = document.getElementById('text');  
  51.                 
  52.               var objW = parseInt(getStyle(oDiv1,'width'));  
  53.   
  54.               oDiv2.innerHTML = cent + '%';  
  55.               oDiv3.innerHTML = cent + '%';  
  56.               oDiv2.style.clip = 'rect(0px, '+ cent/100 * objW +'px, 25px, 0)';  
  57.   
  58.               // 獲取樣式值  
  59.               function getStyle(obj,attr){  
  60.                   if(obj.currentStyle){  
  61.                       return obj.currentStyle[attr];  
  62.                   }else{  
  63.                       return getComputedStyle(obj,false)[attr];  
  64.                   }  
  65.               }  
  66.         }  
  67.      }  
  68.     </script>  
  69. </body>  
  70. </html> 
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

一些可用於研究的GIS數據資源

國內的情況就不用說了，基本上是很難找到可以用於研究的GIS數據資源的。要麼就是收費，免費的即使能找到，能否合法合規的進行使用也是一個問題。地理信息數據還是國外比較開放一些，相當多的政府組織或者公益機構對公衆開放了下載渠道，大家可以適度獲取並

harlee44 2024-05-07 14:31:18

如何在低代碼平臺中引用 JavaScript ？

引言 在當今快速發展的數字化時代，企業對業務應用的需求日益複雜且多元。低代碼開發平臺作爲一個創新的解決方案，以直觀易用的設計理念，打破了傳統的編程壁壘，讓非技術人員也能輕鬆構建功能完備的Web應用程序，無需深入編碼。這一特性極大地簡化了應用

葡萄城技術團隊 2024-05-07 14:30:48

如何使用 JavaScript 獲取當前頁面幀率 FPS

可以通過計算每秒 window.requestAnimationFrame 的調用頻率來做爲 FPS 值。它接收一個回調函數，該回調函數會在瀏覽器下一次重繪之前執行。所以只要我們循環調用並記錄單位時間內的調用次數就能計算當前頁面的幀率了。

劉漢貴 2024-05-07 14:26:58

Dash 2.17版本新特性介紹

本文示例代碼已上傳至我的Github倉庫https://github.com/CNFeffery/dash-master 　　大家好我是費老師，不久前Dash發佈了其2.17.0版本，執行下面的命令進行最新版本Dash的安裝： pip

費弗裏 2024-05-07 14:21:37

人大金倉數據庫使（cai）用（keng）記錄

最近一直在用人大金倉做項目，相關的文檔相比其它流行的所謂“主流”數據庫來說還是少了點，記錄一些開發過程中遇到的問題。 數據庫的模式（database_mode）在實例創建後就確定好了的，不可更改。想要改變模式只能重新init一個實例。

M_mxy 2024-05-07 14:17:06

《最新出爐》系列入門篇-Python+Playwright自動化測試-43-分頁測試

1.簡介 分頁測試，這種一般都是公共的方法系統中都寫好了，這種一般出現是數據展示比較多的時候，會採取分頁的方法，而且比較固定，一般是沒有問題的，因此它非常適合自動化測試，但是如何使用playwright來進行分頁自動化測試了，宏哥今天就講解

北京-宏哥 2024-05-07 14:14:46

Ubuntu18 安裝NoMachine遠程桌面（解決遠程桌面延遲）

# 問題：Ubuntu 18 使用自帶的共享桌面、VNC遠程桌面延遲、降低分辨率也無效。 # 方案：最後找到安裝 NoMachine的遠程桌面，解決遠程卡頓問題 根據自己操作系統 選擇NoMachine for Linux進行下載官網：ht

iucx 2024-05-07 14:11:26

gdb調試FAQ

“malloc.c: No such file or directory.” 參考：https://www.cnblogs.com/gatsby123/p/11755320.html 安裝依賴 sudo apt-get install li

ffl 2024-05-07 14:08:35

大數據面試SQL每日一題系列：最高峯同時在線主播人數。字節，快手等大廠高頻面試題

大數據面試SQL每日一題系列：最高峯同時在線主播人數。字節，快手等大廠高頻面試題 之後會不定期更新每日一題sql系列。 SQL面試題每日一題系列內容均來自於網絡以及實際使用情況收集，如有雷同，純屬巧合。 1.題目 問題1：如下爲某直播平臺各

魯邊 2024-05-07 14:06:45

工程款拖欠，農民工怎麼了？就得一直忍着委屈求全嗎？

事件背景 我以前只是在新聞看到過拖欠農民工工資這樣的事，但這次是發生在自己身上了！ 今天晚上下班後，看見父母面露愁色，並認真的聽着父母的對話。 大概意思是就是爸爸跟着工程隊包天活已經完事有一段時間了，但是包天的工資一直不給，而且聽爸爸說那意

久曲健 2024-05-07 14:06:15

Canvas簡歷編輯器-我的剪貼板裏究竟有什麼數據

Canvas圖形編輯器-我的剪貼板裏究竟有什麼數據 在這裏我們先來聊聊我們究竟應該如何操作剪貼板，也就是我們在瀏覽器的複製粘貼事件，並且在此基礎上聊聊我們在Canvas圖形編輯器中應該如何控制焦點以及如何實現複製粘貼行爲。 在線編輯: h

WindrunnerMax 2024-05-07 14:05:25

HarmonyOS 實現下拉刷新，上拉加載更多

組件介紹 PullToRefreshList允許用戶通過下拉動作來刷新列表內容，以及通過上拉動作來加載更多的數據。組件內部封裝了滾動監聽、狀態管理和動畫效果，使得開發者可以輕鬆集成到自己的項目中。 1. 實現思路 封裝成可複用的公共控件：

西北野狼 2024-05-07 14:05:15

【轉】在 Linux 里布署 Docker

來自：百度 Docker 可以佈署在 Linux 系統上，也可以佈署在你自己的電腦上。 在 Linux 系統上佈署 Docker： 安裝 Docker： curl -fsSL https://get.docker.com -o get-d

z5337 2024-05-07 14:05:05

使用.NET源生成器(SG)實現一個自動注入的生成器

DI依賴注入對我們後端程序員來說肯定是基礎中的基礎了,我們經常會使用下面的代碼注入相關的service services.AddScoped<Biwen.AutoClassGen.TestConsole.Services.TestServi

萬雅虎 2024-05-07 14:04:44

mysql索引使用基礎

1.創建&刪除 MySQL可以通過CREATE、ALTER、DDL三種方式創建一個索引。 在MySQL中，使用CREATE INDEX語句可以創建索引。具體語法如下： CREATE INDEX indexName ON tableNam

楚景然 2024-05-07 14:01:04