实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1.倒计时</title>
<style>
#times{
width: 300px;height: 200px;
background: lightblue;
margin: 0 auto;
text-align: center;
line-height: 200px;
border: 4px solid lightgreen;
border-radius: 10px;
}
#key{
width: 300px;height: 230px;
border-bottom: 120px solid lightblue;
border-left:50px solid transparent;
border-right:50px solid transparent;
margin: 0 auto;
margin-top: -230px;
}
</style>
<!-- 引入在线jQ -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var now = new Date(); // 获取当前的时间
var end = new Date(2019,1,5,00,00,00); // 设置结束的时间(年,月,日,时,分,秒)
var res = Math.floor((end - now ) /1000); // 将两个时间相减,得到毫秒 然后/1000变成秒
var go = setInterval(run,1000); // 设置定时器调用对象
console.log(go);
function run(){
if(res > 1){
res = res -1; // 每秒减1
var second = Math.floor(res % 60); // 计算秒,取余
var minite = Math.floor((res / 60) % 60); // 计算分 换算多少分,取余
var hour = Math.floor((res / 3600) % 24); // 计算时 换算多少时,取余 24小时制
var day = Math.floor(res / (3600*24)); // 计算天 换算多少天
$('#times').html('<b>'+'距离春节还剩:' + day + '天' + hour + '小时' + minite + '分' + second + '秒'+'</b>');
console.log('距离春节还剩:' + day + '天' + hour + '小时' + minite + '分' + second + '秒');
}else{
alert('倒计时结束');
return false;
}
}
</script>
</head>
<body>
<div id="times"></div>
<div id="key"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
