快捷導(dǎo)航

JavaScript實(shí)現(xiàn)倒計(jì)時(shí)功能2種方法實(shí)例

更新時(shí)間：2023年11月03日 10:07:38 作者：莫道一龍

很多網(wǎng)站在做活動(dòng)時(shí)會(huì)出現(xiàn)一個(gè)截止時(shí)間倒計(jì)時(shí)的提示,下面這篇文章主要給大家介紹了JavaScript實(shí)現(xiàn)倒計(jì)時(shí)功能2種方法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

封裝時(shí)間函數(shù)

代碼如下

        function getTime() {
            var t = new Date();
            var y = t.getFullYear();
            var m = t.getMonth() + 1 > 10 ? t.getMonth() + 1 : '0' + (t.getMonth() + 1);
            var d = t.getDate() > 10 ? t.getDate() : '0' + t.getDate();
            var h = t.getHours() > 10 ? t.getHours() : '0' + t.getHours();
            var mt = t.getMinutes() > 10 ? t.getMinutes() : '0' + t.getMinutes();
            var s = t.getSeconds() > 10 ? t.getSeconds() : '0' + t.getSeconds();
            return y + '-' + m + '-' + d + ' ' + h + ':' + mt + ':' + s;
        }
        console.log(getTime());

**注意：**在上方函數(shù)中，月份需要+1，并且為了美觀，通過(guò)三元表達(dá)式來(lái)給小于‘10’的月份、日期、時(shí)間加‘0’。

var m = t.getMonth() + 1 > 10 ? t.getMonth() + 1 : '0' + (t.getMonth() + 1);

實(shí)現(xiàn)倒計(jì)時(shí)

方法一

1.使用 new Date() 獲取當(dāng)前時(shí)間，使用 new 調(diào)用一個(gè)帶有參數(shù)的 Date 對(duì)象，定義結(jié)束的時(shí)間，endtime=new Date(2020/8/8)。使用 getTime() 方法獲取現(xiàn)在時(shí)和結(jié)束時(shí)距離 1970 年 1 月 1 日的毫秒數(shù)。然后，求兩個(gè)時(shí)間差。

2.把時(shí)間差轉(zhuǎn)換為天數(shù)、小時(shí)數(shù)、分鐘數(shù)和秒數(shù)顯示。主要是用%取模運(yùn)算。得到距離結(jié)束時(shí)間的毫秒數(shù)（剩余毫秒數(shù)），除以 1000 得到剩余秒數(shù)，再除以 60 得到剩余分鐘數(shù)，再除以 60 得到剩余小時(shí)數(shù)。除以 24 得到剩余天數(shù)。剩余秒數(shù) lefttime/1000 模 60 得到秒數(shù)，剩余分鐘數(shù) lefttime/(1000 * 60) 模 60 得到分鐘數(shù)，剩余小時(shí)數(shù) lefttime/(1000 * 60 * 60) 模 24 得到小時(shí)數(shù)。

代碼如下：

var showtime = function () {
    var nowtime = new Date(),  //獲取當(dāng)前時(shí)間
        endtime = new Date("2023/6/18");  //定義結(jié)束時(shí)間
    var lefttime = endtime.getTime() - nowtime.getTime(),  //距離結(jié)束時(shí)間的毫秒數(shù)
        d= Math.floor(lefttime/(1000*60*60*24)),  //計(jì)算天數(shù)
        h = Math.floor(lefttime/(1000*60*60)%24),  //計(jì)算小時(shí)數(shù)
        m= Math.floor(lefttime/(1000*60)%60),  //計(jì)算分鐘數(shù)
        s= Math.floor(lefttime/1000%60);  //計(jì)算秒數(shù)
    return d+ "天" + h+ ":" + m+ ":" + s;  //返回倒計(jì)時(shí)的字符串
}

方法二

1.同方法一

2.定義day,hour,min,sen用來(lái)定義倒計(jì)時(shí)的天、時(shí)、分、秒，然后parseInt用來(lái)將得到的值轉(zhuǎn)化為整數(shù)形式，再用得到的秒/60得到多少分再/60得到多少時(shí)再/24得到多少天。最后，hour/60/60%24：用所得的時(shí)間把大數(shù)除以24取余得到還要多少小時(shí)，分，秒同理。

代碼如下：

function getCountdown(time) {
    var newTime = +new Date();
    var futureTime = +new Date(time);
    var time = (futureTime - newTime) / 1000 //把毫秒數(shù)變成秒數(shù)
    var d = parseInt(time / 3600 / 24)// 天數(shù)
    var h = parseInt(time / 3600 % 24)// 小時(shí)
    var m = parseInt(time / 60 % 60)// 分鐘
    var s = parseInt(time % 60)//秒
    return d + '天' + h + '時(shí)' + m + '分' + s + '秒'
}

最后附上兩種倒計(jì)時(shí)完整代碼，一種為頁(yè)面打印，一種為彈窗顯示。

實(shí)時(shí)在頁(yè)面展示

代碼如下：

    <p>倒計(jì)時(shí)：<span>0</span>天<span>0</span>時(shí)<span>0</span>分<span>0</span>秒</p>
    <script>
        function showTime() {
            var spans = document.querySelectorAll('span');
            var endTime = new Date('2023-06-18 00:00:00').getTime();
            var newTime = new Date().getTime();
            var diffTime = (endTime - newTime) / 1000;
            var day = parseInt(diffTime / 60 / 60 / 24);
            var honur = parseInt(diffTime / 60 / 60 % 24);
            var min = parseInt(diffTime / 60 % 60);
            var sen = parseInt(diffTime % 60);
            spans[0].innerText = day;
            spans[1].innerText = honur;
            spans[2].innerText = min;
            spans[3].innerText = sen;
        }
        setInterval(showTime, 1000)

    </script>

用戶(hù)彈框輸入自行倒計(jì)時(shí)

代碼如下：

    <script>
        function getCountdown(time) {
            var newTime = +new Date();
            var futureTime = +new Date(time);
            var time = (futureTime - newTime) / 1000 //把毫秒數(shù)變成秒數(shù)
            var d = parseInt(time / 3600 / 24)// 天數(shù)
            var h = parseInt(time / 3600 % 24)// 小時(shí)
            var m = parseInt(time / 60 % 60)// 分鐘
            var s = parseInt(time % 60)//秒
            return d + '天' + h + '時(shí)' + m + '分' + s + '秒'
        }
        var year = prompt('年份');
        var months = prompt('月份');
        var days = prompt('日');
        var hours = prompt('時(shí)');
        var minutes = prompt('分');
        var seconds = prompt('秒');
        var futureTime = year + '-' + months + '-' + days + ' ' + hours + ':' + minutes + ':' + seconds;
        alert(getCountdown(futureTime));
    </script>

附：基于JavaScript實(shí)現(xiàn)自動(dòng)更新倒計(jì)時(shí)效果

實(shí)現(xiàn)倒計(jì)時(shí)效果需要掌握js中的兩個(gè)知識(shí)點(diǎn)：

1、setTimeout函數(shù) 每隔1秒鐘更新秒鐘時(shí)間

2、Date對(duì)象計(jì)算時(shí)間差

下面貼出元旦倒計(jì)時(shí)代碼

<!DOCTYPE html>
<html>
 <head>
 <title>example.html</title>

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="this is my page">
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <script>

 //定義計(jì)時(shí)器，每隔1秒鐘調(diào)用timer函數(shù)
 var timerCount= window.setTimeout("timer()",1000);
 function timer(){
 var date=new Date("2017","1","1","0","0","0");
 var deadlineTime=date.getTime();
 var nowDate=new Date();
 var nowTime=nowDate.getTime();
 var distTime=deadlineTime-nowTime;
 //判斷是否到達(dá)時(shí)間期限
 if(distTime>0){
 var d=Math.floor(distTime/1000/3600/24);
 var h=Math.floor(distTime/1000/3600%24);
 var m=Math.floor(distTime/1000/60%60);
 var s=Math.floor(distTime/1000%60);
 var str="距離2017年元旦還有"+d+"天"+h+"時(shí)"+m+"分"+s+"秒";
 document.getElementById("timeout").innerHTML=str;
 timerCount= window.setTimeout("timer()",1000); 
 }
 else{
 //到達(dá)時(shí)間期限的時(shí)候清楚計(jì)時(shí)器；
 window.clearTimeout(timerCount);
 alert("時(shí)間已到");
 }

 }
 </script>
 </head>

 <body>
 <p id="timeout"> </p>

</html>

總結(jié)

到此這篇關(guān)于JavaScript實(shí)現(xiàn)倒計(jì)時(shí)功能2種方法的文章就介紹到這了,更多相關(guān)JSt倒計(jì)時(shí)功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: