js封装定时器 (同一页面多处引用)

最新推荐文章于 2022-10-13 19:49:16 发布
最新推荐文章于 2022-10-13 19:49:16 发布
阅读量2.4k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sugang666/article/details/86678587
版权

demo1
 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS实现倒计时(天数,时,分,秒)</title>
 
</head>
<body>
 
<h2>剩余时间:</h2>
<div id="timer"></div>
<div id="timer1"></div>
<div id="timer2"></div>
<div id="timer3"></div>
 
 
<script language="javascript" type="text/javascript">
    function leftTimer(arg){
    var leftTime = (new Date(2019,01,11,11,11,11)) - (new Date()); //计算剩余的毫秒数
    var days = parseInt(leftTime / 1000 / 60 / 60 / 24  , 10); //计算剩余的天数
    var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
    var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
    var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
    days = checkTime(days);
    hours = checkTime(hours);
    minutes = checkTime(minutes);
    seconds = checkTime(seconds);
	var els = arg.split(",")
	//console.log(arguments)
	for(var i in els){
		document.getElementById(els[i]).innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
	}
    setTimeout(function(){
    	leftTimer(arg)
    },1000);
}
/* setInterval(function(){
		leftTimer("timer","timer1","timer2","timer3")
	},1000); */
function checkTime(i){ //将0-9的数字前面加上0，例1变为01
    if(i<10)
    {
        i =i;
    }
    return i;
}
leftTimer("timer,timer1,timer2,timer3")
</script>
</body>
</html>

demo2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS实现倒计时(天数,时,分,秒)</title>
 
</head>
<body>
 
<h2>剩余时间:</h2>
<div id="timer"></div>
<div id="timer1"></div>
<div id="timer2"></div>
<div id="timer3"></div>
 
 
<script language="javascript" type="text/javascript">
    function leftTimer(arg){
    var leftTime = (new Date(2019,01,11,11,11,11)) - (new Date()); //计算剩余的毫秒数
    var days = parseInt(leftTime / 1000 / 60 / 60 / 24  , 10); //计算剩余的天数
    var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
    var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
    var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
    days = checkTime(days);
    hours = checkTime(hours);
    minutes = checkTime(minutes);
    seconds = checkTime(seconds);
	// var els = arg.split(",")
	console.log(arguments)
	for(var i in arguments){
		document.getElementById(arguments[i]).innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
	}
    setTimeout(function(){
    	leftTimer(arg)
    },1000);
}
/* setInterval(function(){
		leftTimer("timer","timer1","timer2","timer3")
	},1000); */
function checkTime(i){ //将0-9的数字前面加上0，例1变为01
    if(i<10)
    {
        i =i;
    }
    return i;
}
leftTimer("timer",'timer1','timer2','timer3')
</script>
</body>
</html>

demo3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS实现倒计时(天数,时,分,秒)</title>
 
</head>
<body>
 
<h2>剩余时间:</h2>
<div id="timer"></div>
<div id="timer1"></div>
<div id="timer2"></div>
<div id="timer3"></div>
 
 
<script language="javascript" type="text/javascript">
    function leftTimer(arg){
    var leftTime = (new Date(2019,01,11,11,11,11)) - (new Date()); //计算剩余的毫秒数
    var days = parseInt(leftTime / 1000 / 60 / 60 / 24  , 10); //计算剩余的天数
    var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
    var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
    var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
    days = checkTime(days);
    hours = checkTime(hours);
    minutes = checkTime(minutes);
    seconds = checkTime(seconds);
	// var els = arg.split(",")
	console.log(arguments)
	for(var i in arguments){
		document.getElementById(arguments[i]).innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
	}
    // setTimeout(function(){
    // 	leftTimer(arg)
    // },1000);
}
 setInterval(function(){
		leftTimer("timer","timer1","timer2","timer3")
	},1000); 
function checkTime(i){ //将0-9的数字前面加上0，例1变为01
    if(i<10)
    {
        i =i;
    }
    return i;
}
leftTimer("timer",'timer1','timer2','timer3')
</script>
</body>
</html>

 

Xiao苏同学
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序之定时器的使用
浪子四方
04-11 2930
1 number setTimeout(function callback, number delay, any rest) 设定一个定时器。在定时到期以后执行注册的回调函数 参数 描述 function callback 回调函数 number delay 延迟的时间，函数的调用会在该延迟之后发生，单位 ms。 any rest par...
setInterval定时器封装(settimeout\requestAnimationFrame),代码抽离，浏览器切换后定时器停止执行
eadela的博客
04-27 1085
需求： 点击按钮，请求成功返回后，置灰60秒倒计时，不允许点击 碰到问题： 1、页面有个loading，在loading为true时，加载超过1秒后，计数不连贯 2、代码写到一个文件中，耦合严重 3、浏览器切换后定时器停止执行，浏览器切换tab页面后，切换回去，仍有计数，并停止 解决方法 1、在loading结束后，再开始计数 2、抽离代码，模块化 3、浏览器监听事件 document.addEventListener(‘visibilitychange’,()=>{}) 浏览器标签页被隐藏或显示的
动画原理与setInterval函数封装
weixin_42802725的博客
02-20 146
如图所示，本次想做盒子的定时移动，第一个盒子以每50ms,第二三个盒子以每10ms向左移动一个像素。 样式上需将盒子绝对定位，以便后续能改变盒子的left值使其移动。 javascript上需监听其offsetleft值，并通过left修改其位置。 注意一般情况下clearInterval都写在setInterval中，以便定时检测是否达到取消定时器的条件。 代码如下 <!DOCTYPE html> <html> <head> <meta charset=".
setInterval多组定时器函数封装传参
weixin_30588675的博客
12-21 279
昨天的例子是针对只有单个函数运行的结果，但是实际中可能会有多组函数这样同时进行，那么这个时候就要对函数进行封装传参，来实现效果了。就还拿昨天的例子来说吧，昨天写的例子实现的效果是点击按钮，让div向前移动，那么今天就扩展一下，点击按钮让div向后移动，想要实现这个效果，就必须要传参了，来看代码： css代码 <style> #box{width:50px;height:50p...
如何向 setTimeout 、 setInterval 传递参数
热门推荐
web前端开发
11-20 1万+
看如下代码：var str = 'aaa'; var num = 2; function auto(num){ alert(num); } setTimeout('auto(num)',4000); 这样写是可以正常工作的，但是如其说这是参数传递，还不如说是直接使用的全局变量。所以，这种写法是没有必要的，一般情况下更多的是用到传递局部变量作为参数。 把代码修改一下：//var str = '
js 封装定时器解决多次调用定时器叠加问题及定时器无法清除的问题
02-14
js 封装定时器解决多次调用定时器叠加问题及定时器无法清除的问题
在vue中封装方法以及多处引用该方法详解
11-20
实现目标，将公共组件或者网络请求直接在this中调用，不需要再页面引用 #例如网络请求 var _this = this; this.api.userInfo({ token: '' } #通用工具 _this.utils.showBoxFunNot("是否退出登陆", function() {
vue之封装多个组件调用同一接口的案例
11-19
背景：项目中有多个组件调用同一接口，为提高代码可维护性，需要封装公共方法 直接return 接口调用的结果 export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success...
python使用线程封装的一个简单定时器类实例
12-24
本文实例讲述了python使用线程封装的一个简单定时器类。分享给大家供大家参考。具体实现方法如下： from threading import Timer class MyTimer: def __init__(self): self._timer= None self._tm = None self....
setInterval() 参数
qa60014359的博客
01-15 1万+
突然被同事问到 setInterval的一些小问题，这里做过小记录，一些小坑，看代码 setInterval(test,1000); setInterval(test(),1000); setInterval("test()",1000); function test(){ console.log(1) } 三种不同的调用方式。 （1）setInterval(test,1000)...
JS实现计时器
HowToRemember的博客
06-22 422
网上计时器一大把,闲来无事开记事本自己也码了个.一来页面干净适合魔方竞技计时????,二来随便温故下存JS语法????. 特点 计时器原则按下空格后需松手(keyUp)开始计时,按下空格触(keyDown)到立即停止计时. 销毁本次记录撤回上次最近. 彩蛋本次成绩不计入按钮????. 几个JS小技术点 代码技术点简单,逻辑写的有点复杂没有过多优化,适合初学者研习改造. localStorage:浏览器本地缓存用于存历史最佳记录,下次打开仍有效.清除缓存后清空. sessionSt
js 封装倒计时
吴冬雪的博客
10-13 297
【代码】js 封装倒计时。
js之计时器（双向绑定，返回：天，时，分，秒）
我就叫贝塔
05-05 351
需求：投票系统，点击开始，开始正向计时
js鼠标移动到指定位置_基于"发布-订阅"的原生JS插件封装
weixin_39796116的博客
11-30 220
大家好，我是神三元。 今天我们来做一个小玩意，用原生JS封装一个动画插件。效果如下： 这个飞驰的小球看起来是不是特有灵性呢？没错，它就是用原生JS实现的。 接下来，就让我们深入细节，体会其中的奥秘。相信这个实现的过程，会比动画本身更加精彩!一、需求分析封装一个插件，将小球的DOM对象作为参数传入，使得小球在鼠标按下和放开后能够运动，在水平方向做匀减速直线运动，初速度为鼠标移开瞬间的速度，在竖直方向...
JavaScript---day07
Amanecer_的博客
08-30 236
函数返回值、获取非行间样式、函数封装与代码复用、定时器
JS学习day06--定时器与函数封装
weixin_43707498的博客
12-07 197
1、定时器 格式 延迟定时器：隔多长时间以后执行，只执行一次 var 定时器标识 = setTimeout(函数, 时间); clearTimeout(标识); 间歇定时器：每隔一段时间执行，重复执行 var 定时器标识 = setInterval(函数, 时间); clearInterval(标识); 时间为毫秒，定时器会返回一个标识，方便我们清除这个定时器 应用： ​ 1、广告 ​ 2、发送验证码（防止多次点击，可以用disabled 、 先关后开 、 自定义开关） 定时器中的
js封装时间相关函数（倒计时，时间戳，判断是否超时）
Qing_X_C的博客
02-11 852
/** * * @param {*} date1 当前时间 * @param {*} date2 未来某个时间，格式"2020-2-11 17:37:00" */ export function djs(date1, date2) { const ms = date2 - date1; const ss = ms / 1000; const days = parseInt(ss...
js封装定时器多个组件使用
最新发布
01-10
在JavaScript中，可以通过封装定时器来实现多个组件的定时功能。以下是一个简单的例子： ```javascript // 定义一个封装了定时器的组件 function TimerComponent(interval, callback) { this.interval = interval; // 定时器间隔时间 this.callback = callback; // 定时器回调函数 this.timerId = null; // 定时器Id } // 启动定时器 TimerComponent.prototype.start = function() { // 判断定时器Id是否已存在，如果存在则表示已启动过，不再重复启动 if (this.timerId) { return; } // 使用箭头函数确保回调函数内部使用正确的this对象 this.timerId = setInterval(() => { // 调用回调函数 this.callback(); }, this.interval); } // 停止定时器 TimerComponent.prototype.stop = function() { // 清除定时器Id clearInterval(this.timerId); this.timerId = null; } // 创建多个定时器组件实例 var timer1 = new TimerComponent(1000, function() { console.log("定时器1触发"); }); var timer2 = new TimerComponent(2000, function() { console.log("定时器2触发"); }); // 启动定时器 timer1.start(); timer2.start(); // 停止定时器 // timer1.stop(); // timer2.stop(); ``` 以上代码中，我们定义了一个`TimerComponent`对象，该对象包含了一个定时器的间隔时间和回调函数，并且提供了启动和停止定时器的方法。通过创建多个`TimerComponent`实例，每个实例都可以设置不同的定时器间隔和回调函数。调用`start`方法可以启动定时器，调用`stop`方法可以停止定时器。这样，我们就可以通过封装定时器来实现多个组件的定时功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值