简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

js進度條範例程式碼

高洛峰
發布： 2016-12-16 16:46:48
原創
1175 人瀏覽過

例子，非常簡潔的js進度條實作程式碼，可用於消耗時間較多的頁面載入或批次產生頁面的情況。

完整程式碼：

<!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> 
<title>js进度条-www.yuju100.com</title> 
<style type="text/css"> 
body{ 
text-align:center; 
} 
.graph{ 
width:450px; 
border:1px solid #F8B3D0; 
height:25px; 
} 
#bar{ 
display:block; 
background:#FFE7F4; 
float:left; 
height:100%; 
text-align:center; 
} 
#barNum{ 
position:absolute; 
} 
</style> 
<script type="text/javascript"> 
function $(obj){ 
return document.getElementById(obj); 
} 
function go(){ 
$("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; 
$("bar").innerHTML = $("bar").style.width; 
if($("bar").style.width == "100%"){ 
window.clearInterval(bar); 
}
} 
var bar = window.setInterval("go()",50); 
window.onload = function(){ 
bar; 
} 
</script> 
</head> 
<body> 
<div class="graph"> 
<strong id="bar" style="width:1%;"></strong> 
</div> 
</body> 
</html>
登入後複製


更多js進度條範例程式碼相關文章請關注PHP中文網！

相關標籤：
js进度条
來源：php.cn
上一篇：pace.js – 網頁自動載入進度條插件 下一篇：JS 實現有進度條的頁面跳躍特效
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何將外部 div 的高度設定為始終等於特定內部 div 的高度？ 我有一個外部div，其中包含三個內部div。我希望最左邊的內部div始終確定外部div的高度。如果其他內部div的內容[比最左邊的div]少，它們將有空白空間。如果他們有更多的內容...
來自於 2023-11-07 13:59:30
0
2
314
請先套用適當的轉換，以解決vite內部伺服器錯誤：缺少元素/if/for節點的程式碼產生節點 所以昨天我正在做一個項目，當我準備退出時，因為我已經完成了它，我得到了這個錯誤，並且今天一整天都在嘗試修復它。我的程式碼可以工作，然後就崩潰了，將所有內容都取消到我知道它可以工作的...
來自於 2023-10-26 14:52:04
0
2
211
對齊表格中數字的小數點，並在儲存格中出現偽「中心」對齊 我想要一個包含一列十進制數的表格，小數點前後的長度不同，小數點全部對齊。列寬必須具有「流動」大小，並根據需要進行擴展，以容納任何資料單元格中的非常長的數字，或與該列相關的非常長的標...
來自於 2023-10-24 13:01:47
0
1
266
轉換JavaScript正規表示式為PHP 我知道這個問題已經被問了大約十幾次，但從技術上講，這個問題並不是一個騙局（如果您願意，請檢查其他問題）;)基本上，我有一個Javascript正則表達式來檢查用於前端驗證的電子郵件...
來自於 2023-10-23 22:58:33
0
2
394
將包含數組作為 useEffect 中的依賴項 每5秒鐘就會有一些來自長輪詢的數據，我希望我的元件在每次數組的一項（或數組長度本身）發生變化時調度一個操作。在將數組作為依賴項傳遞給useEffect時，如何防止useEffect...
來自於 2023-10-17 18:50:23
0
2
207
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！