原生js进度条
代码块
例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#box{
width:300px;
height:32px;
margin:150px auto;
border:1px solid #00;
}
img{
float:left;
cursor:pointer;
}
#plan{
float:left;
width:250px;
height:26px;
border:3px solid #4bbeed;
border-radius:16px;
position:relative;
overflow:hidden;
}
#move{
position:absolute;
width:0px;
height:26px;
background:#4bbeed;
border-radius:16px;
}
span{
color:#FFFFFF;
line-height:26px;
float: right;
margin-right:10px;
font-family:"微软雅黑";
display:none;
}
</style>
</head>
<body>
<div id="box">
<img src="images/play.png">
<div id="plan">
<div id="move">
<span></span>
</div>
</div>
</div>
<script type="text/javascript">
/*window.onload= function(){
//浏览器加载后执行
}*/
//Dom 文档对象模型 元素节点 标签节点-对象-属性
var oImg=document.getElementsByTagName("img")[0];//通过img标签查找元素节点 返回数组 通过下标
var onOff=true;//按钮开关
var move=document.getElementById("move");//获取id是move的节点内容
var plan=document.getElementById("plan");//获取id是plan的节点
var oNum=document.getElementsByTagName("span")[0];
var width=0;
var num=0;
var time=null;//定义一个定时器
plan.constructor.prototype.getStyle=function(attr){
//currentStyle IE getComputedStyle 火狐
/*if(this.currentStyle){
return this.currentStyle[attr];
}
else{
return getComputedStyle(this)[attr];
}*/
return this.currentStyle?this.currentStyle[attr]:getComputedStyle(this)[attr];
}
//alert(plan.getStyle("width"));参数 实际参数 形式参数
oImg.onclick=function(){
/*if(onOff){//如果onfff返回的是真，执行
pause();
}
else{//如果返回的是false
play();
}*/
onOff?pause():play();//三目运算
}
function pause(){
oImg.src="images/pause.png";
time=setInterval(function(){
width++;//width=width+1
num=parseInt(width/parseInt(plan.getStyle("width"))*100);
if(num>15){
oNum.innerHTML=num+"%";//改变节点中的内容
oNum.style.display="block";
}
move.style.width=width+"px";
if(num>=100){
clearInterval(time);//清楚定时器
oImg.src="images/play.png";
}
},13);
onOff=false;
}
function play(){
oImg.src="images/play.png";
clearInterval(time);//清楚定时器
onOff=true;
}
//定义一个函数方法
</script>
</body>
</html>
注意：**。
今天的文章原生js进度条分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/29570.html
