【JavaScript練習】利用定時器做倒計時效果

阿新 • • 發佈：2021-02-06

技術標籤：JavaScript練習 javascript 前端

【JavaScript練習】利用定時器做倒計時效果

執行結果
在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document< 
/title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            margin: 50px 100px;
        }
        
        span {
            background-color: rgba(0, 0, 0, 0.426);
            color: #fff;
            padding: 10px;
            font-weight: 
 700;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div>
        <span class="time">距離</span>
        <span class="day"></span>
        <span class="hour"></span>
        <span class="minute" 
></span>
        <span class="second"></span>
    </div>
    <script>
        var time = document.querySelector('.time');
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');

        var t = '2021-5-1 18:00';
        time.innerHTML += t;

        var inputTime = +new Date(t); //使用者輸入時間總毫秒數

        countDown();
        setInterval(countDown, 1000); //頁面剛開始有一秒鐘空白，所以要先呼叫一次返回時間函式

        function countDown() {
            var nowTime = +new Date(); //當前時間總毫秒數
            // var inputTime = +new Date(time); //使用者輸入時間總毫秒數
            var times = (inputTime - nowTime) / 1000; //剩餘時間總秒數
            var d = parseInt(times / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            day.innerHTML = d + '天';

            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h + '時';

            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m + '分';

            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s + '秒';

            // return d + ':' + h + ':' + m + ':' + s + ':';
        }

        countDown
    </script>
</body>

</html>

【JavaScript練習】利用定時器做倒計時效果

技術標籤：JavaScript練習javascript前端【JavaScript練習】利用定時器做倒計時效果

【JavaScript練習】使用者輸入一個數判斷是否是素數，並彈出返回值

技術標籤：JavaScript練習javascript前端【JavaScript練習】使用者輸入一個數判斷是否是素數，並彈出返回值

【JavaScript練習】使用者輸入任意兩個數字的任意算數運算（簡單的計算器小功能）並彈出運算後的結果。

技術標籤：JavaScript練習javascript前端【JavaScript練習】使用者輸入任意兩個數字的任意算數運算（簡單的計算器小功能）並彈出運算後的結果。

【JavaScript練習】統計字串中出現次數最多的字元

技術標籤：JavaScript練習javascript前端【JavaScript練習】統計字串中出現次數最多的字元

【JavaScript練習】陣列中某元素出現的位置和次數

技術標籤：JavaScript練習javascript前端【JavaScript練習】陣列中某元素出現的位置和次數

【JavaScript練習】求字串中某個字元出現的位置和次數

技術標籤：JavaScript練習javascript前端【JavaScript練習】求字串中某個字元出現的位置和次數

【JavaScript練習】陣列去重

技術標籤：JavaScript練習javascript前端【JavaScript練習】陣列去重 <!DOCTYPE html>

【JavaScript練習】建立留言板釋出留言

技術標籤：JavaScript練習javascript前端【JavaScript練習】建立留言板釋出留言執行結果

【JavaScript練習】表格全選及取消全選功能

技術標籤：JavaScript練習javascript前端【JavaScript練習】表格全選及取消全選功能

【JavaScript練習】封裝自己的Math物件，包括PI值和最大值最小值

技術標籤：JavaScript練習javascript前端【JavaScript練習】封裝自己的Math物件，包括PI值和最大值最小值

【JavaScript練習】函式封裝翻轉任意一個數組

技術標籤：JavaScript練習javascript前端【JavaScript練習】函式封裝翻轉任意一個數組

【JavaScript練習】求任意個數的陣列元素最大值

技術標籤：JavaScript練習javascript前端【JavaScript練習】求任意個數的陣列元素最大值

【JavaScript練習】輸入年份，輸出2月份天數

技術標籤：JavaScript練習javascript前端【JavaScript練習】輸入年份，輸出2月份天數

【JavaScript練習】函式封裝判斷閏年

技術標籤：JavaScript練習javascript前端【JavaScript練習】函式封裝判斷閏年 <!DOCTYPE html>

【JavaScript練習】模組化

模組化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

利用定時器實現倒計時

技術標籤：js功能案例javascriptcsshtml 利用定時器實現倒計時功能分析： 1.三個盒子分別裝時、分、秒；利用innerHTML放入計算出的時、分、秒 2.倒計時是不斷變化的，每隔一秒呼叫一次，用定時器自動變化：setIn

【JavaScript基礎】Js的定時器（你想看的原理也在喲）

【JavaScript基礎】Js的定時器（你想看的原理也在喲）部落格說明文章所涉及的資料來自網際網路整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯絡本人刪除，謝謝！

【Swift】Timer定時器到底準不準確？

　　在開發過程中，Timer可以說是比較常見的了，用來做一些定時性的操作。可實際過成功，Timer的時間真的準嗎？下面寫幾個程式碼來做驗證。

【C語言程式練習】利用迴圈巢狀輸出一個菱形

技術標籤：C++學習筆記C語言c語言利用迴圈巢狀輸出一個菱形 #include<stdio.h>

【MCU外設學習】基本定時器

思路： 1.參考野火文件，瞭解TIM分為基本、通用、高階，後面的TIME在前一級的基礎上加了功能