Html5 progress bar plug-in (self-writing)

Html5 progress bar plug-in (self-writing)

(Function () {window. h5ProgressBar = function (obj) {this. height = obj. height; this. width = obj. width; this. speed = obj. speed ;}; // layout element H5ProgressBar on the interface. prototype. drawLayout = function () {document. write ("<p id = \" loadTip \ "> Start download </p>") document. write ("<progress value = \" 0 \ "max = \" 100 \ "id = \" proDownFile \ "> </progress>") document. write ("<button id = \" load \ "> download </button> <br>") document. write ("<br>") Document. write ("Set width: <input id = \ "width \" placeholder = \ "number Type \"> <button id = \ "setWidthBtn \"> OK </button> <br> ") document. write ("set height: <input id = \ "height \" placeholder = \ "number Type \"> <button id = \ "setHeightBtn \"> OK </button> <br> ") document. write ("set speed: <input id = \" speed \ "placeholder = \" number type (1-100%) \ "> <button id = \" setSpeedBtn \ "> OK </button> <br>")} // initialization method, that is, the program entry. Execute H5ProgressBar from here. 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 ();} // set the progress bar width to H5ProgressBar. prototype. setProgressWidth = function () {var setWidthBtn = document. getE LementById ('setwidthbtn '); setWidthBtn. addEventListener ('click', function () {var progress = document. getElementById ('prodownfile'); var width = document. getElementById ('width'); var newWidth = width. value if (newWidth. length = 0) {alert ("cannot be blank");} else {if (! IsNaN (newWidth) {progress. style. width = newWidth + "px"} else {alert ("enter a number type") }});} // set the height of the progress bar 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 ("cannot be blank");} else {if (! IsNaN (newHeight) {progress. style. height = newHeight + "px"} else {alert ("enter a number type") }});} var intValue = 0; var intTimer; var objTip; // download H5ProgressBar. prototype. load = function () {var load = document. getElementById ('load'); var time = 1000-this. speed * 10; load. addEventListener ('click', function () {Btn_Click (time) ;});} // sets the download speed to H5ProgressBar. prototype. setLoadSpeed = function () {v Ar speed = document. getElementById ('setspeedbtn '); speed. addEventListener ('click', function () {var speed = document. getElementById ('speed'); var newSpeed = speed. value if (newSpeed. length = 0) {alert ("cannot be blank");} else {if (! IsNaN (newSpeed) {if (newSpeed <= 0 | newSpeed> 100) {alert ("set the number within 1-100% ")} else {Btn_Click (1000-newSpeed * 10) ;}} else {alert ("Enter the number type") }})} // set the time function Btn_Click (time) {var progress = document. getElementById ('prodownfile'); intValue = SS. value if (intValue = progress. max) {reset ()} else {intTimer = setInterval (Interval_handler, time) ;}// re-download function reset () {intValue = 0; var progress = document. getElementById ('prodownfile'); intTimer = setInterval (Interval_handler, 1000) ;}// scheduled event function Interval_handler () {intValue ++; var objPro = document. getElementById ('prodownfile'); objTip = document. getElementById ('loadtip '); objPro. value = intValue; if (intValue> = objPro. max) {clearInterval (intTimer); objTip. innerHTML = "download completed";} else {intValue + = Math. random () * 1.8; intValue = parseFloat (intValue. toFixed (1); objTip. innerHTML = "downloading" + intValue + "% ";}}})();

Usage:

 

<Script type = "text/javascript" src = "js/H5ProgressBar. js "> </script> <script type =" text/javascript "> new H5ProgressBar ({height: 20, width: 500, speed: 10 }). init (); </script>