JavaScript?顯示一個(gè)倒計(jì)時(shí)廣告牌的實(shí)現(xiàn)示例

更新時(shí)間：2022年04月20日 08:36:38 作者：晚晚昨晚吃晚飯很晚睡說(shuō)晚

本文主要介紹了JavaScript?顯示一個(gè)倒計(jì)時(shí)廣告牌的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文主要介紹了JavaScript 顯示一個(gè)倒計(jì)時(shí)廣告牌的實(shí)現(xiàn)示例，分享給大家，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var date_in=prompt("請(qǐng)輸入未來(lái)的年月日:");
        var date_out=new Date(date_in);
        var future_year=date_out.getFullYear();
        var future_month=date_out.getMonth()+1;
        var future_date=date_out.getDate();
        
        var TimerID,TimerRunning;
        function array_ping(){ //定義平年的月份天數(shù)數(shù)組
            this.length=12;
            this[0]=31;this[1]=28;this[2]=31;this[3]=30;this[4]=31;this[5]=30;
            this[6]=31;this[7]=31;this[8]=30;this[9]=31;this[10]=30;this[11]=31;
        }
        function array_run(){  //定義閏年的月份天數(shù)數(shù)組
            this.length=12;
            this[0]=31;this[1]=29;this[2]=31;this[3]=30;this[4]=31;this[5]=30;
            this[6]=31;this[7]=31;this[8]=30;this[9]=31;this[10]=30;this[11]=31;
        }

        var Clock_ping=new array_ping();  //實(shí)例化自定義方法
        var Clock_run=new array_run();

        function SHTime(){
            var today=new Date();  //實(shí)例化類(lèi)
            var current_month=today.getMonth()+1;     //獲取本地月份1~12
            var current_date=today.getDate();         //獲取本地一個(gè)月中的日期值
            var current_year=today.getFullYear();     //獲取本地年份
            var Dateleft,Monthleft,Yearleft;
             if(future_year%4==0&&future_year%100!=0||future_year%400==0){
                if(future_date-current_date<0){  //如果天數(shù)為負(fù)時(shí),則加上月份對(duì)應(yīng)的天數(shù)            
                    Dateleft=Clock_run[current_month-1]-current_date+future_date;
                    //用當(dāng)前這個(gè)月的總天數(shù)減去當(dāng)前天數(shù),再加上多余的下個(gè)月的天數(shù)
                    Monthleft=future_month-current_month-1;//減一是因?yàn)樘鞌?shù)間隔不夠，月份來(lái)湊
                    if(Monthleft<0){
                        Monthleft=future_month-current_month-1+12;
                        Yearleft=future_year-current_year-1;
                    }
                    else{
                        Yearleft=future_year-current_year;
                    }
                }
                else{
                    Dateleft=future_date-current_date;
                    Monthleft=future_month-current_month;
                    Yearleft=future_year-current_year;
                }
             }
            else{
                if(future_date-current_date<0){            
                    Dateleft=Clock_run[current_month-1]-current_date+future_date;
                    Monthleft=future_month-current_month-1;
                    if(Monthleft<0){
                        Monthleft=future_month-current_month-1+12;
                        Yearleft=future_year-current_year-1;
                    }
                    else{
                        Yearleft=future_year-current_year;
                    }
                }
                else{
                    Dateleft=future_date-current_date;
                    Monthleft=future_month-current_month;
                    Yearleft=future_year-current_year;
                }
            }
            document.YMD.a.value=Yearleft;
            document.YMD.b.value=Monthleft;
            document.YMD.c.value=Dateleft;
            TimerID=setTimeout('SHTime()',1000);
            TimerRunning=true;
        }
        function STTime(){
            if(TimerRunning)
                clearTimeout(TimerID);  //取消定時(shí)操作
                var TimerRunning=false;
        }
        function DownTime(){
            STTime();SHTime();
        }
    </script>
</head>
<body bgcolor="#FFA9FF" onload="DownTime()">
    <br><br>
    <center>
        <font color="#551CBA"><h2>倒計(jì)時(shí)</h2></font>
    </center>
    <hr width=300>
    <br><br>
    <center>
        <form action="" name="YMD" method="get"> <!--get發(fā)送只有少數(shù)簡(jiǎn)短字段的小表單-->
            <label for="txt" id="txt"></label> 
            <script>
            var txt=document.getElementById("txt");
            txt.innerHTML="距離"+future_year+"年"+future_month+"月"+future_date+"日只剩下";
            </script>
            <input type="text" name="a" size=3 value="">年
            <input type="text" name="b" size=3 value="">月
            <input type="text" name="c" size=3 value="">日
        </form>
    </center>
</body>
</html>

個(gè)人覺(jué)得，難就難在這個(gè)條件判斷語(yǔ)句，怎么構(gòu)思是個(gè)問(wèn)題。
首先，我先判斷是否閏年，然后判斷天數(shù)間隔是否大于0，大于0的情況下，月份就不用減1，天數(shù)直接等于未來(lái)天數(shù)減去當(dāng)前天數(shù)；小于0的情況下，天數(shù)等于當(dāng)前月份的總天數(shù)減去當(dāng)前天數(shù)再加上未來(lái)月份的天數(shù)，再判斷月份間隔是否小于0，月份間隔小于0時(shí)：月份就要減1并加12，因?yàn)橐粋€(gè)月份輪回是12，并將年份減1；月份間隔大于0時(shí)：月份間隔直接等于未來(lái)月份減當(dāng)前月份。（天數(shù)指的是，一個(gè)月中過(guò)了幾天）

輸入的是2027/4/3，我的當(dāng)前年月日為2022/4/16

在這里插入圖片描述

第二種，計(jì)算總天數(shù)倒計(jì)時(shí)，相對(duì)來(lái)說(shuō)比較簡(jiǎn)單。我想過(guò)用總天數(shù)換算成相應(yīng)的年月日，但思想懶惰愛(ài)摸魚(yú)，做出來(lái)了一半，就沒(méi)進(jìn)行下去。我的思路大致是，循環(huán)用總天數(shù)減去年份對(duì)應(yīng)的天數(shù)，剩下天數(shù)要大于等于365或366，間隔年份++，否則循環(huán)結(jié)束。月份同理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var adiv=document.getElementById("a");
            var bdiv=document.getElementById("b");
            var cdiv=document.getElementById("c");
            var date_in=prompt("請(qǐng)輸入未來(lái)的年月日:");

            function get_time(){
                
                var date_out=new Date(date_in);//未來(lái)日期的實(shí)例化
                var date_now=new Date();       //當(dāng)前日期的實(shí)例化
                var interval=date_out.getTime()-date_now.getTime();//毫秒間隔
                var Secondleft=interval/1000;//毫秒除以1000等于總秒數(shù)
                var day=Secondleft/60/60/24;//總秒除以60等于分鐘,總分鐘除以60等于小時(shí),總小時(shí)除以24等于天數(shù)
                var hour=Secondleft%86400/60/60;//總天數(shù)多出來(lái)未過(guò)完天數(shù)的秒數(shù),即取余;
                //多出來(lái)那一天的秒數(shù)除以60等于分鐘,分鐘數(shù)再除以60即等于小時(shí)
                var min=Secondleft%86400%3600/60;//除完3600是多余小時(shí)的秒數(shù),再除以60等于分鐘
                var sec=Secondleft%60;
                
                adiv.innerHTML=date_now+"&nbsp;與";
                bdiv.innerHTML=date_out+"&nbsp;相隔";
                cdiv.innerHTML=todo(day)+"天"+todo(hour)+"時(shí)"+todo(min)+"分"+todo(sec)+"秒";
            }
            get_time();//調(diào)用函數(shù)
            setInterval(get_time,1000);
            function todo(num){
                if(num<10){
                    return '0'+Math.floor(num);
                }
                else{
                    return Math.floor(num);
                }
            }
        }
    </script>
</head>
<body style="background-color:lightblue;">
    <div id="a"></div><div id="b"></div><div id="c"></div>
</body>
</html>

輸入的是2025/4/18，我的當(dāng)前日期為2022/4/18

在這里插入圖片描述

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

您可能感興趣的文章: