这期内容当中小编将会给大家带来有关使用原生JavaScript编写一个进度条功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
进度条实现介绍
使用JavaScript实现进度条功能。
原理：通过鼠标移动事件，获取鼠标移动的距离。
步骤：
（1）html 中 div 布局
（2）css 样式编写
（3）JavaScript特效编写
<body> <!-- 整体盒子 --> <div id="box"> <!-- 进度条整体 --> <div id="progress"> <!-- 进度条长度 --> <div id="progress_head"></div> <!-- 进度条移动条 --> <span id="span"></span> <div> <!-- 显示数据 --> <div id="percentage">0%</div> </div> </body>
<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><script> //js获取节点 var oProgress=document.getElementById('progress'); var oProgress_head=document.getElementById('progress_head'); var oSpan=document.getElementById('span'); var oPercentage=document.getElementById('percentage') //添加事件 鼠标按下的事件 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>效果图
<!DOCTYPE> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>进度条</title> <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> <!-- 整体盒子 --> <div id="box"> <!-- 进度条整体 --> <div id="progress"> <!-- 进度条长度 --> <div id="progress_head"></div> <!-- 进度条移动条 --> <span id="span"></span> <div> <!-- 显示数据 --> <div id="percentage">0%</div> </div> </body> </html> <script> //js获取节点 var oProgress=document.getElementById('progress'); var oProgress_head=document.getElementById('progress_head'); var oSpan=document.getElementById('span'); var oPercentage=document.getElementById('percentage') //添加事件 鼠标按下的事件 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>上述就是小编为大家分享的使用原生JavaScript编写一个进度条功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
