定时器插件

最新推荐文章于 2022-06-29 23:14:07 发布

置顶时光荏苒不动如山

最新推荐文章于 2022-06-29 23:14:07 发布

阅读量367

点赞数

本文链接：https://blog.csdn.net/sinat_41347367/article/details/80453412

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>

<style>
*{padding: 0;margin: 0;}

.time-wapper {
overflow: hidden;
margin:200px auto;
width: 250px;
/*height: 30px*/
}
.time-wapper span{
display: block;
float: left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-radius: 5px;
}
.time-wapper .time{
background: #000;
color: #fff;
}
.time-wapper .ry-sign{
/*padding: 0 5px;*/
width: 20px ;
font-size: 10px;
color: #000 ;
font-weight: bold;
}
#a{
width: 100px;
height: 200px;
background:#000;
}
</style>

</head>
<body>
<div id="a"></div>
<div class="time-wapper">
<span id="d" class="time"></span>

<span class="ry-sign">天</span>

<span id="h" class="time"></span>

<span class="ry-sign">时</span>

<span id="i" class="time"></span>

<span class="ry-sign">分</span>

<span id="s" class="time"></span>

<span class="ry-sign">秒</span>
</div>
<script>
/*
d: 2018, //年，默认当前年，选填
m: 5,// 月，默认当前月，选填
d: 24,// 日，默认当前日期，选填
h: 20, //小时，必填
mi: 0,//分 ,默认0 ,选填
s:0//秒，默认0，选填

sign: 时间之间的标记，true为默认，显示冒号 :
false，显示天，时，分秒
*/
countDown({
y: 2018, //年，默认当前年，选填
m: 5,// 月，默认当前月，选填
d: 28,// 日，默认当前日期，选填
h: 10, //小时，必填
mi: 3,//分 ,默认0 ,选填
},false);
function countDown(time,sign = true){

let nowTime = new Date();

time.y = time.y || nowTime.getFullYear() ;

time.m = time.m || nowTime.getMonth() + 1 ;

time.d = time.d || nowTime.getDate() ;

time.s = time.s || 0 ;

time.mi = time.mi || 0 ;

nowTime = nowTime.getTime();

let signarr= sign ? [':',':',':','']:['天','时','分','秒']

let $sign = document.getElementsByClassName('ry-sign');

$sign[0].innerHTML = signarr[0] ;

$sign[1].innerHTML = signarr[1] ;

$sign[2].innerHTML = signarr[2] ;

$sign[3].innerHTML = signarr[3] ;

let t = new Date(`${ time.y }-${ time.m }-${ time.d } ${ time.h }: ${ time.mi }: ${time.s}`).getTime() - nowTime;

let zeroize = (number) =>{ return number*1 < 10 ? '0'+number : number } //补零

let d = Math.floor(t/1000/60/60/24);//天

let h = Math.floor(t/1000/60/60%24);//时

let i = Math.floor(t/1000/60%60); //分

let s = Math.floor(t/1000%60); //秒

let $d = document.getElementById('d'),
$h = document.getElementById('h'),
$i = document.getElementById('i'),
$s = document.getElementById('s');
$d.innerHTML = t<= 0 ? '00' : zeroize( d );

$h.innerHTML = t<= 0 ? '00' : zeroize( h );

$i.innerHTML = t<= 0 ? '00': zeroize( i );

$s.innerHTML = t<= 0 ? '00' : zeroize( s );

let timer = null ;

timer = setTimeout(function(){ countDown(time,sign) }, 1000) ;

if( t <= 0 ){ clearTimeout(timer) } ;

let $time = document.getElementsByClassName('time-wapper')[0];

$time.style.lineHeight = $time.clientHeight +'px' ;
}
</script>
</body>
</html>

时光荏苒不动如山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时器插件

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt; *{padding: 0;margin: 0;} .time-wapper { overflow: hidd
复制链接

扫一扫