js 定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span id="time1"></span>
<br>
<button id="aStop">第一个停</button><button id="aBegain">第一个开</button>
<br>
<br>
<br>
<div id="time2"></div><button id="bStop">第二个停</button><button id="bBegain">第二个开</button>
</body>
<script type="text/javascript">
function Time(option){
this.father = document.getElementById(option.father);
this.allTime = option.allTime || 0;
this.hours = option.hours || 0;
this.strH = option.strH || "时";
this.mins = option.mins || 0;
this.strM = option.strM || "分";
this.seconds = option.seconds || 0;
this.strS = option.strS || "秒";
this.htmlV = null;
this.t = null;
this.timeStr = null;
this.init();
}
Time.prototype = {
init:function(){
this.mune();
this.setI();
},
mune:function(){
if(this.allTime != 0){
this.hours = Math.floor(this.allTime / (60*60));
this.mins = Math.floor(this.allTime / 60);
this.seconds = this.allTime % 60;
}
},
setI:function(){
var self = this;
this.t = setInterval(function(){
self.father.innerHTML = self.hours +self.strH + self.mins+self.strM + self.seconds +self.strS;
self.allTime = self.hours*60*60 + self.mins *60 +self.seconds;
if(self.allTime == 0){
clearInterval(self.t);
self.father.innerHTML = "时间已经过期"
return;
}
--self.seconds;
if(self.seconds < 0){
self.seconds = 59;
--self.mins;
if(self.mins < 0){
self.mins = 59;
--self.hours
if(self.hours == 0){
self.hours = 0;
}
}
}
if(self.allTime == 0){
clearInterval(self.t);
self.father.innerHTML = "计时结束";
} },1000)
}
}
window.onload = function(){
var a = null; //全局变量
a = new Time({
father:"time1",
allTime:153,
})
var time = null; //保存当前停止的时间\
var stop = false; document.getElementById("aStop").onclick = function(){
clearInterval(a.t);
stop = true;
console.log(a.allTime) //停止时,所剩的总秒数
time = a.allTime;
}
document.getElementById("aBegain").onclick = function(){
console.log(stop)
if(!stop){ //判断当前倒计时是否停止,如果没停止则不执行
return;
}
if(a.allTime <= 0){
return;
}
a = new Time({ //重新给启动定时器
father:"time1",
allTime:time,
})
stop = false;
}
/*------------a----f分割线-----b---------------*/ var b = null;
b = new Time({
father:"time2",
hours:1, //尽量传总秒数
mins:0,
seconds:2,
})
var bTime = null;
var Bstop = false;
document.getElementById("bStop").onclick = function(){
clearInterval(b.t)
Bstop = true;
bTime = b.allTime;
}
document.getElementById("bBegain").onclick = function(){
if(!Bstop){
return;
}
if(a.allTime <= 0){
return;
}
b = new Time({ //重新给启动定时器
father:"time2",
allTime:bTime,
})
Bstop = false;
}
}
</script>
</html>
js 定时器的更多相关文章
- js定时器的使用(实例讲解)
在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定 ...
- 移动Web与js定时器暂停或不准确计时的问题解决
PC 上的 Firefox.Chrome 和 Safari 等浏览器,都会自动把未激活页面中的 JavaScript 定时器(setTimeout.setInterval)间隔最小值改为 1 秒以上: ...
- js定时器 特定时间执行某段程序的例子
定时器想必大家并不陌生吧,在本文为大家详细介绍下js中是如何实现定时器的,具体原理及代码如下. 例子: $(function(){ var handler = function(){ //www.jb ...
- js定时器setInterval()与setTimeout()
js定时器setInterval()与setTimeout() 1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setT ...
- C#-WebForm JS定时器
JS定时器: 1.window.setTimeout(function(){},3000) 延迟3秒执行 2.window.setInterval(function(){},3000) 也叫重复器,每 ...
- Vue清除所有JS定时器
Vue清除所有JS定时器 在webpack + vue 的项目中如何在页面跳转的时候清除所有的定时器 JS定时器会有一个返回值(数字),通过这个返回值我们可以找到这个定时器 在vue项目中可以使用路由 ...
- js定时器关闭,js定时器停止,一次关闭所有正在运行的定时器,自定义函数clearIntervals()一次关闭所有正在运行的定时器
js定时器关闭,一次关闭所有正在运行的定时器,自定义函数clearIntervals()一次关闭所有正在运行的定时器,原理:利用数组存储定时器id,然后遍历数组,关闭定时器 附上页面的截图,代码在截图 ...
- JS定时器做物体运动
JS定时器是函数 setInterval(函数体/函数名 , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒 = 1秒 首先我们要知道用JS定时器能干什么? ...
- JS 定时器的4种写法及介绍
JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout.setInterval.setImmediate.requestAnimationFrame. 一.什么是定时 ...
- js定时器 离开当前页面任然执行的问题
今天在博客上看到有人问 js定时器-----离开当前页面原本匀速运动的div加速了,回到页面若干时间恢复匀速??? 他是js定时器控制一个盒子做旋转动画 离开页面后js还在执行 但是盒子这个dom却被 ...
随机推荐
- LVS持久连接
LVS持久连接 源地址HASH ipvs的连接模板 可以通过ipvsadm -L -c 持久连接持久客户端连接 PCC:在固定时间内将来自于同一个客户端发往VIP的所有请求统统定向至同一个RS0表示所 ...
- Hbase集群master.HMasterCommandLine: Master exiting
2016-12-15 17:01:57,473 INFO [main] impl.MetricsSystemImpl: HBase metrics system started 2016-12-15 ...
- 【poj2449】 Remmarguts' Date
http://poj.org/problem?id=2449 (题目链接) 题意 求有向图K短路. Solution A*.g(x)为当前节点到起点的步数,h(x)为当前节点到终点的最短距离(也就是估 ...
- Nginx简易配置文件(三)(文件缓存)
server { listen 80; listen 443 ssl; server_name user.17.net userapi.17.net; access_log logs/user/acc ...
- 通用PE工具箱 4.0精简优化版
通用PE工具箱 4.0精简优化版 经用过不少 WinPE 系统,都不是很满意,普遍存在篡改主页.添加广告链接至收藏夹.未经允许安装推广软件等流氓行为,还集成了诸多不常用的工具,令人头疼不已.那么今天给 ...
- WIN7 + IIS7 Service Unavailable HTTP Error 503. The service is unavailable.
在win7上开启IIS功能,进行网站发布. 但是开启IIS之后,打开默认网站都打不开,显示 Service Unavailable HTTP Error 503. The service is una ...
- awk 的使用方法
awk 的使用方法 我们知道 awk 的常用变量包括: $0 当前记录(这个变量中存放着整个行的内容) $1~$n 当前记录的第 n个字段,字段间由 FS 分隔 NF 当前记录中的字段个数,就是有多少 ...
- [Head First设计模式]生活中学设计模式——状态模式
系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...
- asp.net core 使用EF7 Code First 创建数据库,同时使用命令创建数据库
1.首先下载vs2015的Asp.Net Core(RC2)的插件工具(https://www.microsoft.com/net/core#windows)2.创建一个asp.net Core的项目 ...
- 【转载】借助GitHub托管你的项目代码
PS:自己关注博客园有2年之久了,不久前才申请注册账号.GitHub也差不多一年多了,因英语水平刚刚及格,所以去GitHub没有博客园多,也是几个月前才注册了账号,前几天休息时看到 EdisonCho ...