JavaScript?顯示一個倒計時廣告牌的實現(xiàn)示例
更新時間：2022年04月20日 08:36:38 作者：晚晚昨晚吃晚飯很晚睡說晚
本文主要介紹了JavaScript?顯示一個倒計時廣告牌的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文主要介紹了JavaScript 顯示一個倒計時廣告牌的實現(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("請輸入未來的年月日:");
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(); //實例化自定義方法
var Clock_run=new array_run();
function SHTime(){
var today=new Date(); //實例化類
var current_month=today.getMonth()+1; //獲取本地月份1~12
var current_date=today.getDate(); //獲取本地一個月中的日期值
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ù)時,則加上月份對應(yīng)的天數(shù)
Dateleft=Clock_run[current_month-1]-current_date+future_date;
//用當(dāng)前這個月的總天數(shù)減去當(dāng)前天數(shù),再加上多余的下個月的天數(shù)
Monthleft=future_month-current_month-1;//減一是因為天數(shù)間隔不夠，月份來湊
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); //取消定時操作
var TimerRunning=false;
}
function DownTime(){
STTime();SHTime();
}
</script>
</head>
<body bgcolor="#FFA9FF" onload="DownTime()">
<br><br>
<center>
<font color="#551CBA"><h2>倒計時</h2></font>
</center>
<hr width=300>
<br><br>
<center>
<form action="" name="YMD" method="get"> <!--get發(fā)送只有少數(shù)簡短字段的小表單-->
<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òu)思是個問題。
首先，我先判斷是否閏年，然后判斷天數(shù)間隔是否大于0，大于0的情況下，月份就不用減1，天數(shù)直接等于未來天數(shù)減去當(dāng)前天數(shù)；小于0的情況下，天數(shù)等于當(dāng)前月份的總天數(shù)減去當(dāng)前天數(shù)再加上未來月份的天數(shù)，再判斷月份間隔是否小于0，月份間隔小于0時：月份就要減1并加12，因為一個月份輪回是12，并將年份減1；月份間隔大于0時：月份間隔直接等于未來月份減當(dāng)前月份。（天數(shù)指的是，一個月中過了幾天）
輸入的是2027/4/3，我的當(dāng)前年月日為2022/4/16
第二種，計算總天數(shù)倒計時，相對來說比較簡單。我想過用總天數(shù)換算成相應(yīng)的年月日，但思想懶惰愛摸魚，做出來了一半，就沒進(jìn)行下去。我的思路大致是，循環(huán)用總天數(shù)減去年份對應(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("請輸入未來的年月日:");
function get_time(){
var date_out=new Date(date_in);//未來日期的實例化
var date_now=new Date(); //當(dāng)前日期的實例化
var interval=date_out.getTime()-date_now.getTime();//毫秒間隔
var Secondleft=interval/1000;//毫秒除以1000等于總秒數(shù)
var day=Secondleft/60/60/24;//總秒除以60等于分鐘,總分鐘除以60等于小時,總小時除以24等于天數(shù)
var hour=Secondleft%86400/60/60;//總天數(shù)多出來未過完天數(shù)的秒數(shù),即取余;
//多出來那一天的秒數(shù)除以60等于分鐘,分鐘數(shù)再除以60即等于小時
var min=Secondleft%86400%3600/60;//除完3600是多余小時的秒數(shù),再除以60等于分鐘
var sec=Secondleft%60;
adiv.innerHTML=date_now+" 與";
bdiv.innerHTML=date_out+" 相隔";
cdiv.innerHTML=todo(day)+"天"+todo(hour)+"時"+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 顯示一個倒計時廣告牌的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)JavaScript 倒計時廣告牌內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于npm后面的-S和-D參數(shù)舉例詳解的相關(guān)資料,文中還介紹了npm -s和-d的一些區(qū)別,對大家的學(xué)習(xí)或者工作具有一定的參考階級價值,需要的朋友可以參考下2024-01-01
JS實現(xiàn)可編輯的后臺管理菜單功能【附demo源碼下載】
這篇文章主要介紹了JS實現(xiàn)可編輯的后臺管理菜單功能,涉及javascript針對頁面元素的遍歷及動態(tài)修改相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了GoJs?圖片繪圖模板Picture使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
拖拽交換Table的列（I.E. ONLY）2010-02-02
改版了網(wǎng)上的一個js操作userdata,并根據(jù)其它網(wǎng)友的文章結(jié)合了下。希望對需要的朋友有所幫助。2007-04-04
這篇文章主要分享一個常用的javascript靜態(tài)類，筆者自己寫的,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)文字循環(huán)滾動動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)返回頂部按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
使用focus方法讓光標(biāo)默認(rèn)停留在INPUT框
讓光標(biāo)默認(rèn)停留在INPUT框中，用focus方法可以實現(xiàn)，下面有個示例代碼，需要的朋友可以參考下2014-07-07
DHTML form validation...2007-03-03