jQuery实现倒计时

最新推荐文章于 2024-04-27 18:27:17 发布

此去经年225

最新推荐文章于 2024-04-27 18:27:17 发布

阅读量250

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_32085647/article/details/76472618

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.min.js"></script>
<title></title>
<style>
.clock{width:200px;height:100px;margin:200px auto;}
.hour,.min,.sec{width:40px;height:30px;font-size:20px;line-height:30px;display:inline-block;text-align: center;background:#572019;color:#FFFFFF;}
span:nth-child(2),span:nth-child(4){font-size:20px;}
</style>
<script>
$(function(){
function getRTime(){
var dateFinal=new Date("2018/07/31 14:00:00"); //截止时间
var dateNow=new Date(); //获得系统当前时间
var t=dateFinal.getTime()-dateNow.getTime(); //获取差值，单位毫秒
var h=(Math.floor(t/1000/60/60%24));
var m=(Math.floor(t/1000/60%60));
var s=(Math.floor(t/1000%60));
$(".hour").text(toDouble(h));
$(".min").text(toDouble(m));
$(".sec").text(toDouble(s));
}
function toDouble(num){
if(num<10){
return "0"+num;
}else{
return ""+num;
}
}
setInterval(getRTime,1000);
})
</script>
<head>
<body>
<div class="clock">
<span class="hour">00</span>
<span>:</span>
<span class="min">00</span>
<span>:</span>
<span class="sec">00</span>
</div>
</body>
</html>