定时器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)


相关推荐

  • linux(4)Linux 文件内容查看「建议收藏」

    linux(4)Linux 文件内容查看「建议收藏」查看文件内容总览cat由第一行开始显示文件内容tac从最后一行开始显示,可以看出tac是cat的倒着写!nl显示的时候,顺道输出行号!more一页一页的显示文件内容less

  • 520表白季,教你用matlab画动态心形曲线图,可自动保存GIF格式图片,送给女朋友,她们一定会惊讶,赶紧收藏!!!

    520表白季,教你用matlab画动态心形曲线图,可自动保存GIF格式图片,送给女朋友,她们一定会惊讶,赶紧收藏!!!昨天发表了一篇用python教你画心形图表白的文章:想要表白的看这里,教你用python画不同类型的心形图虏获芳心,值得收藏!!里面详细介绍了各种心形图的画法以及最终的表白神器,值得点赞收藏!!同样matlab也可以实现相同的功能并且还可以做得更好,今天就用教你用matlab画动态心形曲线图,不信请看下面:虏获芳心matlab画动态心形曲线图matlab画动态心形曲线图(基础版)matlab画3D心形图备注matlab画动态心形曲线图利用数学上的格式f(x)=x^2^/^3+e/3*(π-x^2

    2022年10月17日
  • Redis远程连接Redis客户端

    Redis远程连接Redis客户端在虚拟机的linux系统中一进入redis下的目录二启动redis服务三连接客户端四在windows本地中安装redis可视化软件五在linux关闭客户端六设置防火墙规则:我的因为已经设置过设置防火墙规则:firewall-cmd–zone=public–add-port=6379/tcp–permanent七设置密码:修改redis.conf…

  • 91p.wido.ws_tttzzzvipAPP

    91p.wido.ws_tttzzzvipAPP104.27.179.100北美地区IP网段:104.16.0.0-104.31.255.255更新时间:2014年07月19日18:47:41NetRange:104.16.0.0-104.31.255.255CIDR:104.16.0.0/12OriginAS:AS13335NetName:CLOUDFLARENETNetHandle:NET-104-16-0-0-1P…

    2022年10月30日
  • Python,Anaconda,Pycharm的区别及详细安装步骤

    Python,Anaconda,Pycharm的区别及详细安装步骤写在前面:千万不要下载Python,直接下载Anaconda+Pycharm就够了!!!详情往下看:一、Python,Anaconda,Pycharm的区别:1.Python是个解释器(基本编译环境)。2.Anaconda是一个python的发行版,包括了python和很多常见的软件库,和一个包管理器conda。常见的科学计算类的库都包含在里面了,使得安装比常规python安装要容易。…

  • 计算机组成与设计(六)—— 乘法器[通俗易懂]

    计算机组成与设计(六)—— 乘法器[通俗易懂]乘法的运算过程人们日常习惯的乘法是十进制,但计算机实现起来不方便。首先,需要记录9×9乘法表,每次相乘去表中找结果;其次,将竖式相加也不方便。但二进制却十分方便,冯·诺伊曼在《关于END

发表回复

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

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