原生js实现计时器
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实现计时器的更多相关文章
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...
- 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 常用原生JS方法总结（兼容性写法）
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
随机推荐
- 将Factory-boy生成的复杂对象转成dict的方法
最近在做接口测试,使用Factory-boy来生成接口对象实例,接着将对象转成dict,最后通过requests发送请求. 对象转成dict,目前知道的方法就是object.__dict__ .这个方 ...
- 【JZOJ4709】【NOIP2016提高A组模拟8.17】Matrix
题目描述 输入 输出 样例输入 4 3 5 4 1 7 3 4 7 4 8 样例输出 59716 数据范围 解法 40%暴力即可: 60%依然暴力: 100%依次计算第一行和第一列对答案的贡献即可: ...
- 三、Redis操作
一.基本介绍 1.简介 Redis是由意大利人Salvatore Sanfilippo(网名:antirez)开发的一款内存高速缓存数据库.Redis全称为:Remote Dictionary Ser ...
- python中函数和方法区别，以及如何给python类动态绑定方法和属性（涉及types.MethodType()和__slots__）
网上有很多同义但不同方式的说法,下面的这个说法比较让你容易理解和接受 与类和实例无绑定关系的function都属于函数(function): 与类和实例有绑定关系的function都属于方法(meth ...
- ELK学习之jdk和jre的区别
JRE: Java Runtime EnvironmentJDK:Java Development KitJRE顾名思义是java运行时环境,包含了java虚拟机,java基础类库.是使用java语言 ...
- hdu4267 线段树
开始敲了一发线段树,觉得可以暴力一点的过,tle了.后来进行修改,发现了问题. 后来一看大神的做法,由于1<=k<=10,所以对于不同的k,有55个余,找答案的时候只要找不同的k值满足条件 ...
- bzoj1231 混乱的奶牛
Description 混乱的奶牛 [Don Piele, 2007] Farmer John的N(4 <= N <= 16)头奶牛中的每一头都有一个唯一的编号S_i (1 <= S ...
- 安装软件时候出现"无效驱动器D"
安装软件的时候,出现以下问题. 如图: 无效驱动器 原因是因为之前安装过这样的软件在H盘,后期更改没了H,所以出现了错误. 解决方案: 打开注册表,搜索软件的关键字如 vmware 删除错误路径即 ...
- 尖峰7月线上技术分享--Hadoop、MySQL
7月2号晚20:30-22:30 东大博士Dasight分享主题<大数据与Hadoop漫谈> 7月5号晚20:30-22:30 原支付宝MySQL首席DBA分享主题<MySQL ...
- SPA是什么？
认识SPA 最早单页面的应用无从知晓,在2004年,google的Gmail就使用了单页面.到了2010年,随着Backbone的问世之后,此概念才慢慢热了起来. 随着后来React.Angular. ...