JS模拟手机倒计时的制作

最新推荐文章于 2023-09-29 21:36:44 发布

麸or莘

最新推荐文章于 2023-09-29 21:36:44 发布

阅读量105

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/Y_I_M_I_l_u_c_k/article/details/123817896

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>Document</title>
</head>
<body>
  <h1 id="time">00:00:00:0</h1>
  <button id="star">开始</button>
  <button id="end">结束</button>
  <button id="zero">重置</button>
  <script>
    window.onload = function(){
      var h1 = document.getElementById("time")
      var star = document.getElementById("star")
      var end = document.getElementById("end")
      var zero = document.getElementById("zero")
      var n=0;
      star.onclick = function(){
        var time = setInterval(function(){
        var h = parseInt(n/10/60/60)
        var m = parseInt(n/10/60%60)
        var s = parseInt(n/10%60)
        var sm = n%10
        h=h>10?h:'0'+h
        m=m>10?m:'0'+m
        s=s>10?s:'0'+s
        h1.innerHTML = h+":"+m+":"+s+":"+sm
        n++
        end.onclick = function(){
          clearInterval(time)
        }
      },100)
      }
      zero.onclick = function(){
        h1.innerHTML = "00:00:00:0"
      }
    }
  </script>
</body>
</html>

成品展示