技術標籤：javascript

一：模仿倒計時

京東倒計時圖
1.程式碼展示：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模仿京東倒計時案例</title>
    <script> 

       /*  ① 核心演算法：輸入的時間減去現在的時間就是剩餘的時間，即倒計時 ，但是不能拿著時分秒
        相減，比如 05 分減去25分，結果會是負數的。
        ② 用時間戳來做。使用者輸入時間總的毫秒數減去現在時間的總的毫秒數，得到的就是剩餘時
        間的毫秒數。
        ③ 把剩餘時間總的毫秒數轉換為天、時、分、秒 （時間戳轉換為時分秒）
        轉換公式如下：
         d = parseInt(總秒數 / 60 / 60 / 24); // 計算天數
         h = parseInt(總秒數 / 60 / 60 % 24) // 計算小時
         m = parseInt(總秒數 / 60 % 60); // 計算分數
         s = parseInt(總秒數 % 60); // 計算當前秒數 */ 


        // 將倒計時的功能封裝為方法
        // 引數time用來接收使用者傳入的時間
        function countdown(time) {
            // 1. 獲取當前系統的時間
            var nowTime = +new Date();

            // 2.獲取使用者輸入的時間的毫秒數
            var inputTime = +new Date(time);

            // 3.使用者輸入時間的毫秒數減去系統當前時間的毫秒數,這樣拿到了相差的毫秒數，我要轉換為秒，這樣好計算
            var 
 times = (inputTime - nowTime) / 1000;   // times拿到的是秒

            // 4.計算得出秒數之後，就可以進行轉換了
            // var day = times / 60 / 60 / 24; // 天，因為這樣不夠精確，會存在小數點，所以轉換為整數
            var day = parseInt(times / 60 / 60 / 24);
            day = day < 10 ? '0' + day : day;
            var hours = parseInt(times / 60 / 60 % 24);
            hours = hours < 10 ? '0' + hours : hours;
            var minutes = parseInt(times / 60 % 60);
            minutes = minutes < 10 ? '0' + minutes : minutes;
            var seconds = parseInt(times % 60);
            seconds = seconds < 10 ? '0' + seconds : seconds;

            return day + '天' + hours + '時' + minutes + '分' + seconds + '秒';
        }

        var result = countdown('2021-2-14 14:00:00');
        console.log(result);

        // 獲取以下當前日期，驗證是否正確
        var nowDate = new Date();
        console.log(nowDate);
    </script>
</head>

<body>

</body>

</html>

2.執行結果：
結果展示

js模仿倒計時案例

一：模仿倒計時

js模仿倒計時案例

js實現倒計時案例

小陳學JS js內建物件 Date物件 ---倒計時案例

JS之按鈕倒計時案例

從零開始初嘗Three.js（大量案例、簡單入手）

Python利用PyExecJS庫執行JS函式的案例分析

js日期倒計時(某天，某時，第二天)

vue中使用JS實現倒計時功能

Python反反爬蟲實戰，JS解密入門案例，詳解呼叫有道翻譯

js盒子模型案例之回到頂部

用 node.js 模仿 Apache 的部分功能

js 實現倒計時效果setTimeout

js實現倒計時，定時器--完成時間倒計時

js時間倒計時js

5 JS互動特效案例實戰

JS實現倒計時功能

js傳送簡訊案例

JS Hook 攻防案例

Vue.js $refs用法案例詳解

JS 模仿紅綠燈(控制檯)

js模仿倒計時案例

一：模仿倒計時

相關推薦