Native JavaScript implementation of progress bar

The specific code for JavaScript to implement the progress bar is for your reference. The specific content is as follows

Progress bar implementation introduction

Use JavaScript to implement the progress bar function.

Principle: Get the distance the mouse moves through the mouse movement event.

step:

(1) DIV layout in HTML (2) CSS style writing (3) JavaScript special effect writing

HTML code

<body>
 <!-- Overall box -->
 <div id="box">
 <!-- Progress bar as a whole -->
 <div id="progress">
 <!-- Progress bar length -->
  <div id="progress_head"></div>
 <!-- Progress bar moving bar -->
 <span id="span"></span>
 <div>
 <!-- Display data -->
 <div id="percentage">0%</div>
 </div>
</body>

CSS Styles

<style>
 /* Overall style, eliminate default style*/
 body{
 margin:0;
 padding:0;
 }
 #box{
 position:relative;
 width:1000px;
 height:30px;
 margin:100px auto;
 } 
 #progress{
 position:relative;
 width:900px;
 height:30px;
 background:#999999;
 border-radius:8px;
 margin:0 auto; 
 }
 #progress_head{
 width:0px;
 height:100%;
 border-top-left-radius:8px;
 border-bottom-left-radius:8px;
 background:#9933CC;
 
 }
 span{
 position:absolute;
 width:20px;
 height:38px;
 background:#9933CC;
 top:-4px;
 left:0px;
 cursor:pointer;
 }
 #percentage{
 position:absolute;
 line-height:30px;
 text-align:center;
 right:-44px;
 top:0;
 }
 
 
</style>

JavaScript code

<script>

 //js get node var oProgress = document.getElementById('progress');
 var oProgress_head = document.getElementById('progress_head');
 var oSpan = document.getElementById('span');
 var oPercentage = document.getElementById('percentage')

 //Add event mouse down event oSpan.onmousedown=function(event){
 
 var event=event || window.event;
 var x=event.clientX-oSpan.offsetLeft;

 document.onmousemove=function(){
 
 var event=event || window.event;
 var wX=event.clientX-x;
 
 
 if(wX<0)
 {
  wX=0;
 }else if(wX>=oProgress.offsetWidth-20)
 {
  wX = oProgress.offsetWidth - 20;
 }
 oProgress_head.style.width=wX+'px';
 oSpan.style.left=wX+'px';
 
 oPercentage.innerHTML=parseInt(wX/(oProgress.offsetWidth-20)*100)+'%';
 
 return false;
 };
 
 document.onmouseup=function(){
 
 document.onmousemove=null; 
 };
 
 }; 
</script>

Rendering

Overall code

<!DOCTYPE>
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Progress Bar</title>
 <style>
 /* Overall style, eliminate default style*/
 body{
 margin:0;
 padding:0;
 }
 #box{
 position:relative;
 width:1000px;
 height:30px;
 margin:100px auto;
 } 
 #progress{
 position:relative;
 width:900px;
 height:30px;
 background:#999999;
 border-radius:8px;
 margin:0 auto; 
 }
 #progress_head{
 width:0px;
 height:100%;
 border-top-left-radius:8px;
 border-bottom-left-radius:8px;
 background:#9933CC;
 
 }
 span{
 position:absolute;
 width:20px;
 height:38px;
 background:#9933CC;
 top:-4px;
 left:0px;
 cursor:pointer;
 }
 #percentage{
 position:absolute;
 line-height:30px;
 text-align:center;
 right:-44px;
 top:0;
 }
 
 
 </style>
</head>
<body>

 <!-- Overall box -->
 <div id="box">
 <!-- Progress bar as a whole -->
 <div id="progress">
 <!-- Progress bar length -->
  <div id="progress_head"></div>
 <!-- Progress bar moving bar -->
 <span id="span"></span>
 <div>
 <!-- Display data -->
 <div id="percentage">0%</div>
 </div>

</body>
</html>
<script>

 //js get node var oProgress = document.getElementById('progress');
 var oProgress_head = document.getElementById('progress_head');
 var oSpan = document.getElementById('span');
 var oPercentage = document.getElementById('percentage')

 //Add event mouse down event oSpan.onmousedown=function(event){
 
 var event=event || window.event;
 var x=event.clientX-oSpan.offsetLeft;

 document.onmousemove=function(){
 
 var event=event || window.event;
 var wX=event.clientX-x;
 
 
 if(wX<0)
 {
  wX=0;
 }else if(wX>=oProgress.offsetWidth-20)
 {
  wX = oProgress.offsetWidth - 20;
 }
 oProgress_head.style.width=wX+'px';
 oSpan.style.left=wX+'px';
 
 oPercentage.innerHTML=parseInt(wX/(oProgress.offsetWidth-20)*100)+'%';
 
 
 return false;
 };
 
 document.onmouseup=function(){
 
 document.onmousemove=null;
 
 };
 
 };
 
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Several methods of javascript progress bar
How to implement progress bar in js
JavaScript to achieve web page loading progress bar code is super simple
js progress bar implementation code
JS progress bar effect implementation code organization
JS realizes the effect of circular progress bar (from 0 to 100%)
Simple progress bar control written in Javascript jquery css
Progress bar effect implemented with CSS+JS
js realizes audio control progress bar function
Using Session with Javascript in PHP to implement file upload progress bar function

<<: VMware vSphere 6.7 (ESXI 6.7) graphic installation steps

>>: Multiple methods to modify MySQL root password (recommended)