0203 定时器-间歇函数，案例

最新推荐文章于 2024-06-20 20:20:21 发布

与生俱来123

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量109

点赞数

分类专栏：前端文章标签： javascript 前端开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_62919289/article/details/128867495

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

定时器

需求

每隔一段时间自动执行一段代码

代码

开启定时器

setInterval(函数,间隔时间)

作用：每隔一段时间调用这个函数

间隔时间单位是毫秒

    <script>
      setInterval(function () {
        console.log("高薪就业")
      }, 1000)
    </script>

    <script>
      setInterval(function () {
        console.log("高薪就业")
      }, 1000)

      function show() {
        console.log("学好技术")
      }
      setInterval(show, 2000)
    </script>

关闭定时器

     let 变量名=setInterval(函数,间隔时间)
     clearInterval(变量名)

    <script>
      function show() {
        console.log("学好技术")
      }
      let timer = setInterval(show, 2000)
      clearInterval(timer)
    </script>

用户倒计时案例

需求

用户一段时间后才可以点击

  <style>
    button {
        margin-left: 50px;
    }
  </style>
  <body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        用户协议作为一种格式合同，是企业常用来和用户缔结契约的方式。《合同法》中对于格式合同中的条款给出了明确的定义：“格式条款是当事人为了重复使用而预先拟定，并在订立合同时未与对方协商的条款。”
        由于合同条款制定的时候是没有经过双方协商的，所以《合同法》对于格式合同特别作出了以下规定，以保障合同当事人的合法权益
    </textarea>
    <br />
    <button class="btn" disabled>我已经同意该协议(6)</button>
    <script>
      //获取元素button
      let btn = document.querySelector("button")
      //变量计数
      let i = 6
      //开启定时器
      let timer = setInterval(function () {
        i--
        btn.innerHTML = `我已经同意该协议(${i})`
        if (i === 0) {
          //关闭定时器
          clearInterval(timer)
          //开启按钮
          btn.disabled = false
          //更换文字
          btn.innerHTML = "我已经同意该协议"
        }
      }, 1000)
    </script>
  </body>