https://www.cnblogs.com/sandraryan/

点击开始计时，可以计次，暂停。点了暂停可以继续计时，计次，点击重置清空。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .wrap {

            width: 90%;

            margin: 50px auto;

            background-color: #333333;

            text-align: center;

            padding: 50px 0;

        }

        .time {

            margin-bottom: 50px;

        }

        span {

            color: white;

            font-size: 100px;

        }

        .control button {

            width: 80px;

            height: 40px;

            border-radius: 7px;

            border: 1px solid #333;

            outline: none;

            font-size: 20px;

            color: white;

        }

        .control button:nth-child(1) {

            background-color: #90f62b;

        }

        .control button:nth-child(2) {

            background-color: #35b1f8;

        }

        .control button:nth-child(3) {

            background-color: #f5a123;

            display: none;

        }

        .control button:nth-child(4) {

            background-color: #f75629;

            display: none;

        }

        .time span:last-child {

            display: inline-block;

            width: 90px;

        }

        #show {

            color: white;

            font-size: 18px;

            margin: 20px;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="time">

            <span>00:</span>

            <span>00:</span>

            <span>00:</span>

            <span>000</span>

        </div>

        <div class="control">

            <button>启动</button>

            <button>复位</button>

            <button>计次</button>

            <button>暂停</button>

        </div>

        <div id="show"></div>

    </div>

    <script>

        // 获取元素

        var num = document.querySelectorAll(".time span");

        var start = document.querySelectorAll(".control button")[0];

        var reset = document.querySelectorAll(".control button")[1];

        var times = document.querySelectorAll(".control button")[2];

        var pause = document.querySelectorAll(".control button")[3];

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

        // 初始化时间值

        var hour = 0,

            minutes = 0,

            seconds = 0,

            ms = 0;

        // 创建定时器的变量

        var timer;

        // 创建时间数组

        var timeArr = [hour, minutes, seconds, ms];

        function fun() {

            // 设置定时器

            timer = setInterval(function () {

                // +=11 秒数最后一位数也会变化，+=10最后一位永远是0

                ms += 11;

                // 如果毫秒数大于0小于999，毫秒数的位置还是该毫秒数

                // 否则（大于999），毫秒数的位置替换为000，毫秒数重置为0，分钟++

                if (ms > 0 && ms < 999) {

                    num[3].innerHTML = ms;

                } else {

                    num[3].innerHTML = '000';

                    ms = 0;

                    seconds++;

                }

                // 如果秒数大于0并小于59

                if (seconds > 0 && seconds < 59) {

                    // 如果秒数小于10，秒数写为0和当前秒数（01-09）

                    if (seconds < 10) {

                        num[2].innerHTML = '0' + seconds + ':';

                    } else {

                        // 秒数大于10，秒数为当前值

                        num[2].innerHTML = seconds + ':';

                    }

                } else {

                    // 秒数超过59，重置为0，分钟++，秒数位置变成00

                    seconds = 0;

                    minutes++;

                    num[2].innerHTML = "00" + ':';

                }

                if (seconds > 59) {

                    // 如果秒数大于59，且分钟小于10，补0，分钟大于10，显示

                    if (minutes < 10) {

                        num[1].innerHTML = '0' + minutes + ':';

                    } else {

                        num[1].innerHTML = minutes + ':';

                    }

                    // 秒数大于59，分钟++ 显示分钟数

                    minutes++;

                    num[1].innerHTML = minutes + ':';

                    // 如果秒数小于59，显示00分钟

                    // 分钟变成0，小时++

                } else {

                    num[1].innerHTML = '00' + ':';

                    minutes = 0;

                    hour++;

                }

                // 如果，分钟数大于59，进入外层条件

                if (minutes > 59) {

                    // 如果小时小于10，小时处的内容为补0 + 小时数

                    if (hour < 10) {

                        num[0].innerHTML = '0' + hour + ':';

                    } else {

                        num[0].innerHTML = hour + ':';

                    }

                }

            }, 10);

        }

        // 封装一个函数

        // t作为计数器，作为每一条时间的序列号

        var t = 0;

        function counter() {

            // 用abcd获取num数组的各个下标的值

            var a = num[0].innerHTML;

            var b = num[1].innerHTML;

            var c = num[2].innerHTML;

            var d = num[3].innerHTML;

            // 函数调用，计时器++（d点一次加一条）

            t++;

            // 创建一个p元素，追加给展示区（展示每一条事件列表）

            var n = document.createElement('p');

            n.innerHTML = t + '.' + a + b + c + d;

            show.appendChild(n);

        }

        // 清除定时器

        function clear() {

            clearInterval(timer);

        }

        // 重置函数

        function over() {

            // 清楚定时器

            clearInterval(timer);

            // 把时间重置

            hour = 0;

            seconds = 0;

            minutes = 0;

            ms = 0;

            // 页面元素赋值重置

            num[0].innerHTML = '0' + hour + ':';

            num[1].innerText = '0' + minutes + ' : ';

            num[2].innerText = '0' + seconds + ' . ';

            num[3].innerText = '00' + ms;

        }

        // 开始按钮注册点击时间，隐藏开始重置按钮，计时暂停按钮出现

        // 调用函数开始运行整个计时器

        start.onclick = function () {

            start.style.display = "none";

            reset.style.display = "none";

            times.style.display = "inline-block";

            pause.style.display = "inline-block";

            fun();

        }

        // 点击停止按钮，隐藏停止计次按钮，开始重置按钮出现

        pause.onclick = function () {

            pause.style.display = "none";

            times.style.display = "none";

            start.style.display = "inline-block";

            reset.style.display = "inline-block";

            clear();

        }

        // 点击计次按钮，在展示区防放置当前时间值

        times.onclick = function () {

            counter();

        }

        // 点击重置按钮，重置页面元素，重置时间，清空页面内容

        reset.onclick = function () {

            over();

            show.innerHTML = '';

        }

    </script>

</body>

</html>

that‘s all ~~~

原生js实现计时器的更多相关文章

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  3. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  4. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  5. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  6. 使用原生JS封装一个动画函数

    最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...

  7. javascript原生js轮播图

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

  8. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  9. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

随机推荐

  1. [C#] 利用方向鍵移動 TextBox Focus

    論壇問題 版面上有 100 個 textbox,編號為 1-100,textbox 排列為 1 欄 20 個,共 5 欄,當一開打這個 form 會將在第一欄第一列第一個 textbox 的背景顏色變 ...

  2. dns-prefetch对网站速度能提升有多少？详解dns-prefetch。

    DNS解析场景 有很多大型的网站,都会用N 个CDN 域名来做图片.静态文件等资源访问.比如新浪,我们经常会看到有下列域. img1.sina.com.cn . img2.sina.com.cn .i ...

  3. LintCode_175 翻转二叉树

    题目 翻转一棵二叉树 您在真实的面试中是否遇到过这个题? Yes 样例 1 1 / \ / \ 2 3 => 3 2 / \ 4 4 和前序遍历代码很相似从叶子节点依次翻转递归到根节点C++代码 ...

  4. 【eclipse】解决：eclipse或STS运行maven工程出现Missing artifact jdk.tools:jdk.tools:jar:1.7问题

    eclipse或STS运行maven工程出现Missing artifact jdk.tools:jdk.tools:jar:1.7问题 最近项目中使用到大数据平台,代码中应用了hbase-clien ...

  5. yii常用操作数据

    yii常用操作数据.php <?php defined('YII_DEBUG') or define('YII_DEBUG', true); //当在调试模式下,应用会保留更多日志信息,如果抛出 ...

  6. iView3.x Anchor(锚点)组件 导航锚点

    iView3.x Anchor(锚点)组件 导航锚点 iview 3.x框架中新添了一个Anchor(锚点组件),用这个组件去做页面的分类导航正好合适,但是苦于官方文档太过抽象研究了一整天,才勉强可以 ...

  7. JSP Web第七章整理复习 Servlet基础知识

    P206-208 Servlet项目的创建,web.xml的配置及标签含义,相关程序 创建:new 一个Servlet类,继承自javax.servlet.http.HttpServlet; 写doG ...

  8. VS2013下设置git同步，“出现了错误。详细消息: An error was raised by libgit2. Category = Net (Error).”。

    前言: 这个错误耽误了我数个小时,终于解决,不知道为何VS官方在与github同步上面做得如此麻烦.希望能帮到大家. 出现了错误.详细消息: An error was raised by libgit ...

  9. Anaconda入门使用指南

    打算学习 Python 来做数据分析的你,是不是在开始时就遇到各种麻烦呢? 到底该装 Python2 呢还是 Python3 ? 为什么安装 Python 时总是出错? 怎么安装工具包呢? 为什么提示 ...

  10. [框架]eclipse搭建ssm框架 一 标签： eclipsetomcat框架 2017-03-25 21:28 1085人阅读 评论(

    虽然现在也做过一些项目,但是自己从头搭起来的框架几乎没有,所以这两天自己搭了一下ssm的框架,下面写一下框架的搭建过程.并且给出增删改查四条线来方便大家熟悉代码. 环境准备 maven3.2.3 ec ...