倒计时

逻辑:

1、目标时间-当前时间(获取的是毫秒数)

2、(总的毫秒数/1000%60)向下取整=相差多少秒

3、(总的毫秒数/1000/60%60)向下取整=相差多少分

4、(总的毫秒数/1000/60/60%24)向下取整=相差多少小时

5、(总的毫秒数/1000/60/60/24)向下取整=相差多少天

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#wrap{
			width: 205px;
			height: 50px;
			overflow: hidden;
			border:1px solid #e2e2e2;
			border-right: none;
			border-radius: 10px;
		}
		#wrap div{
			float: left;
			width: 50px;
			height: 50px;
			box-shadow: -2px -2px 2px #888888 inset;
			text-align: center;
			line-height: 50px;
			border-right: 1px solid #e2e2e2;
	}
	</style>
</head>
<body>
	<div id="wrap">
	<div id="day"></div>
	<div id="hour"></div>
	<div id="minute"></div>
	<div id="second"></div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script type="text/javascript">
		var day=$('#day');
		var hour=$('#hour');
		var minute=$('#minute');
		var second=$('#second');
		var target=new Date(2017,9,1,20,0,0);
		function check(a){
			if(a<10){
				a='0'+a;
			}
			return a;
		}
		setInterval(function(){
			var now=new Date();
			var num=parseInt((target-now)/1000);
			var dayval=check(parseInt(num/60/60/24));
			var hourval=check(parseInt(num/60/60%24));
			var minuteval=check(parseInt(num/60%60));
			var secondval=check(parseInt(num%60));
			day.text(dayval);
			hour.text(hourval);
			minute.text(minuteval);
			second.text(secondval).stop().animate({top:'-50px'},400).animate({top:'50px'},400).animate({top:'0px'},400);
		},1000);
	</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值