Let's start with a step-by-step implementation of this effect:
1. Create a HTML5 page
First create the basic HTML 5 Basic frames page
The code is as follows |
Copy Code |
<! DOCTYPE html> <body>
</body>
|
2. Increase the progress bar label
First, in the Body section, add the following tab for the progress bar:
The code is as follows |
Copy Code |
1 <progress id= "prog" value= "0" max= "></progress>" |
The progress bar in HTML 5 uses the <progress> tag, where the value of the start is set to 0, the maximum value is 100, and when the task completes, the progress bar becomes 100. We will update this value through JavaScript, so the above tag simply initializes the progress bar.
3. Click on the button to write
Now we're going to start writing the Click button Event, and the code is as follows:
The code is as follows |
Copy Code |
<input id= "startbtn" type= "button" value= "Start" onclick= "startprogress ()"/> <div id= "NumValue" >0%</div> |
The code for StartProcess () is as follows:
The code is as follows |
Copy Code |
Current progress var currprogress = 0; Whether the progress bar is complete var done = false; Maximum number of progress bar counts var total = 100; |
After declaring the above variable, you can write the Startprogress () method, which is as follows:
The code is as follows |
Copy Code |
function startprogress () {
Get the label of the progress bar var Prbar = document.getElementById ("prog"); Get Start button var Startbutt = document.getElementById ("startbtn"); Number of progress percentages displayed var val = document.getElementById ("NumValue"); } |
Next, when the user points to the Start button, the button needs to be set to unavailable, and the value of the progress bar is updated:
The code is as follows |
Copy Code |
Startbutt.disabled=true; Prbar.value = currprogress; |
And to show the percentage of the progress bar currently complete and display it, use the following code:
The code is as follows |
Copy Code |
Val.innerhtml =math.round ((currprogress/total) *100) + "%"; |
You can then add up the number of the progress bar:
The code is as follows |
Copy Code |
currprogress++; |
And to determine if the progress value of 100, then stop, set the Done=false logo, otherwise every 0.1 seconds through the JavaScript Setimeout method to delay, as follows:
The code is as follows |
Copy Code |
if (currprogress>100) done=true; If the value of the progress bar is not yet 100, continue to accumulate if (!done) SetTimeout ("startprogress ()", 100);
If the progress bar has reached a value of 100, reset the button to be available and reset the Currprogrss=0 Else { document.getElementById ("startbtn"). Disabled = false; Done = false; currprogress = 0; } |
The last code to complete is as follows:
The code is as follows |
Copy Code |
<!doctype html> <meta charset= "UTF-8" > <TITLE>W3CODERKING-HTML5 scroll bar Label | Progress</title> <script type= "Text/javascript" > Current progress var currprogress = 0; Whether the progress bar is complete var done = false; Maximum number of progress bar counts var total = 100; function startprogress () {
Get the label of the progress bar var Prbar = document.getElementById ("prog"); Get Start button var Startbutt = document.getElementById ("startbtn"); Number of progress percentages displayed var val = document.getElementById ("NumValue"); Startbutt.disabled=true; Prbar.value = currprogress; val.innerhtml = Math.Round ((currprogress/total) *100) + "%"; currprogress++; if (currprogress>100) done=true; if (!done) SetTimeout ("startprogress ()", 100); Else { document.getElementById ("startbtn"). Disabled = false; Done = false; currprogress = 0; } }
</script> <body> <progress id= "prog" value= "0" max= "></progress>" <input id= "startbtn" type= "button" value= "Start" onclick= "startprogress ()"/> <div id= "NumValue" >0%</div> </body> |
Example
The code is as follows |
Copy Code |
<div class= "Entry" > <div id= "Entry" > <p><br/> <br/> <br/> <meta charset= "UTF-8"/></p> <style type= "Text/css" > Li { width:200px; Height:auto; } Li img { max-width:100%; } </style> <p> </p> <progress id= "Progress" value= "0" max= "></progress>" <span>0%</span> <ul id= "Ul-list" > <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <p><br/> <br/> <script> function back (ARR,SUCCFN) {</p> <p> var loaded=0; var opr=document.queryselector ("#progress"); var alist=document.queryselector ("#ul-list") .children;</p> <p> for (var i=0;i<arr.length;i++) {</p> <p> var oimg=new Image (); Oimg.onload=function () { loaded++; opr.value=loaded * (LOADED/ARR.LENGTH*10); Document.title=opr.value; Alist[loaded-1].innerhtml= "if (loaded==arr.length) { SUCCFN ();//callback function } } Oimg.onerror=function () { loaded++; } Oimg.src=arr[i]; } } Window.onload=function () {</p> <p> Back ( [ "/rozne/wallpaper-1792999.jpg", "/rozne/wallpaper-2215424.jpg", "/rozne/wallpaper-2192771.jpg", "/rozne/wallpaper-1443743.jpg", "/rozne/wallpaper-435976.jpg", "/rozne/wallpaper-2786892.png", "/rozne/wallpaper-2646159.jpg", "/rozne/wallpaper-1667415.jpg", "/rozne/wallpaper-151191.jpg", "/rozne/wallpaper-2603874.jpg" </p> <p>], function () { Alert ("Load Complete"); Window.location.href= "Www.111cn.net"; } ); } </script></p> <div class= "Clear" > </div> </div> <div class= "Clear" > </div> </div> |