/*实现倒计时的思路:
1.统一把时间转成毫秒进行计算,会更加精准
2.用将来的时间-现在的时间=剩下的时间
3.相同代码统一封装
例如:距离放假还有180天01小时14分钟17秒*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#time {
font-size: 40px;
color: lawngreen;
text-align: center;
}
</style>
</head>
<body>
<div id="time"></div>
</body>
</html>
<script>
// 1.自定义现在的时间
var currentDate=new Date();
console.log(currentDate);
// 2.定义未来的时间
var nextDate=new Date("2018/12/09 08:17:05");
console.log(nextDate);
// 3.定义过去的时间
var preDate=new Date("2017/08/06 04:03:02");
console.log(preDate);
// 综上,new Date();可以定义现在、过去、将来的时间`
window.onload = function () {
// 1.获取需要的标签
var time = document.getElementById('time');
// 2.自定义将来的时间
var nextDate = new Date("2018/12/09");
// 3.开启定时器
setInterval(function () {
// 4.获取现在的时间
var currentDate = new Date();
// 5.获取时间戳
var currentTime = currentDate.getTime();
var nextTime = nextDate.getTime();
// 6.剩下的时间戳
var allTime = nextTime - currentTime;
// 7.把毫秒转成秒
var allSecond = parseInt(allTime / 1000);
// 8.转换
var d = size(parseInt(allSecond / 3600 / 24));
var h = size(parseInt(allSecond / 3600 % 24));
var m = size(parseInt(allSecond / 60 % 60));
var s = size(parseInt(allSecond % 60));
// 9.注入
time.innerText = "距离放假还有" + d + "天" + h + "小时" + m + "分钟" + s + "秒";
}, 1000)
function size(num) {
return num > 10 ? num : "0" + num;
}
}
</script>
放假倒计时分析思路和源代码
最新推荐文章于 2024-06-22 16:41:49 发布