vue實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能
本文實(shí)例為大家分享了vue實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能的具體代碼,供大家參考,具體內(nèi)容如下
需求:
做一個(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í)器沒過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); }
更多關(guān)于倒計(jì)時(shí)的文章請(qǐng)查看專題:《倒計(jì)時(shí)功能》
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能
- vue實(shí)現(xiàn)列表倒計(jì)時(shí)
- Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(刷新保持狀態(tài))
- vue實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時(shí)
- Vue實(shí)現(xiàn)倒計(jì)時(shí)小功能
- vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕
- vue實(shí)現(xiàn)同時(shí)設(shè)置多個(gè)倒計(jì)時(shí)
- Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo(推薦)
相關(guān)文章
vue中如何使用xlsx讀取excel文件實(shí)例代碼
在Vue中使用xlsx庫(kù)可以幫助我們讀取和寫入Excel文件,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用xlsx讀取excel文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12在vscode 中設(shè)置 vue模板內(nèi)容的方法
這篇文章主要介紹了在vscode 中設(shè)置 vue模板內(nèi)容的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09關(guān)于vue 項(xiàng)目中瀏覽器跨域的配置問題
這篇文章主要介紹了vue 項(xiàng)目中瀏覽器跨域的配置問題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11vue3+ts項(xiàng)目之安裝eslint、prettier和sass的詳細(xì)過程
這篇文章主要介紹了vue3+ts項(xiàng)目02-安裝eslint、prettier和sass的詳細(xì)過程,在本文講解中需要注意執(zhí)行yarn format會(huì)自動(dòng)格式化css、js、html、json還有markdown代碼,需要的朋友可以參考下2023-10-10Vue動(dòng)態(tài)組件表格的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue動(dòng)態(tài)組件表格的實(shí)現(xiàn)代碼,包括框架結(jié)構(gòu)組件,文中還給大家封裝了幾個(gè)組件,有按鈕組件、圖片組件、滑動(dòng)開關(guān),結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-10-10