秒杀倒计时写法

原生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)
        })()
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章