大早上好瞌睡,爬起来接着写。
今天做的倒计时用了三种方法
过程和思路:
-
设置未来的时间。(使用在new Date()后面直接设置时间的方法)
-
获取当前的时间( newDate() )
-
用未来时间减去现在的时间,算出总的毫秒数
-
算出倒计时的月、日 、时、分、秒、毫秒(1s =1000ms 1分=60s 1时 =60分 1天 =24时 1月=30天 1年=12)
-
每个时间内容出现在设置的块中。
-
间歇1ms变化时间(多种方法实现倒计时 setTimeout setInterval)
法一 :setTimeout (countdown ,1);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>倒计时</title>
<script>
window.onload=function(){
var go_time=new Date("2019/7/17 00:00:00");
// countdown:倒计时
function countdown(){
var now_time=new Date();
var alltime =go_time.getTime() -now_time.getTime (); //总的时间(毫秒)
var haoscend =alltime%1000; //毫秒
//console.log(haoscend);
var scend = parseInt ((alltime/1000)%60 ) ; //秒
//console.log(scend);
var minute =parseInt((alltime/1000/60)%60 ) ; // 分钟
// console.log(minute);
var hour =parseInt((alltime/1000/60/60)%24 ) ; //小时
// console.log(hour);
var day=parseInt((alltime/1000/60/60/24)%30); //天数
// console.log(day);
var month=parseInt((alltime/1000/60/60/24/30)%12); //月
// console.log(month);
var btime=document.getElementById("block");
var time1=document.getElementById("shi_jian");
time1.innerHTML ="717倒计时:"+month+"月"+day+"天"+hour+"时"+minute +"分"+scend +"秒"+(haoscend<10 ?"00"+haoscend :haoscend <100?"0"+haoscend :haoscend );
setTimeout (countdown ,1); //不加括号
}
countdown ();
}
</script>
<style>
*{
margin:0;
padding: 0;
}
#block {
position:relative;
width:420px;
height:420px;
background: #fbbff8;
border-radius: 50%;
margin:100px auto;
}
#shi_jian {
position:absolute;
width:320px;
height:100px;
top:150px;
left:50px;
/* background: paleturquoise;*/
text-align: center;
line-height: 100px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="block">
<div id="shi_jian"></div>
</div>
</body>
</html>
法二: setInterval (function(){ },1)
setInterval (function(){
var now_time=new Date();
var alltime =go_time.getTime() -now_time.getTime (); //总的时间(毫秒)
//console.log(alltime); 1s =1000ms 1分=60s 1时 =60分 1天 =24时 1月=30天 1年=12月
var haoscend =alltime%1000; //毫秒
//console.log(haoscend);
var scend = parseInt ((alltime/1000)%60 ) ; //秒
//console.log(scend);
var minute =parseInt((alltime/1000/60)%60 ) ; // 分钟
// console.log(minute);
var hour =parseInt((alltime/1000/60/60)%24 ) ; //小时
// console.log(hour);
var day=parseInt((alltime/1000/60/60/24)%30); //天数
// console.log(day);
var month=parseInt((alltime/1000/60/60/24/30)%12); //月
// console.log(month);
var btime=document.getElementById("block");
var time1=document.getElementById("shi_jian");
time1.innerHTML ="717倒计时:"+month+"月"+day+"天"+hour+"时"+minute +"分"+scend +"秒"+(haoscend<10 ?"00"+haoscend :haoscend <100?"0"+haoscend :haoscend );
},1)
法三: window.requestAnimationFrame(countdown );
countdown ();
function countdown(){
var now_time=new Date();
var alltime =go_time.getTime() -now_time.getTime (); //总的时间(毫秒)
//console.log(alltime); 1s =1000ms 1分=60s 1时 =60分 1天 =24时 1月=30天 1年=12月
var haoscend =alltime%1000; //毫秒
var scend = parseInt ((alltime/1000)%60 ) ; //秒
var minute =parseInt((alltime/1000/60)%60 ) ; // 分钟
var hour =parseInt((alltime/1000/60/60)%24 ) ; //小时
var day=parseInt((alltime/1000/60/60/24)%30); //天数
var month=parseInt((alltime/1000/60/60/24/30)%12); //月
var btime=document.getElementById("block");
var time1=document.getElementById("shi_jian");
time1.innerHTML ="717倒计时:"+month+"月"+day+"天"+hour+"时"+minute +"分"+scend +"秒"+(haoscend<10 ?"00"+haoscend :haoscend <100?"0"+haoscend :haoscend );
window.requestAnimationFrame(countdown ); //不加括号
}