【JS】實現倒計時

技術標籤：javascript

JS setInterval定時器實現倒計時

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>時分秒倒計時</title>
    <style>
        span { 

            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: #333;
            margin-right: 5px;
            color: #fff;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    < 
span class="hour">1</span>
    <span class="min">2</span>
    <span class="sencond">3</span>
    <script>
        var hour = document.querySelector('.hour');
        var min =  document.querySelector('.min');
        var sen = document. 
querySelector('.sencond');
        var inputime = +new Date('2020-12-8 00:08:08');//引數代表使用者輸入日期，返回使用者輸入日期的時間戳（距離1970年的毫秒數）
        countdown();//先呼叫一次函式，防止重新整理後出現空白
        window.setInterval(countdown, 1000);
        function countdown() {
            var nowtime = +new Date();
            var time = (inputime - nowtime) / 1000;
            var h =  parseInt(time / 60 / 60 );
            var h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = parseInt( time / 60 % 60 );
            var m = m < 10 ? '0' + m : m;
            min.innerHTML = m;
            var s = parseInt( time % 60 ); 
            var s = s <10 ? '0' + s : s;
            sen.innerHTML = s;
            return '剩餘' + h + '時' + m + '分' + s + '秒';
        }      
    </script>
</body>
</html>

【JS】實現倒計時

【JS】實現倒計時

【js】知乎chrome控制檯字元畫招聘資訊實現

【Vue.js】實現隨機抽獎

【JS】原生實現拖拽

【js】js實現瀑布流

【js】zTree v3.5.43 API 文件

【JS】JavaScript語句和宣告之let,const

【react】實現動態表單中巢狀動態表單

【Nginx】實現負載均衡、限流、快取、黑白名單和灰度釋出，這是最全的一篇了！

【VUE】實現一個常見的路由攔截表

【JS】程式碼雨特效

【JS】JS中2個數（浮點數）計算不準確問題

【JS】---- SHA1加密演算法

【Java】實現線上翻譯案例

【JS】瞭解一下ES6新特性

【JS】對於proto、protoType、constructor的理解

【js】同步和非同步知識總結

【js】Promise.all食用指南

【js】【D】ySelect例

【 js 】建構函式返回的注意事項

【JS】實現倒計時

相關推薦