web前端js基础之setTimeout和setinterval的使用

最新推荐文章于 2024-05-29 15:14:06 发布

空投在我怀里

最新推荐文章于 2024-05-29 15:14:06 发布

阅读量592

点赞数 1

分类专栏： web前端js基础文章标签： setTimeout setinterval js clearTimeout clearInterval

本文链接：https://blog.csdn.net/wrk2466836002/article/details/84135855

版权

web前端js基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、首先介绍下2者的“含义”及“区别”。

setTimeout(function(){ alert("Hello"); }, 3000); 间隔3秒弹出一次，就不再弹出了

setInterval(function(){ alert("Hello"); }, 3000); 每间隔3秒弹出一次，反复弹出

可以用来写、当前时间、进度条、切换背景、秒钟计时等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #box{
        width: 100%;
        height: 40px;
        position: relative;
        background: #ddd;
    }
    #bar{
        width: 10px;
        height: 40px;
        background: #4CAF50;
        position: absolute;
    }
</style>
<body>
<input type = "submit" id="stopbtn" value="暂停"><input type = "submit" id="playbtn" value="开始"><input type="text" id="shij">
<div id="box">
    <div id="bar"></div>
</div>
</body>
</html>


<script>
    //1.秒钟计时器
    var c = 0;
    var param = 0;

    function Shij() {
        shij.value = c;
        c = c + 1;
        param = setTimeout(Shij, 1000);//变量设置全局,后面就可以进行暂停
    }
    Shij();

    stopbtn.onclick = function () {
        clearTimeout(param);//清除计时器
    }
    playbtn.onclick = function () {
        Shij();
    }
</script>


<script>
    //进度条
        var i = 0;
        function frame() {
            if (i == 100) {
                clearInterval(timenum);
            } else {
                i++;
                bar.style.width = i + '%';
            }
            shij.value = i + '%';
        }

    playbtn.onclick = function (){
        i = 0;
        timenum = setInterval(frame, 10);
    }
    stopbtn.onclick = function () {
        clearInterval(timenum);
    }
</script>

空投在我怀里

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端js基础之setTimeout和setinterval的使用

一、首先介绍下2者的“含义”及“区别”。setTimeout(function(){ alert("Hello"); }, 3000); 间隔3秒弹出一次，就不再弹出了setInterval(function(){ alert("Hello"); }, 3000); 每间隔3秒弹出一次，反复弹出可以用来写、当前时间、进度条、切换背景、秒钟计时等等&lt;!DOCTYPE htm...
复制链接

扫一扫