可以开始、暂停、清除。

效果图：

下面贴代码：

<!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. Android为TV端助力 转载：Android绘图Canvas十八般武器之Shader详解及实战篇(下)

    LinearGradient 线性渐变渲染器 LinearGradient中文翻译过来就是线性渐变的意思.线性渐变通俗来讲就是给起点设置一个颜色值如#faf84d,终点设置一个颜色值如#CC423C, ...

  2. OpenVDB for Mitsuba

    https://github.com/zhoub/mitsuba-vdb

  3. 将html前端代码提取公因数（5）

    将html前端代码提取公因数(5) 注意:这是优化html代码,对于多个html代码相同的部分提取到一个模板中,只需要编写变化的html 1,利用Django提供的render方法的第三个参数的属性 ...

  4. 电脑端支付宝支付 -前端获取支付宝返回的form 以及submit 调用支付扫码页面

    前端调取支付宝支付接口(后台进行封装,没有直接调取支付宝接口),调用返回的数据中,将会有一串的form表单数据返回,我们需要将此表单在当前调用页面submit下,以跳转到支付扫码页: 支付宝返回的fo ...

  5. 喜闻乐见-Android LaunchMode

    launchMode,通俗点说,就是定义了Activity应该如何被launch的.那么这几种模式的区别以及应用场景,会有何不同呢?谷歌是基于什么原因设计这几种模式的呢?这几种模式背后的工作原理是什么 ...

  6. (后台)jxl.read.biff.BiffException: Unable to recognize OLE stream

    在excel中打开,另存成xls就可以.

  7. 有字库API方法使用一二

    有字库是全球第一中文web font(在线字体)服务平台,官网写的有点牛X 需要注册帐号才可以使用,免费字体有限制,一页字数不可以超过500 个,超过500个字体就不会为标签添加字体样式,比较坑爹! ...

  8. github仓库本地创建上传远程仓库

    1.现在githubu创建自己心意的仓库. 2.然后再本地创建文件夹 echo"#  (远程仓库的名字) >>README.md git add README.md git co ...

  9. 移动端 input样式在安卓与ios上不同的解决方案

    input{ -webkit-appearance:none; }

  10. c/c++ 标准库 map multimap元素访问

    标准库 map multimap元素访问 一,map,unordered_map下标操作 下标操作种类 功能描述 c[k] 返回关键字为k的元素:如果k不在c中,添加一个关键字为k的元素,并对其初始化 ...