首页 > 代码库 > 简易倒计时
简易倒计时
实现效果图：
整体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.spans{
border-radius: 5px;
background-color: lightblue;
}
div{
position: absolute;
left: 200px;
top: 200px;
}
span{
width: 100px;
height: 100px;
display: block;
text-align: center;
line-height: 100px;
float: left;
font-size: 30px;
}
input:nth-child(1){
position: absolute;
left: 100px;
top: -100px;
}
input:nth-child(2){
position: absolute;
left: 150px;
top: -100px;
}
</style>
<body>
<div>
<input type="button" value="http://www.mamicode.com/begin">
<input type="button" value="http://www.mamicode.com/pause">
<span class="spans"></span>
<span>:</span>
<span class="spans"></span>
<span>:</span>
<span class="spans"></span>
<span>:</span>
<span class="spans"></span>
<span>:</span>
<span class="spans"></span>
</div>
<script>
var inputs=document.getElementsByTagName("input");
var spans=document.getElementsByClassName("spans");
// 13、将其封装成函数
function MyFunction(){
// 1、获取当前时间
var nowdate=new Date();
// console.log(nowdate)
// 2、2017/5/1
var enddate=new Date("2017/5/1");
// console.log(enddate)
// 3、获取当前毫秒数
var nowtime=nowdate.getTime(nowdate)
// console.log(nowtime)
// 4、获取2017/5/1的毫秒数
var endtime=enddate.getTime(nowdate)
// console.log(endtime)
// 5、当前到2017/5/1的毫秒数
var netime=endtime-nowdate;
// console.log(netime)
// 6、获取毫秒数——利用向下取整，然后取余获得剩余的毫秒数
var mseconds=Math.floor(netime%1000)
// console.log(mseconds)
// 7、获取秒数——利用向下取整，除以1000以后得到毫秒数，再取余获得剩下的秒数
var seconds=Math.floor(netime/1000%60)
// console.log(seconds)
// 8、获取分钟数——利用向下取整，除以1000以后再除以60得到秒数，在取余得到剩下的分钟数
var minutes=Math.floor(netime/1000/60%60)
// console.log(minutes)
// 9、获得小时数——利用向下取整，除以1000，再除以60，再除以60得到分钟数，最后取余得到剩下的小时数
var hours=Math.floor(netime/1000/60/60%24)
// console.log(hours)
// 10、获得天数——利用向下取整，除以1000，再除以60，再除以60，最后除以24得到剩下的天数
var days=Math.floor(netime/1000/60/60/24)
// console.log(days)
// 11、将天数、小时数、分钟数、秒数、毫秒数加到一个数组中
var arr=[days,hours,minutes,seconds,mseconds];
for(var i=0;i<arr.length;i++){
// 12、将数组中的元素添加到浏览器中
spans[i].innerHTML=bl(arr[i]);
}
}
// 若在这里不加上调用的函数，则第一次时需要反映一段时间
MyFunction();
var timer=null;
// 单击begin按钮开始
// inputs[0].onclick=function(){
// // 在开定时器前，先关上定时器——因为这样就可以使我们在连续点击开始以后，再点击关闭以后，出现无法关上的bug出现
// clearInterval(timer);
// timer=setInterval(function(){
// MyFunction();
// },1000);
// }
// 点击pause按钮暂停
inputs[1].onclick=function(){
clearInterval(timer);
}
// 倒计时
timer=setInterval(function(){
MyFunction();
},100);
// 19、给小于10的随机数前面补零
function bl(n){
return n<10?"0"+n:n;
}
</script>
</body>
</html>
简易倒计时