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

最新推荐文章于 2024-07-15 16:14:38 发布

Xiao苏同学

最新推荐文章于 2024-07-15 16:14:38 发布

阅读量2.5k

点赞数 1

本文链接：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>