html原生js进度条圆形,原生 JavaScript 实现进度条

原生JavaScript特效

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;

};

};