闲来无事,写一个简单的计时器

<!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>Elias:计时器</title>

    <style>

        div.box{

            width: 300px;

            height: 100px;

            margin: 100px auto;

            line-height: 50px;

            text-align: center;

            border: 1px solid red;

        }

        div.time{

            width: 300px;

            height: 50px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="time">

            00:00:00

        </div>

        <form>

            <button type="button" id="reset">重新开始</button>

            <button type="button" id="stop">暂停</button>

            <button type="button" id="continue">继续</button>

        </form>

    </div>

    <script>

        var oTime = document.querySelector('.time');

        var oReset = document.getElementById('reset');

        var oStop = document.querySelector('#stop');

        var oContinue = document.querySelector('#continue');

        function format(obj) {//简单封装一个格式化时间的函数

            if (obj < 10) {

                return "0" + obj;

            } else {

                return obj;

            }

        }

        var ss,s,ms,hs,timer;

        oReset.onclick = function () {

            ss = s = ms = hs = 0;

            timeRun();

            oStop.onclick = function () {

                clearInterval(timer);

            }

            oContinue.onclick = function () {

                timeRun();

            }

        }

        function timeRun() {

            clearInterval(timer);

            timer = setInterval(function () {

                ss++;

                ms = format(Math.floor(ss / 60));

                hs = format(Math.floor(ss / 3600));

                s = format(ss % 60);

                oTime.innerHTML = hs + ":" + ms + ":" + s;

            }, 1000)

        }

    </script>

</body>

</html>

原生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. Custom Window

    public class CustomWnd : System.Windows.Window { static CustomWnd() { DefaultStyleKeyProperty.Overri ...

  2. 如何让外网访问自己的本地Web服务

    目前很多网站开发者安装了IIS或者Apache等Web服务器,可以把自己电脑配置成一以路由为中心的内网服务器. 本地服务器在内网测试是绰绰有余的,但是有些项目需要演示给异地的客户验收,而又赶不及把自己 ...

  3. Java反射机制概念及应用场景

    Java的反射机制相信大家在平时的业务开发过程中应该很少使用到,但是在一些基础框架的搭建上应用非常广泛,今天简单的总结学习一下. 1. 什么是反射机制? Java反射机制是在运行状态中,对于任意一个类 ...

  4. 异常处理之IIS配置加载出错

    问题详情:  一台部署在海外服务器,在管理IIS过程中,出现问题 There was an error when trying to connect. Do you want > to rety ...

  5. ffmpeg 多个音频合并 截取 拆分

    1 多个mp3文件合并成一个mp3文件 一种方法是连接到一起 ffmpeg64.exe -i "concat:123.mp3|124.mp3" -acodec copy outpu ...

  6. BIML 101 - ETL数据清洗 系列 - BIML 快速入门教程 - 连接数据库执行SQL语句

    BIML 101 - BIML 快速入门教程 第一节 连接数据库执行SQL语句 本小节将用BIML建一个简单的可以执行的包. 新建一个biml文件,贴入下面的代码 1 <Biml xmlns=& ...

  7. git加速和只下载部分目录

    浅复制 工作要用到的.git有1.8G太大了.下载过程要好几个小时,太慢了.可以这样操作 git clone 默认会下载项目的完整历史版本,如果你只关心最新版的代码,而不关心之前的历史信息,可以使用 ...

  8. C++实验二——函数重载、函数模板、简单类的定义和实现

    一.实验过程 函数重载编程练习 实验要求:编写重载函数add(),实现对int型,double型,complex型数据的加法.在main函数中定义不同类型的数据,调用测试. 代码实现: 先是简单的体验 ...

  9. node中处理异步常用的方法，回调函数和events 模块处理异步

    // npm install -g supervisor supervisor http.js就可以实现热更新的效果 //引入http模块 var http = require('http'); va ...

  10. MailKit使用IMAP读取邮件找不到附件Attachments为空的解决方法

    今天发现有些邮件无法读取Attachments,邮件明明有附件,但使用Mailkit读取时,Attachments为空,我用的IMAP协议读取收件箱里的邮件,处理完后移动已删除: foreach (v ...