Html5進度條外掛(自寫)
阿新 • • 發佈:2019-02-05
(function () { window.H5ProgressBar = function (obj) { this.height = obj.height; this.width = obj.width; this.speed = obj.speed; }; //在介面上佈局元素 H5ProgressBar.prototype.drawLayout = function () { document.write("<p id=\"loadTip\">開始下載</p>") document.write("<progress value=\"0\" max=\"100\" id=\"proDownFile\"></progress> ") document.write("<button id=\"load\">下載</button> <br> ") document.write("<br> ") document.write("設定寬度:<input id=\"width\" placeholder=\"number型別\"><button id=\"setWidthBtn\">確定</button> <br> ") document.write("設定高度:<input id=\"height\" placeholder=\"number型別\"><button id=\"setHeightBtn\">確定</button> <br> ") document.write("設定速度:<input id=\"speed\" placeholder=\"number型別(1-100%)\"><button id=\"setSpeedBtn\" >確定</button> <br> ") } //初始化方法,即程式入口,一開始從這裡執行 H5ProgressBar.prototype.init = function () { this.drawLayout(); var objPro = document.getElementById('proDownFile'); var width = this.width + "px" var height = this.height + "px" objPro.style.width = width; objPro.style.height = height; this.setProgressWidth(); this.setProgressHeight(); this.load(); this.setLoadSpeed(); } //設定進度條的寬度 H5ProgressBar.prototype.setProgressWidth = function () { var setWidthBtn = document.getElementById('setWidthBtn'); setWidthBtn.addEventListener('click', function () { var progress = document.getElementById('proDownFile'); var width = document.getElementById('width'); var newWidth = width.value if (newWidth.length == 0) { alert("不能為空"); } else { if (!isNaN(newWidth)) { progress.style.width = newWidth + "px" } else { alert("請輸入數字型別") } } }); } //設定進度條的高度 H5ProgressBar.prototype.setProgressHeight = function () { var setHeightBtn = document.getElementById('setHeightBtn'); setHeightBtn.addEventListener('click', function () { var progress = document.getElementById('proDownFile'); var height = document.getElementById('height'); var newHeight = height.value if (newHeight.length == 0) { alert("不能為空"); } else { if (!isNaN(newHeight)) { progress.style.height = newHeight + "px" } else { alert("請輸入數字型別") } } }); } var intValue = 0; var intTimer; var objTip; //下載 H5ProgressBar.prototype.load = function () { var load = document.getElementById('load'); var time = 1000 - this.speed * 10; load.addEventListener('click', function () { Btn_Click(time); }); } //設定下載速度 H5ProgressBar.prototype.setLoadSpeed = function () { var speed = document.getElementById('setSpeedBtn'); speed.addEventListener('click', function () { var speed = document.getElementById('speed'); var newSpeed = speed.value if (newSpeed.length == 0) { alert("不能為空"); } else { if (!isNaN(newSpeed)) { if (newSpeed <= 0 || newSpeed > 100) { alert("請設定1-100%之內的數") } else { Btn_Click(1000 - newSpeed * 10); } } else { alert("請輸入數字型別") } } }) } //設定時間 function Btn_Click(time) { var progress = document.getElementById('proDownFile'); intValue = progress.value if (intValue == progress.max) { reset() } else { intTimer = setInterval(Interval_handler, time); } } //重新下載 function reset() { intValue = 0; var progress = document.getElementById('proDownFile'); intTimer = setInterval(Interval_handler, 1000); } //定時事件 function Interval_handler() { intValue++; var objPro = document.getElementById('proDownFile'); objTip = document.getElementById('loadTip'); objPro.value = intValue; if (intValue >= objPro.max) { clearInterval(intTimer); objTip.innerHTML = "下載完成"; } else { intValue += Math.random() * 1.8; intValue = parseFloat(intValue.toFixed(1)); objTip.innerHTML = "正在下載" + intValue + "%"; } } })();
用法:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript" src="js/H5ProgressBar.js"></script> <script type="text/javascript"> new H5ProgressBar({ height:20, width:500, speed:10 }).init(); </script> </body> </html>