ningyang
侠客
侠客
  • 最后登录2025-03-07
  • 发帖数11
阅读:2915回复:0

[es 6]dom秒表案例

楼主#
更多 发布于:2023-01-17 11:35

<!DOCTYPE html>

<html lang="zn">

<head>

  <meta charset="UTF-8">

  <title>秒表</title>

  <style>
        .contain{
            width: 200px;
            height: 50px;
            background: #000;
            border-radius: 20px;
            font-weight: bold;
            color: #0f0;
            text-align: center;
            font-size: 30px;
            line-height: 50px;
        }
  </style>
</head>
<body>
<div class="contain">
    <span id="Interval">10:38:00</span>
</div>  <button id='pause'>暂停</button>  
<button id='action'>开始</button>

  <script>

    //获取日期对象
    function getDate(){

      dobj=new Date();
      hour = dobj.getHours();  //时
      minute=dobj.getMinutes();  //分
      second = dobj.getSeconds();//秒
      str=hour+":"+minute+":"+second;
      dsq=document.getElementById("Interval");//获取id Interval
      dsq.innerHTML=str;
  }

    //未点击按钮前,先执行一次
    getDate();
    start();

    //开始函数

    function start(){

      sobj=setInterval(getDate,1000);  //设置定时器,一秒钟执行一次getDate()
    }

    //停止函数

    function stop(){  

      clearInterval(sobj);  //清除定时器
    }

    //关闭按钮
    c = document.getElementById("pause");
    c.onclick=function(){

      stop();
    }
    //开始按钮
    action = document.getElementById("action");
    action.onclick=function(){

      start();
    }
  </script>
</body>

</html>
游客


返回顶部

公众号

公众号