JavaScript實現時間倒計時（聖誕倒計時）

阿新 • • 發佈：2020-12-24

技術標籤：html5 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>
</head>

<style>
    .box{
        width: 520px;
        height: 80px;
        border-bottom: 2px solid pink;
        border-top: 2px solid pink;
        text-align: center;
        margin: 0 auto;
    }
    .box .hh{
        width: 100%;
        height 
: 30px;
        background-color: teal;
        line-height: 30px;
        margin-top: 1px;
        
    }
    .box span{
        display: inline-block;
        width: 40px;
        height: 40px;
        background: #f5004b;
        color: #ffffff;
        font-size: 18px;
        line-height: 40px;
        margin-top 
: 5px;
        margin-left: 5px;

    }
</style>
<body>

    <script>
        daojishi()
        setInterval(daojishi, 1000)

        function daojishi() {
            //1.獲取當前時間
            var currentTime = new Date();
            //2.目標時間
            var targetTime = new Date("2020,12,25,0:0:0");
            
                //時間沒到就一直執行，時間到了就顯示else的內容。
            if ((targetTime - currentTime) >= 0) {
                //3.時間差  預設毫秒 /1000 變成秒，取整
                var time = parseInt((targetTime - currentTime) / 1000);

                /*
                m = s/60
                h = s/60/60
                t = s/60/60/24  =s/86400
                */
                var tian = parseInt(time / 86400);//天數
                var shi = parseInt(time % 86400 / 3600);//小時數
                var fen = parseInt(time % 3600 / 60);//分鐘數
                var miao = time % 60;//秒數

                document.body.innerHTML = "<div class='box'>"+"<div class='hh'>距離平安夜：</div>" +"<span>" +fillZero(tian)+"</span>" + "天" + "<span>" +fillZero(shi) +"</span>"+ ":" +"<span>"+ fillZero(fen)+"</span>" + ":" + "<span>"+fillZero(miao)+"</span>" +"</div>";
            }else{
                document.body.innerHTML = "<div class='box'>"+"<div class='hh'>距離平安夜：</div>" +"<span>" +00+"</span>" + "天" + "<span>" + 00 +"</span>"+ ":" +"<span>"+ 00+"</span>" + ":" + "<span>"+00+"</span>" +"</div>";
                alert("聖誕快樂");
            }

        }

        function fillZero(num) {
            return num < 10 ? "0" + num : num
        }


    </script>
</body>

</html>

JavaScript實現時間倒計時（聖誕倒計時）

技術標籤：html5JavaScript前端javascript 倒計時原理：時間差 = 目標(未來)時間-當前時間

JavaScript實現煙花特效（面向物件）

本文例項為大家分享了實現煙花特效的具體程式碼，供大家參考，具體內容如下

JS與React分別實現倒計時（天時分秒）

JS方法 html部分 <div class=\"clock\"> <i></i> 天 <i></i> : <i></i>

用HTML CSS 實現簡潔美觀的時間線（歷史年表）

前幾天在B站刷到尼爾後突發奇想，就想給尼爾做一個簡單的小網站，在思考如何體現尼爾的世界觀的時候想到了使用時間線的方式，將所有時間的事件羅列起來。所以就試著做了一下，這種方式可以很直觀的表現一些歷史上發生

java實現銀行家演算法（Swing介面）

java程式碼實現了銀行家演算法，介面寫的個人認為還是較為細緻的，完整的實現了找安全序列等演算法功能，可作為參考學習銀行家演算法。

PostgreSQL實現交叉表（行列轉換）的5種方法示例

交叉表交叉表（Cross Tabulations）是一種常用的分類彙總表格。使用交叉表查詢，顯示源於表中某個欄位的彙總值，並將它們分組，其中一組列在資料表的左側，另一組列在資料表的上部。行和列的交叉處可以對資料進行多

python實現操作檔案（資料夾）

本文例項為大家分享了pyhton操作檔案的具體程式碼，供大家參考，具體內容如下

一看就會的vuex實現登入驗證（附案例）

一、vuex是啥？ Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

jQuery實現手風琴效果（蒙版）

本文例項為大家分享了jQuery實現手風琴效果的具體程式碼，供大家參考，具體內容如下

python實現五子棋遊戲（pygame版）

本文例項為大家分享了python五子棋遊戲的具體程式碼，供大家參考，具體內容如下

python3實現raspberry pi（樹莓派）4驅小車控制程式

0. 寫在前面：一兩個月前偶然得到一個樹莓派一代，發現還是挺強大的，然後就考慮著自己實現一個四驅小車。因為本身是學軟體的，所以利用軟體來控制實實在在可見的硬體一直是自己的一個夢想。所以當時也是花了很多時

微信小程式實現樹莓派（raspberry pi）小車控制

本文是基於上一篇“網頁版樹莓派小車控制程式”改造而成。主要也練習了一下微信小程式的開發。這裡簡單記錄一下主要程式碼片段。也是趟過了許多的坑，例如：微信小程式不支援完全全屏，微信小程式不能橫屏展示。所以

C++實現掃雷遊戲（控制檯版）

本文例項為大家分享了C++實現掃雷遊戲的具體程式碼，供大家參考，具體內容如下

vue實現購物車功能（商品分類）

本文例項為大家分享了vue實現購物車功能的具體程式碼，供大家參考，具體內容如下

C# 實現俄羅斯方塊（附原始碼）

概述俄羅斯方塊（Tetris）是一款由俄羅斯人阿列克謝·帕基特諾夫發明的休閒遊戲，帕基特諾夫愛玩拼圖，從拼圖遊戲裡得到靈感，設計出了俄羅斯方塊。由於上手簡單、老少皆宜，從而家喻戶曉，風靡世界。本文簡述如何通

C語言實現排雷遊戲（多檔案）

本文例項為大家分享了C語言實現排雷遊戲的具體程式碼，供大家參考，具體內容如下

C++實現俄羅斯方塊（linux版本）

本文例項為大家分享了C++實現俄羅斯方塊的具體程式碼，供大家參考，具體內容如下

vue+iviewui實現表格合併（行列合併）

效果圖：需求： 1.相同的專案要合併，相同的專案下相同塔樓要合併 2.日期動態生成（需判斷跨年跨月）

js實現深拷貝（深度克隆）

淺克隆（淺拷貝）在資料型別為引用型別的時候，當你給這個變數賦值，其實是引用這個變數在記憶體中的地址。如下：

matlab實現數值微分（diff_ctr函式）

目錄總述函式說明應用舉例函式實現總述如果已知函式表示式，可以通過diff(）函式求取各階導數解析解的方法，並得出結論，高達100階的導數也可以用MATLAB語言在幾秒鐘的時間內直接求出。