您现在的位置:首页 >> 前端 >> 内容

原生js实现秒表计时器功能代码教程

时间:2018/1/10 13:57:09 点击:

  核心提示:本文实例为大家分享了带有开始、暂停、清除功能的js计时器,供大家参考,具体内容如下效果图:下面贴代码:!DOCTYPE htmlhtmllang=enheadmetacharset=UTF-8titl...

本文实例为大家分享了带有开始、暂停、清除功能的js计时器,供大家参考,具体内容如下

效果图:

原生js实现秒表计时器功能代码教程

下面贴代码:

<!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>

<p

style="text-align:
 center">

  <input

type="text"

id="timetext"

value="00时00分00秒"

readonly><br>

  <button

type="button"

onclick="start()">开始</button>
 <button

type="button"

onclick="stop()">暂停</button>
 <button

type="button"

onclick="Reset()">重置</button>

</p>

</body>

</html>

Tags:原生 生J JS S实 
作者:网络 来源:吾爱编程的博客