js实现时分秒毫秒计时器

最新推荐文章于 2023-02-27 09:55:04 发布

anmizhan5851

最新推荐文章于 2023-02-27 09:55:04 发布

阅读量504

点赞数 1

原文链接：http://www.cnblogs.com/yesu/p/7161056.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计时器</title>
  <script>
    var hour,minute,second;//时 分 秒
    hour=minute=second=0;//初始化
    var millisecond=0;//毫秒
    var int;
    function Reset()//重置
    {
      window.clearInterval(int);
      millisecond=hour=minute=second=0;
      document.getElementById('timetext').value='00时00分00秒000毫秒';
    }
  
    function start()//开始
    {
      int=setInterval(timer,50);
    }
  
    function timer()//计时
    {
      millisecond=millisecond+50;
      if(millisecond>=1000)
      {
        millisecond=0;
        second=second+1;
      }
      if(second>=60)
      {
        second=0;
        minute=minute+1;
      }
  
      if(minute>=60)
      {
        minute=0;
        hour=hour+1;
      }
      document.getElementById('timetext').value=hour+'时'+minute+'分'+second+'秒'+millisecond+'毫秒';
  
    }
  
    function stop()//暂停
    {
      window.clearInterval(int);
    }
  </script>
</head>
<body>
<div style="text-align: center">
  <input type="text" id="timetext" value="00时00分00秒" readonly><br>
  <button type="button" οnclick="start()">开始</button> <button type="button" οnclick="stop()">暂停</button> <button type="button" οnclick="Reset()">重置</button>
</div>
</body>
</html>

　该计时器可以实现开始，暂停，重置的功能

转载于:https://www.cnblogs.com/yesu/p/7161056.html

anmizhan5851

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现时分秒毫秒计时器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计时器</title> <script> var hour,minute,second;//时分秒 hour=min...
复制链接

扫一扫