计科随机文库
首页 留言 小视频 登录
一个下班倒计时的JS代码分析

// 获取存储的下班时间
      var endTime = localStorage.getItem('endTime')
      var timer = null
      if (endTime) {
        document.getElementById('time').value = endTime
        startCountdown()
      }
      // 保存下班时间
      document.querySelector('form').addEventListener('submit', function (e) {
        e.preventDefault()
        var time = document.getElementById('time').value
        localStorage.setItem('endTime', time)
        clearInterval(timer)
        startCountdown()
      })
      // 开始倒计时
      function startCountdown() {
        var endTime = localStorage.getItem('endTime')
        if (!endTime) return
        var end = new Date()
        end.setHours(endTime.substr(0, 2), endTime.substr(3, 2), 0, 0)
        var countdown = document.getElementById('countdown')

        timer = setInterval(function () {
          var now = new Date()
          var diff = end - now
          if (diff < 0) {
            clearInterval(timer)
            countdown.innerHTML = '<h2>下班啦!</h2>'
          } else {
            var hours = Math.floor(diff / (1000 * 60 * 60))
            var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
            var seconds = Math.floor((diff % (1000 * 60)) / 1000)
            countdown.innerHTML =
              '<h2>' +
              hours +
              ' 小时 ' +
              minutes +
              ' 分钟 ' +
              seconds +
              ' 秒</h2>'
          }
        }, 1000)
      }
评论留言
验证码
一共0条留言