<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>timer-计时器</title>

    <style>

        div{

            width:300px;

            margin:0 auto;

            padding-top:60px;

        }

        #timer{

            font-size:30px;

            text-align:center;

        }

        #start{

            font-weight:bold;

        }

    </style>

    <script>

        var intervalId,   //setInterval的id

            pattern = /^\d$/,  //正则模式，匹配单个数值

            intervalSeconds = 1000, //调用setInterval的间隔时间，设置为 1000 毫秒，即 1 秒

            secondIncrement = 0;   //设置秒递增器起始值为 0 

        //注册页面加载事件

        window.onload = function () {

            var start = document.getElementById("start");

            var timer = document.getElementById("timer");

            function handleTimer() {

                if (!intervalId) {

                    intervalId = setInterval(function () {

                        secondIncrement++;    
　　　　　　　　　　　　　　//定义一个Date对象实例

                        var someDate = new Date("1111/1/1,0:0:0");
　　　　　　　　　　　　　　//设置秒数，当secondIncrement值超过59时，则分钟数会加1

                        someDate.setSeconds(secondIncrement);

                        var hours = someDate.getHours();

                        hours = pattern.test(hours) ? "0" + hours + ":" : hours + ":";

                        var minutes = someDate.getMinutes();

                        minutes = pattern.test(minutes) ? "0" + minutes + ":" : minutes + ":";

                        var seconds = someDate.getSeconds();

                        seconds = pattern.test(seconds) ? "0" + seconds : seconds;

                        timer.value = hours + minutes + seconds;

                    }, intervalSeconds);

                    this.innerHTML = "Pause";

                } else {

                    clearInterval(intervalId);

                    intervalId = null;

                    this.innerHTML = "Start";

                }

            }

            start.addEventListener("click", handleTimer, false);

        }

    </script>

</head>

<body>

    <div>

        <p><input type="text" id="timer" value="00:00:00"  readonly/></p>

        <button id="start">Start</button>

    </div>

</body>

</html>

timer--计时器的更多相关文章

  1. Nonove js timer 计时器

    <html> <head> <title> Nonove js timer 计时器 </title> </head> <body> ...

  2. Timer计时器

    private Timer timer; timer.schedule(new TimerTask() { @Override public void run() { if (isStopedReco ...

  3. go语言示例-Timer计时器的用法

    计时器用来定时执行任务,分享一段代码: package main import "time" import "fmt" func main() { //新建计时 ...

  4. java中Timer计时器使用

    1.新建计时器Timer对象 2.给计时器安排任务,schedule方法 3.取消计时器中分配的任务,purge方法 4.终止计时器,cancel方法 注意:如果计时器已经终止,还要给计时器安排任务, ...

  5. C#.NET 中的 Timer 计时器及 3 种使用方法

    定时器是系统常用的组件之一,程序员可以根据自己的需求定制一个定时器类型,也可以使用.net内建的定时器类型.在.net中一共为程序员提供了3种定时器: System.Windows.Forms.Tim ...

  6. 【C#/WPF】用System.Timers.Timer计时器做浮窗广告

    需求:鼠标静止一段时间后,显示浮窗广告. 思路:界面XAML写好一个专门显示浮窗广告的Canvas,先设为不可见Visibility=”Collapsed”,然后用System.Timers.Time ...

  7. JavaScript JSON timer(计时器) AJAX HTTP请求 同源策略 跨域请求

    JSON 介绍 1. JSON: JavaScript Object Notation 是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是 ...

  8. 线程 Timer TimerTask 计时器 定时任务 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  9. Java中Timer和TimerTask来实现计时器循环触发

    package xian; import java.io.BufferedReader; import java.io.FileNotFoundException; import java.io.Fi ...

  10. Linux 时钟与计时器

    对 Linux 系统来说,时钟和计时器是两个十分重要的概念.时钟反应的是绝对时间,也可认为是实时时间.计时器反应的则是相对时间,即相对于系统启动后的计时.操作系统内核需要管理运行时间(uptime)和 ...

随机推荐

  1. 使用新版Android Studio检测内存泄露和性能

    内存泄露,是Android开发者最头疼的事.可能一处小小的内存泄露,都可能是毁于千里之堤的蚁穴.  怎么才能检测内存泄露呢?网上教程非常多,不过很多都是使用Eclipse检测的, 其实1.3版本以后的 ...

  2. 页面加载后resize页面布局

    在我们写web的时候,有的时候页面加载完以后,布局位置有一些问题,手动改变窗口大小后则正常显示位置. 其实,我们手动改变窗口大小,是执行了resize方法. share一下兼容方法: coffee c ...

  3. FACADE

    1 意图:为子系统中的一组接口提供一个一直的界面,Facade模式定义了一个高层接口.这个接口使得这一子系统更加容易使用, 2 动机,便于不需要更多功能的人通过Facade 简化使用 3 适用性: . ...

  4. 用单分子测序（single-molecule sequencing）和局部敏感哈希（locality-sensitive hashing）来组装大型基因组

    Assembling large genomes with single-molecule sequencing and locality-sensitive hashing 好好读读,算法系列的好文 ...

  5. iframe 子页面获取父页面的元素并且控制样式

    父页面的代码 <div id="div5" style="position:relative;height:500px;">             ...

  6. laravel 控制器里 redirect url地址传两个参数的方法

    public function red_search() { $url=Request::all(); return redirect('search/'.$url['category'].'/'.$ ...

  7. 【python】selenium+python自动化测试环境搭建

    参考资料: http://www.cnblogs.com/fnng/archive/2013/05/29/3106515.html http://www.easonhan.info/python/20 ...

  8. Sprint2-3.0

    后续安排 第16周 周二晚7点之前将本代码上传到GITHUB. GITHUB地址:https://github.com/QueenIcey/teamwork/tree/master/eslife1 周 ...

  9. iOS7中的ViewController切换

    转自:https://onevcat.com/2013/10/vc-transition-in-ios7/ iOS 7 SDK之前的VC切换解决方案 在深入iOS 7的VC切换效果的新API实现之前, ...

  10. 贪心算法 hdu 1009

    1.因为要排序只派j[i]/f[i],不能知道f[i]和j[i]各自排序后的顺序,因此要用到结构体 2.用sort(ware,ware+n,cmp) cmp 为俩个数组的元素比较大小的布尔值 #inc ...