原生js写法:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.b {
width: 100px;
height: 140px;
border: 2px solid #b40000;
float: left;
margin: 10px 10px;
text-align: center;
line-height: 140px;
color: red;
font-weight: bold;
font-size: 22px;
}
</style>
</head>
<body>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<script>
var b=document.getElementsByClassName("b");
var timedao=setInterval(function(){
var timeset=new Date("2020 3/22 17:30:00:00");
var timenow=new Date();
var allhaocha=timeset.getTime()-timenow.getTime(); /*getTime() 获取当前时间到1970总毫秒数*/
var allmiaocha=parseInt(allhaocha/1000); //总毫秒数---总秒数
var haoth=allhaocha%1000; //倒计时毫秒数
var secth=allmiaocha%60; //倒计时 秒
var minth=parseInt(allmiaocha/60)%60; //倒计时 分
var hourth=parseInt(allmiaocha/(60*60))%24; //倒计时 小时
var day=parseInt(allmiaocha/(60*60*24))%30; //倒计时 天
var month=parseInt(allmiaocha/(60*60*24*30))%12; //倒计时 月
var yearth=parseInt(allmiaocha/(60*60*24*30*12))%100; //100年为1世纪
console.log(haoth)
b[0].innerHTML=yearth+"年";
b[1].innerHTML=month+"月";
b[2].innerHTML=day+"日";
b[3].innerHTML=hourth+"时";
b[4].innerHTML=minth+"分";
b[5].innerHTML=secth+"秒";
var res="";
if(haoth<10){
hao="00"+haoth;
}
else if(haoth<100 && haoth>=10 ){
hao="0"+haoth;
}
else{
hao=haoth;
}
b[6].innerHTML=hao+"秒";
},1);
</script>
</body>
</html>
vue中如何实现?
mounted() {
(function countdown(){
var timeshow=document.getElementsByClassName('daotime')
var nowtime=new Date() //当前时间
var activitytime=new Date("2020 3/20 17:30:00:00"); //活动时间
var allMillisecond=activitytime.getTime()-nowtime.getTime() //倒计时的总毫秒数
var allSecond=parseInt(allMillisecond/1000) //总秒数
var oddSecond=parseInt(allSecond%60) //秒
var oddMinute=parseInt((allSecond/60)%60) //分
var oddHour=parseInt((allSecond/60/60)%60) //时
if(oddSecond<10){
oddSecond='0'+oddSecond
}else{
oddSecond
}
if(oddMinute<10){
oddMinute='0'+oddMinute
}else{
oddMinute
}
if(oddHour<10){
oddHour='0'+oddHour
}else{
oddHour
}
timeshow[0].innerHTML=oddHour //如果在data里声明它,此处使用this.oddhour会报错,所以用innerHTML
timeshow[1].innerHTML=oddMinute
timeshow[2].innerHTML=oddSecond
requestAnimationFrame(countdown)
})()
}