JavaScript實現進度條的具體代碼，供大家參考，具體內容如下

進度條實現介紹

使用JavaScript實現進度條功能。

原理：通過鼠標移動事件，獲取鼠標移動的距離。

步驟：

(1)html 中 div 布局

(2)css 樣式編寫

(3)JavaScript特效編寫

html代碼

0%

css樣式

/* 整體樣式，消除默認樣式 */

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;

}

JavaScript代碼

//js獲取節點

var oProgress=document.getElementById('progress');

var oProgress_head=document.getElementById('progress_head');

var oSpan=document.getElementById('span');

var oPercentage=document.getElementById('percentage')

//添加事件 鼠標按下的事件

oSpan.οnmοusedοwn=function(event){

var event=event || window.event;

var x=event.clientX-oSpan.offsetLeft;

document.οnmοusemοve=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.οnmοuseup=function(){

document.οnmοusemοve=null;

};

};

效果圖

整體代碼

進度條

/* 整體樣式，消除默認樣式 */

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;

}

0%

//js獲取節點

var oProgress=document.getElementById('progress');

var oProgress_head=document.getElementById('progress_head');

var oSpan=document.getElementById('span');

var oPercentage=document.getElementById('percentage')

//添加事件 鼠標按下的事件

oSpan.οnmοusedοwn=function(event){

var event=event || window.event;

var x=event.clientX-oSpan.offsetLeft;

document.οnmοusemοve=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.οnmοuseup=function(){

document.οnmοusemοve=null;

};

};

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html原生js进度条圆形,原生JavaScript实现进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。