您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“vue怎么實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
需求:
做一個(gè)剩余支付時(shí)間倒計(jì)時(shí)的效果
<template> <div>剩余支付時(shí)間:{{count}}</div> </template> <script> export default { data() { return { count: '', //倒計(jì)時(shí) seconds: 864000 // 10天的秒數(shù) } }, mounted() { this.Time() //調(diào)用定時(shí)器 }, methods: { // 天 時(shí) 分 秒 格式化函數(shù) countDown() { let d = parseInt(this.seconds / (24 * 60 * 60)) d = d < 10 ? "0" + d : d let h = parseInt(this.seconds / (60 * 60) % 24); h = h < 10 ? "0" + h : h let m = parseInt(this.seconds / 60 % 60); m = m < 10 ? "0" + m : m let s = parseInt(this.seconds % 60); s = s < 10 ? "0" + s : s this.count = d + '天' + h + '時(shí)' + m + '分' + s + '秒' }, //定時(shí)器沒過(guò)1秒?yún)?shù)減1 Time() { setInterval(() => { this.seconds -= 1 this.countDown() }, 1000) }, } } </script>
時(shí)間的秒數(shù)可以根據(jù)自己的需求進(jìn)行修改
再為大家分享一段代碼:vue時(shí)分秒倒計(jì)時(shí)
countTime: function () { //獲取當(dāng)前時(shí)間 var date = new Date(); var now = date.getTime(); //設(shè)置截止時(shí)間 var endDate = new Date("2018-10-22 23:23:23"); var end = endDate.getTime(); //時(shí)間差 var leftTime = end - now; //定義變量 d,h,m,s保存倒計(jì)時(shí)的時(shí)間 if (leftTime >= 0) { d = Math.floor(leftTime / 1000 / 60 / 60 / 24); this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24); this.m = Math.floor(leftTime / 1000 / 60 % 60); this.s = Math.floor(leftTime / 1000 % 60); } console.log(this.s); //遞歸每秒調(diào)用countTime方法,顯示動(dòng)態(tài)時(shí)間效果 setTimeout(this.countTime, 1000); }
“vue怎么實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。