定时器setTimeout和setInterval的简单应用[通俗易懂]

定时器setTimeout和setInterval的简单应用[通俗易懂]本文简单利用定时器setTimeout和setInterval举了两个小栗子:定时炸弹和1-100递增

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

本文简单利用定时器setTimeoutsetInterval举了两个小栗子:定时炸弹1-100递增

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13-14定时器</title>
    <style>
        em {
            font-style: normal;
        }
    </style>
</head>

<body>
    <h2>@定时器</h2>

    <!-- ----------------------------------13-------------------------------------------------------------- -->
    <br>
    <h3>13 在页面上显示10秒的倒计时, 然后显示“ boom!!!”</h3>
    <em id="p1">定时器开启,10S倒计时开始:</em>
    <em id="p2"></em>
    <script>
        var count1 = 10
        var changeP = document.querySelector("#p1")
        var changeP2 = document.querySelector("#p2")
        // 设定一个10s的定时器
        setTimeout(
            function () {
                changeP.innerText = "噫吁嚱,要boom了!!!"
            },
            10 * 1000
        )
        // 设定一个10s倒计时
        var timer = setInterval(
            function () {
                --count1
                changeP2.innerText = count1
                if (count1 === 0) {
                    clearInterval(timer)
                    count1 = 10
                }
            }, 1000
        )
    </script>

    <!-- ----------------------------------14-------------------------------------------------------------- -->
    <br>
    <h3>14 每秒产生并打印递增的自然数1、 2、 3...,直到100为止, 点击按钮暂停 / 继续</h3>
    <em id="em4">倒递增的自然数</em>
    <button id="btnClear">暂停</button>
    <script>
        var em4 = document.querySelector("#em4")
        var btnClear = document.querySelector("#btnClear")
        var count = 1
        var timerId = null
        // 开始倒计时
        function startAutoPlay() {
            if (!timerId) {
                timerId = setInterval(
                    function countNumber() {
                        em4.innerText = count++
                        if (count === 100) {
                            clearInterval(timer)
                            count = 0
                        }
                    },
                    1000
                )
            }
        }
        startAutoPlay()

        // 给按钮绑定事件委托,实现暂停/继续的功能
        btnClear.addEventListener(
            "click",
            function (e) {
                if (e.target.innerText === "暂停") {
                    clearInterval(timerId)
                    timerId = null
                    btnClear.innerText = "继续"
                } else if (e.target.innerText === "继续") {
                    startAutoPlay()
                    btnClear.innerText = "暂停"
                }
            }
        )
    </script>
</body>

</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185923.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 大数据理论体系

    大数据理论体系目录结构大数据是什么?大数据是如何发展起来的?大数据处理的基本流程是什么?为什么说数据不动代码动?移动计算比移动数据更划算?DAG对大数据处理有什么好处?批处理和流处理如何区分?有边界数据和无边界数据如何区分?批处理中如何提高CPU利用率?什么是事件时间和处理时间?Workflow设计模式指的什么?什么是商业智能(BI)?分布式锁是什么?如何实现?分布式事务是什么?如何实现?分布式锁和分布式事务有什么区别?CAP定理是什么?BASE理论是什么?分布式系统有哪些衡量指标?

  • navicat激活码2021【2021最新】

    (navicat激活码2021)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~DB…

  • Java getinstance(java如何实现输入)

    1.背景实际中经常使用getInstance()方法返回一个对象,对于工厂模式,传入对应的参数返回与之相对应的对象.但是,问题来了,返回的对象需要被强制转换,很麻烦.importjava.lang.reflect.*;publicclasstest{publicstaticvoidmain(String[]args){test1t1=factory.getInstance(“…

  • flutter下载图片到本地_禁止拍照上传图片

    flutter下载图片到本地_禁止拍照上传图片/Ios、Android应用权限开启流程/IOS应用(询问权限、开启权限)Android应用(询问权限、开启权限)/自定义选择相机和相册的对话框/创建一个存放对话框标题、相册拍照选项、关闭对话框的集合[{‘label’:’${titLab??’上传有效凭证’}’},{‘label’:’拍照’},{‘label’:’从手机相册选择’},{‘label’:’取消’},…

  • opencv求逆矩阵函数_c++矩阵

    opencv求逆矩阵函数_c++矩阵voidprintMatrix(CvMat*mat){intk=0;for(inti=0;irows;i++){for(intj=0;jcols;j++){printf(“%10.3f”,cvmGet(mat,i,j));

  • facebook录制本人视频_机器人视频

    facebook录制本人视频_机器人视频Facebook让机器人“观看”上万次视频后,学会了绕道走路

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号