視訊直播系統原始碼,倒數計時顯示,商品秒殺倒數計時

zhibo系統開發發表於2022-06-27

視訊直播系統原始碼,倒數計時顯示,商品秒殺倒數計時

樣式:

 <style>
        body {
            background-color: gray;
        }
        
        ul {
            list-style: none;
        }
        
        ul li {
            border: 1px solid black;
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 5px;
            margin-right: 10px;
        }
        
        ul li:nth-child(1) {
            width: 150px;
        }
        
        ul li:nth-child(5) {
            margin: 0;
        }
    </style>


結構:

<ul>
        <li>開獎時間倒數計時</li>
        <li id="d"></li>
        <li id="h"></li>
        <li id="c"></li>
        <li id="s"></li>
    </ul>


行為:

```javascript
 <script>
        // 初始化時間變數
        var d = 0,
            h = 0,
            c = 0,
            s = 0;
        // 設定結束時間
        var endTime = new Date('2021-11-24 19:49:50').getTime();
        //設定定時器 dingshiqi =》 定時器
        var dingshiqi = setInterval(action, 1000);
        function action() {
            // 獲取當前時間
            var now_time = new Date().getTime();
            // 距離結束剩餘的時間    結束時間-現在時間
            var lase_time = (endTime - now_time) / 1000;
            // 判斷是否結束倒數計時
            if (lase_time > 0) {
                //計算剩餘天數
                d = parseInt(lase_time / (60 * 60 * 24));
                // 計算剩餘小時數
                h = parseInt((lase_time / (60 * 60)) % 24);
                // 計算剩餘分鐘數:
                c = parseInt((lase_time / 60) % 60);
                // 計算當前秒數
                s = parseInt(lase_time % 60);
                //設定輸出的格式:(小於10的情況,前面加0)
                d = d < 10 ? '0' + d : d;
                h = h < 10 ? '0' + h : h;
                c = c < 10 ? '0' + c : c;
                s = s < 10 ? '0' + s : s;
            } else {
                clearInterval(dingshiqi);
                d = h = c = s = '00';
            }
            // 把資料傳輸到html中
            document.getElementById('d').innerHTML = d + '天';
            document.getElementById('h').innerHTML = h + '時';
            document.getElementById('c').innerHTML = c + '分';
            document.getElementById('s').innerHTML = s + '秒';
        }
    </script>


以上就是 視訊直播系統原始碼,倒數計時顯示,商品秒殺倒數計時,更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2902916/,如需轉載,請註明出處,否則將追究法律責任。

相關文章