JaveScript 定时器、随机点名

原创已于 2022-03-28 15:35:53 修改 · 566 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2022-03-27 21:52:54 首次发布

定时器

每隔一段时间就重复做一个操作

1.语法： setInterval(执行的函数，时间间隔)

2.停止定时器：

> let timeId = setinterval()

> clearInterval(timeId)

<body>
  <button>别说了</button>
  <button>继续说</button>
  <span>10</span>
  <!-- js -->
  <script>
    //获取
    let stop = document.querySelector(` button:nth-of-type(1)`)
    let go = document.querySelector(` button:nth-of-type(2)`)
    let span = document.querySelector(`span`)

    // 倒计时，到0时停止
    let i = 11
    // 创建句柄使用倒计时函数    setInterval(函数，间隔时间)
    let timesId

    //一开始自动开始倒计时
    //因为代码会冗余，所有要封装函数
    function startTimer() {
      timesId = setInterval(function () {
        i--
        //输出
        span.innerText = i
        //到0时停止     clearInterval(句柄  /  唯一标识)
        if (i == 0) {
          //重置
          i = 11
          clearInterval(timesId)
        }
      }, 1000)
    }
    //调用
    startTimer()

    //建立事件
    go.addEventListener(`click`, function () {
      //开启定时器之前，先清除
      clearInterval(timesId)
      //开启定时器 
      // timesId = setInterval(function () {
      //   i--
      //   //输出
      //   span.innerText = i
      //   //到0时停止     clearInterval(句柄  /  唯一标识)
      //   if (i == 0) {
      //     clearInterval(timesId)
      //   }
      // }, 1000)
      startTimer()
    })

    stop.addEventListener(`click`, function () {
      clearInterval(timesId)
    })
  </script>
</body>

下班倒计时（时间对象 + 定时器）

<body>
  <div class="countdown">
    <p class="next">今天是2022年3月28日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">00</span>
      <i>:</i>
      <span id="scond">00</span>
    </p>
    <p class="tips">
      现在是18:30:00
    </p>
  </div>

  <script>
    // 获取元素
    let hourEle = document.querySelector('#hour')
    let minutesEle = document.querySelector('#minutes')
    let scondEle = document.querySelector('#scond')
    let tips = document.querySelector('.tips')
    let next = document.querySelector('.next')

    // 开启计时器   间隔时间  1s
    let timerId = setInterval(backTime, 1000)
    // 封装函数
    function backTime() {
      // 获取下课时间离当前时间的时间戳
      let offset = parseInt((+new Date('2022-3-28 12:30:00') - Date.now()) / 1000)
      // 获取时   补'0'
      let hour = parseInt(offset / 60 / 60)
      hour = hour < 10 ? '0' + hour : hour
      // 分
      let minute = parseInt((offset % 3600) / 60)
      minute = minute < 10 ? '0' + minute : minute
      // 秒
      let second = parseInt(offset % 60)
      second = second < 10 ? '0' + second : second
      //输出
      // console.log(hour, minute, second);
      //打印到页面
      hourEle.innerHTML = hour
      minutesEle.innerHTML = minute
      scondEle.innerHTML = second

      // 停止计时器
      if (offset == 0) {
        clearInterval(timerId)
        return
      }
    }
    // 调用函数
    backTime()


    // 设置'现在时间'
    //定时器，调用函数，间隔时间
    setInterval(nowTime, 1000)
    //封装函数
    function nowTime() {
      //获取日期对象
      let date = new Date()
      //获取日期对象的每一个部分
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      // 补'0'
      hour = hour < 10 ? '0' + hour : hour
      let minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      let second = date.getSeconds()
      second = second < 10 ? '0' + second : second
      //输出
      tips.innerHTML = `现在是${hour}:${minute}:${second}`
      next.innerHTML = `今天是${year}年${month}月${day}日`
    }
    // 调用函数
    nowTime()
  </script>
</body>

随机点名

 <body>
    <p>这里显示名字</p>
    <button class="start">开始随机点名</button>
    <button class="end">结束随机点名</button>

    <script>
      let names = ['A', 'B', 'C', 'D', 'E', 'F']

      let p = document.querySelector('p')
      let start = document.querySelector('button:nth-of-type(1)')
      let end = document.querySelector('button:nth-of-type(2)')
      let timerId, index
      // 闪动效果
      start.addEventListener('click', function() {
        clearInterval(timerId)
        start.disabled = true
        // 添加一个定时器，在定时器中重复生成随机数，获取姓名并赋值
        timerId = setInterval(function() {
          // 生成一个随机数
          index = parseInt(Math.random() * names.length)
          let name = names[index]
          // 将对应的名字在p中显示
          p.innerText = name
        }, 100)
      })

      // 实现点名
      end.addEventListener('click', function() {
        start.disabled = false
        // 1.停止定时器
        clearInterval(timerId)
        // 2.删除元素
        names.splice(index, 1)
        // 3.进行判断，是否需要禁用
        if (names.length == 0) {
          // 让  两个点名按钮 禁用
          start.disabled = true
          end.disabled = true
        }
      })
    </script>
  </body>