可以开始、暂停、清除。

效果图：

下面贴代码：

<!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" onclick="start()">开始</button> <button type="button" onclick="stop()">暂停</button> <button type="button" onclick="Reset()">重置</button>

</div>

</body>

</html>

　　

JavaScript原生秒表、计时器的更多相关文章

  1. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery? 回归JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...

  3. 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展

    在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...

  4. JavaScript原生折叠扩展收缩菜单带缓冲动画

    JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨 <div id="div_two" style="display: none;"> &l ...

  5. [转] 有趣的JavaScript原生数组函数

    在JavaScript中,可以通过两种方式创建数组,Array构造函数和 [] 便捷方式, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typeof操作符返回‘obj ...

  6. JavaScript原生数组函数

    有趣的JavaScript原生数组函数 在JavaScript中,可以通过两种方式创建数组,构造函数和数组直接量, 其中后者为首选方法.数组对象继承自Object.prototype,对数组执行typ ...

  7. JavaScript原生对象拓展

    JavaScript原生对象拓展 在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏 ...

  8. JavaScript原生Array常用方法

    JavaScript原生Array常用方法 在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), so ...

  9. 秒表计时器以及Stopwatch

    Stopwatch:秒表计时器,用来记录程序的运行时间,通常用来测试代码在时间上的执行效率.(需要引用:System.Diagnostics.) Stopwatch sw=new Stopwatch( ...

随机推荐

  1. (网页)parseFloat在工作中遇到的错误

    parseFloat(23.23) == parseFloat(23.2299999999999).toFixed(2) 类似与以上的代码,展示没什么问题,一旦比较,看展示相等其实不相等,小数位的问题 ...

  2. 根据浏览器内核判断是web/iOS/android/ipad/iphone 来打开不同的网站或页面

    纯js,直接分享,直接使用: var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVe ...

  3. weui textarea超出字符被截断

    HTML: <div class="weui-cells weui-cells_form" style="margin-top: 0;"> < ...

  4. 最近因为突然喜欢这方面的ui设计，所以搜刮了很多我试过可用性强的界面，又可爱又实用···分享给大家咯

    最近因为突然喜欢这方面的ui设计,所以搜刮了很多我试过可用性强的界面,又可爱又实用···分享给大家咯 1.Side-Menu.Android 分类侧滑菜单,Yalantis 出品. 项目地址:http ...

  5. Spark Standalone 提交模式

    一.Client提交模式 提交命令: ./spark-submit --master spark://node1:7077 --class org.apache.spark.examples.Spar ...

  6. A problem has been detected and windows has been shut down to prevent damage to your computer.他么啥意思？看这里！【蓝屏】

    A problem has been detected and windows has been shut down to prevent damage to your computer.  检测到问 ...

  7. shell编程—变量（三）

    在shell脚本中,变量分两种,系统变量和自定义变量. 系统默认变量是系统自带的一些变量,如path为路径变量 用户自定义变量为在编写吧脚本的时候自己定义的一些变量 变量名命名规则 首个字符必须为字母 ...

  8. c/c++ const关键字

    const 在星号的右边:不可以改指针的指向,可以用指针改里面的值 int * const p; const在星号的左边:可以改指针的指向,不可以用指针改里面的值 int const *p; cons ...

  9. 2016某知名互联网公司PHP面试题及答案(续)

    1 写出mysql中,插入数据,读出数据,更新数据的语句 INSERT INTO 表名 VALUES ("",""): SELECT * FROM 表名:. U ...

  10. 联想x3650m5服务器安装windows2008R2系统

    服务器型号:联想x3650 M5 2U服务器 硬盘:一块300G硬盘 阵列:raid0 系统:windowsserver2008R2系统 安装开始时间:20180930晚上9点 客户手里有window ...