【06】倒计时 demo_v2 【vue写的】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>倒计时应用_v2</title> </head> <body> <div id="app"> <div>剩余时间:<span>{{remainingTime}}</span> </div> </div> </body> <script> new Vue({ el: "#app", data() { return { remainingTime: "", } }, methods: { // 倒计时 code star------------------------------ // 格式化总秒数 formatTime(sections) { var d = parseInt(sections / 60 / 60 / 24), h = parseInt(sections / 60 / 60 % 24) < 10 ? `0${parseInt(sections / 60 / 60 % 24)}` : `${parseInt(sections / 60 / 60 % 24)}`, m = parseInt(sections / 60 % 60) < 10 ? `0${parseInt(sections / 60 % 60)}` : `${parseInt(sections / 60 % 60)}`, s = parseInt(sections % 60) < 10 ? `0${parseInt(sections % 60)}` : `${parseInt(sections % 60)}`; return { d, h, m, s } }, //倒计时封装函数 startTime:开始时间,endTime:截止时间 getCountdown(startTimeStamp, endTimeStamp) { endTimeStamp && endTimeStamp.toString().length == 13 ? endTimeStamp = endTimeStamp : endTimeStamp = endTimeStamp * 1000; //时间戳设置成13位数 console.log("截止时间:" + new Date(parseInt(endTimeStamp)).toLocaleString()) setInterval((startTimeStamp) => { var startTimeStamp = Date.now(); //输出13位数时间戳 var remainingSeconds = parseInt((endTimeStamp - startTimeStamp) / 1000); //输出剩余总秒数 if (startTimeStamp < endTimeStamp) { var remainingTimeObj = this.formatTime(remainingSeconds); //获取剩余时间对象 console.log(remainingTimeObj); // 更新试图 this.remainingTime = `${remainingTimeObj.d} 天 ${remainingTimeObj.h}:${remainingTimeObj.m}:${remainingTimeObj.s}`; } else { this.remainingTime = "已过截止时间!"; console.log("已过截止时间!") } }, 1000); } // 倒计时 code end------------------------------ }, created() { this.getCountdown(Date.now(), "1739161680") }, }) </script> </html>