用js做简易进度条

最新推荐文章于 2021-06-01 17:00:40 发布

转载最新推荐文章于 2021-06-01 17:00:40 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dan0217/p/8873868.html

本文通过一个简单的HTML页面示例介绍了如何使用JavaScript来控制一个进度条元素的宽度变化，并利用按钮控制其暂停与继续的功能。同时展示了定时器在网页交互设计中的应用。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #progress{
            width: 5px;
            height: 10px;
            background: #008000;
        }
    </style>
</head>
<body>
<div id="progress">

</div>
<button type="button" id="btn">停止</button>
<button type="button" id="go">继续</button>
<script>
    var box = document.getElementById("progress");
    var btn = document.getElementById("btn");
    var go = document.getElementById("go");
    box.style.width = "100px";
    var i = 0;
    var timer = 0;
    //定时器   递归函数
    function F(){
        i+=5;
        box.style.width = i+"px";
        if(i<800){
            timer = setTimeout(F,50);
        }
    }
    setTimeout(F,50);
  btn.onclick = function(){
      clearTimeout(timer);
  }
    go.onclick = function(){
        F();
  }



//    var i = 0;
//    function F(x,y){
//        console.log(x+y);
//    }
    //1秒后调用函数F
//    setTimeout(F,1000);
//    setTimeout("F()",1000);
//    setTimeout(F,3000,3,6);
//    setTimeout("F(3,6)",3000);  定时器本质：把代码插入队列

//    var timer = setTimeout(F,2000,3,6);
//    timer = setTimeout(F,2000,2,6);
//    timer = setTimeout(F,5000,5,6);
//    timer = setTimeout(F,3000,3,6);
//    timer = setTimeout(F,1000,1,6);
//    console.log(timer);
//    clearTimeout(timer,1);
</script>
</body>