原生js进度条

最新推荐文章于 2025-05-11 06:15:33 发布

翻译最新推荐文章于 2025-05-11 06:15:33 发布 · 948 阅读

js 专栏收录该内容

5 篇文章

订阅专栏

原生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>