countDown 倒計時(天、時、分、秒)


適用背景:
動態更新倒計時:天、小時、分鍾、秒。

倒計時函數:countDown

(vue 版)

data() {
	// vue 定義默認數據
	return {
		isStart: false,
		isEnd: false,
		d: 0,
		h: 0,
		m: 0,
		s: 0,
		timer: null,
		btnInfo: ""
	};
},

// 倒計時
countdown() {
	// 清除定時器
	clearTimeout(this.timer);
	const nowTime = new Date().getTime(),
		start = "開始時間",
		end = "結束時間";
	let startTime = new Date(start).getTime(),
		endTime = new Date(end).getTime();

	// 時間差
	let diff = startTime - nowTime;
	if (diff <= 0) {
		this.isStart = true;
		if (endTime - nowTime <= 0) {
			this.isStart = false;
			this.isEnd = true;
		} else {
			this.timer = setTimeout(this.countdown, 30000);
		}
		return;
	} else {
		// 動態計算 天、小時、分鍾、秒
		this.d = Math.floor(diff / 36e5 / 24);
		this.h = Math.floor((diff / 36e5) % 24);
		this.m = Math.floor((diff / 6e4) % 60);
		this.s = Math.floor((diff / 1000) % 60);

		// 遞歸調用
		this.timer = setTimeout(this.countdown, 1000);
	}
}

(JavaScript 版)

// 活動開始時間
const start = "2020/03/16 21:31:00";

// 倒計時函數(傳參數)
function countDown(start) {
    // 清除定時器
    !!timer && clearTimeout(timer);

    // 獲取時間毫秒數
    let begin = new Date(start).getTime(),
        now = new Date().getTime();

    // 判斷當前時間小於開始時間
    if (now < begin) {
        // 計算時間差
        let cha = begin - now;

        // 獲取 天時分秒
        let day = Math.floor(cha / 36e5 / 24),
            hour = Math.floor((cha / 36e5) % 24),
            minute = Math.floor((cha / 6e4) % 60),
            second = Math.floor((cha / 1000) % 60);

        // 拼接字符串
        let timeSting = "";
        !!day && (timeSting += day + "天");
        !!hour && (timeSting += hour + "時");
        !!minute && (timeSting += minute + "分");
        timeSting += second + "秒";

        // 打印字符串
        console.log(timeSting);

        // 調用封裝的倒計時函數
        timer = setTimeout(() => {
            countDown(activeStart);
        }, 1000);
    }
}
// 調用計時器
countDown(start);


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM