首頁 > 開發者 > JavaScript
標籤：javascript 進度條
demo地址：http://output.jsbin.com/buquyedosa
思路如下：代碼都有注釋，就不一一介紹了。
<!DOCTYPE html><html><head lang="zh-cn"> <meta charset="UTF-8"> <title>進度條</title><style> .progress{ position: fixed; top: 0; right: 0; left: 0; height: 20px; background: #f5f5f5; border-bottom: 1px solid #ddd; } .progress-inner{ width: 1%; background: #abcdef; position: absolute; top: 0; left: 0; bottom: 0; }</style></head><body onprogress=""><div class="progress"> <div class="progress-inner" id="progress"></div></div><script> (function () { // 擷取進度條 div var $progress = document.getElementById(‘progress‘); // 初始進度，1% var progress = 1; // 產生隨機數 var random = function(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); }; // 跑進度 var onprogress = function () { // 隨機時間 var timeout = random(10, 30); setTimeout(function () { // 如果頁面載入完畢，則直接進度到 100% if(window.loaded){ $progress.style.width = ‘100%‘; return; } // 隨機進度 progress += random(1, 5); // 隨機進度不能超過 98%，以免頁面還沒載入完畢，進度已經 100% 了 if(progress > 98){ progress = 98; } $progress.style.width = progress + ‘%‘; onprogress(); }, timeout); }; // 開始跑進度 onprogress(); window.onload = function(){ window.loaded = true; }; })();</script><iframe src="http://baidu.com/" frameborder="0"></iframe><iframe src="http://163.com/" frameborder="0"></iframe><iframe src="http://qq.com/" frameborder="0"></iframe><iframe src="http://tencent.com/" frameborder="0"></iframe></body></html>網頁載入進度條中的javascript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
