投稿
  1. 簡單一點首頁
  2. 編程

關於javascript春節倒計時的信息

APEO • • 編程

本文目錄一覽：

還是關於JavaScript中倒計時的問題

剩餘時間保存在cookie裡面就可以：

一、頁面顯示剩餘時間的時候，先檢查cookie裡面是否有值，為空才從3599開始，否則使用cookie的數值；

二、每次剩餘時間更新時候，同時修改cookie數值

初學javascript，要求編寫一個倒計時，格式如00:00:00該怎麼實現？時間是自己設定，想設置多少秒就多少秒

我也是業餘愛好者, 以下試編寫腳本如下:

html

head

title倒計時測試/title

script language=”JavaScript”

var DifferenceHour = -1;

var DifferenceMinute = -1;

var DifferenceSecond = -1;

var Tday = new Date(2012,2,10,22,0,0,0); //倒計時時間點-年,月,日,時,分,秒,毫秒

var DAY_MS = 24 * 60 * 60 * 1000;

var HOUR_MS = 60 * 60 * 1000;

var SECOND_MS = 60 * 1000;

var MS = 1000;

function formatstr(value)

{

return (value9)?”0″+value:value;

}

function clock()

{

var time = new Date();

if(Tday.getTime()time.getTime())

{

alert(“當前倒計時已終止!”);

return;

};

var nowtime = time.toLocaleString();

var totime = Tday.toLocaleString();

var Diffms = Tday.getTime() – time.getTime(); //毫秒差

DifferenceHour = Math.floor(Diffms / DAY_MS); //轉換成小時

Diffms -= DifferenceHour * DAY_MS;

DifferenceMinute = Math.floor(Diffms / HOUR_MS); //轉換成分鐘

Diffms -= DifferenceMinute * HOUR_MS;

DifferenceSecond = Math.floor(Diffms / SECOND_MS); //轉換成秒

Diffms -= DifferenceSecond * SECOND_MS;

var dSecs = Math.floor(Diffms / MS); //轉換成毫秒

var havetime = formatstr(DifferenceMinute)+” : “+formatstr(DifferenceSecond)+” : “+formatstr(dSecs);

document.formnow.totime.value = totime;

document.formnow.nowtime.value = nowtime;

document.formnow.havetime.value = havetime;

setTimeout(“clock()”,1000);

}

/script

/head

!–BODY裡面的ONLOAD注意–

body onload=”clock();return true” text=”red”

!–實現顯示–

form name=”formnow”

!–input name=”dd” type=”text” style=”border:0;” size=2

天–

設定時間:

input name=”totime” type=”text” style=”border:0;” size=25 /

br /

當前時間:

input name=”nowtime” type=”text” style=”border:0;” size=25 /

br /br /

倒計時時間:

input name=”havetime” type=”text” style=”border:0;” size=25 /

br /

/form

求JS倒計時程序(高分)

倒計時生成器JS腳本

說明: 用來生成倒計時JS代碼的腳本

效果: 點這裡在新窗口中看效果！

代碼: 要完成此效果需要兩個步驟

第一步：把如下代碼加入到head區域中

SCRIPT language=javascript

!–

function generate(form){

for(var q=0;q12;q++){

if(document.me.m.options[document.me.m.selectedIndex].value==q){

var m2=q+1

}

var txt=’!– 要完成此效果需要三個步驟:\r\n\r\n’

+’ 1. 將第一部分粘貼到HTML的HEAD區\r\n’

+’ 2. 將OnLoad事件加入BODY標籤內\r\n’

+’ 3. 將最後一部分代碼加入BODY區 –\r\n\r\n’

+’!– 第一步: 將如下代碼加入到HEAD區域中–\r\n\r\n’

+’HEAD\r\n\r\nSCRIPT LANGUAGE=”JavaScript”\r\n\r\n’

+’!– Begin\r\n’

+’var Temp2;\n’

+’var timerID = null;\n’

+’var timerRunning = false;\n’

+’function arry() {\n’

+’this.length = 12;\n’

+’this[0] = 31;\n’

+’this[1] = 28;\n’

+’this[2] = 31;\n’

+’this[3] = 30;\n’

+’this[4] = 31;\n’

+’this[5] = 30;\n’

+’this[6] = 31;\n’

+’this[7] = 31;\n’

+’this[8] = 30;\n’

+’this[9] = 31;\n’

+’this[10] = 30;\n’

+’this[11] = 31;\n’

+’}\n’

+’var date = new arry();\n’

+’\n’

+’function stopclock() {\n’

+’if(timerRunning)\n’

+’clearTimeout(timerID);\n’

+’timerRunning = false;\n’

+’}\n’

+’\n’

+’function startclock() {\n’

+’stopclock();\n’

+’showtime();\n’

+’}\n’

+’\n’

+’function showtime() {\n’

+’now = new Date();\n’

+’var CurMonth = now.getMonth();\n’

+’var CurDate = now.getDate();\n’

+’var CurYear = now.getFullYear();\n’

+’now = null;\n’

+’if (‘+document.me.d.options[document.me.d.selectedIndex].value+’CurDate) {\n’

+’CurDate -= date[CurMonth]; CurMonth++;\n’

+’}\n’

+’if (‘+document.me.m.options[document.me.m.selectedIndex].value+’ CurMonth) {\n’

+’CurMonth -= 12; CurYear++;\n’

+’}\n’

+’\n’

+’var Yearleft = ‘

+document.me.y.options[document.me.y.selectedIndex].value+’ – CurYear;\n’

+’var Monthleft = ‘

+document.me.m.options[document.me.m.selectedIndex].value+’ – CurMonth;\n’

+’var Dateleft = ‘

+document.me.d.options[document.me.d.selectedIndex].value+’ – CurDate;\n’

+’\n’

+’document.dateform.a.value = Yearleft;\n’

+’document.dateform.b.value = Monthleft;\n’

+’document.dateform.c.value = Dateleft;\n’

+’\n’

+’timerID = setTimeout(“showtime()”,1000);\n’

+’timerRunning = true;\n’

+’}\n’

+’/\/ End –\r\n\/script\r\n’

+’\/H’+’EAD\r\n\r\n’

+’!– 第二步：把OnLoad事件加在BODY標記里 –\r\n\r\n’

+’BO’+’DY Onload=”startclock()”\r\n\r\n’

+’!– 第三步：把如下代碼加入到BODY區域中 –\r\n\r\n’

+’form name=dateform距離’

+m2+’/’+document.me.d.options[document.me.d.selectedIndex].value+’/’

+document.me.y.options[document.me.y.selectedIndex].value

+’還有\n’

+’input type=text name=a size=2 value=””年\n’

+’input type=text name=b size=2 value=””月\n’

+’input type=text name=c size=2 value=””天\n’

+’/fo’+’rm\r\n\r\n’

+”+’!– 代碼長度: 1.95 KB –‘+”

;}document.mail.source.value=txt;document.mail.source2.value=txt;}

//–

/SCRIPT

第二步：把如下代碼加入到body區域中

div align=”center”

table border=5 bordercolor=#000000 borderlight=green

tr

td align=centerfont size=”4″ color=”#CCCC00″ face=”楷體_GB2312″

倒計時JS代碼生成器/font

/td

/tr

tr

td align=center

form name=me

p

select name=m size=1

option value=0January /option

option value=1February /option

option value=2March /option

option value=3April /option

option value=4May /option

option value=5June /option

option value=6July /option

option value=7August /option

option value=8September /option

option value=9October /option

option value=10November /option

option value=11December /option

/select

select name=d size=1

option value=11 /option

option value=22 /option

option value=33 /option

option value=44 /option

option value=55 /option

option value=66 /option

option value=77 /option

option value=88 /option

option value=99 /option

option value=1010 /option

option value=1111 /option

option value=1212 /option

option value=1313 /option

option value=1414 /option

option value=1515 /option

option value=1616 /option

option value=1717 /option

option value=1818 /option

option value=1919 /option

option value=2020 /option

option value=2121 /option

option value=2222 /option

option value=2323 /option

option value=2424 /option

option value=2525 /option

option value=2626 /option

option value=2727 /option

option value=2828 /option

option value=2929 /option

option value=3030 /option

option value=3131 /option

/select

select name=y size=1

option value=19991999 /option

option value=20002000 /option

option value=20012001 /option

option value=20022002 /option

option value=20032003 /option

option value=20042004 /option

option value=20052005 /option

option value=20062006 /option

option value=20072007 /option

option value=20082008 /option

option value=20092009 /option

/selectbr

input type=button onclick=generate() value=生成代碼 class=yk9

p/p

/form

form name=mail

input type=hidden name=scriptname value=”Countdown Creator”

input type=hidden name=source2 value

table bgcolor=dedfdf border=1 cellpadding=1 width=396

tr

td align=center height=218

textarea name=source rows=12 cols=55 class=yk9

/textarea

brbr/td

td/td

/tr

/table

/form

/td

/tr

/table

/div

參考資料：

誰能給我一個倒計時的代碼啊？

第一種：精確到秒的javascript倒計時代碼

HTML代碼:

form name=”form1″

div align=”center” align=”center”

center離2010年還有:br

input type=”textarea” name=”left” size=”35″ style=”text-align: center”

/center

/div

/form

script LANGUAGE=”javascript”

startclock()

var timerID = null;

var timerRunning = false;

function showtime() {

Today = new Date();

var NowHour = Today.getHours();

var NowMinute = Today.getMinutes();

var NowMonth = Today.getMonth();

var NowDate = Today.getDate();

var NowYear = Today.getYear();

var NowSecond = Today.getSeconds();

if (NowYear 2000)

NowYear=1900+NowYear;

Today = null;

Hourleft = 23 – NowHour

Minuteleft = 59 – NowMinute

Secondleft = 59 – NowSecond

Yearleft = 2009 – NowYear

Monthleft = 12 – NowMonth – 1

Dateleft = 31 – NowDate

if (Secondleft0)

{

Secondleft=60+Secondleft;

Minuteleft=Minuteleft-1;

}

if (Minuteleft0)

{

Minuteleft=60+Minuteleft;

Hourleft=Hourleft-1;

}

if (Hourleft0)

{

Hourleft=24+Hourleft;

Dateleft=Dateleft-1;

}

if (Dateleft0)

{

Dateleft=31+Dateleft;

Monthleft=Monthleft-1;

}

if (Monthleft0)

{

Monthleft=12+Monthleft;

Yearleft=Yearleft-1;

}

Temp=Yearleft+’年, ‘+Monthleft+’月, ‘+Dateleft+’天, ‘+Hourleft+’小時, ‘+Minuteleft+’分, ‘+Secondleft+’秒’

document.form1.left.value=Temp;

timerID = setTimeout(“showtime()”,1000);

timerRunning = true;

}

var timerID = null;

var timerRunning = false;

function stopclock () {

if(timerRunning)

clearTimeout(timerID);

timerRunning = false;

}

function startclock () {

stopclock();

showtime();

}

// —

/script

第二種：某某運動會

HTML代碼:

!–倒計時Javascript begin–

script language=”JavaScript”

!–

function DigitalTime1()

{

var deadline= new Date(“08/13/2007”) //開幕倒計時

var symbol=”8月13日”

var now = new Date()

var diff = -480 – now.getTimezoneOffset() //是北京時間和當地時間的時間差

var leave = (deadline.getTime() – now.getTime()) + diff*60000

var day = Math.floor(leave / (1000 * 60 * 60 * 24))

var hour = Math.floor(leave / (1000*3600)) – (day * 24)

var minute = Math.floor(leave / (1000*60)) – (day * 24 *60) – (hour * 60)

var second = Math.floor(leave / (1000)) – (day * 24 *60*60) – (hour * 60 * 60) – (minute*60)

var deadline_2= new Date(“08/13/2004”) //開幕後計時

var symbol_2=”8月13日”

var now_2 = new Date()

var diff_2 = -480 – now.getTimezoneOffset() //是北京時間和當地時間的時間差

var leave_2 = (now_2.getTime() – deadline_2.getTime()) + diff_2*60000

var day_2 = Math.floor(leave_2 / (1000 * 60 * 60 * 24))

var hour_2 = Math.floor(leave_2 / (1000*3600)) – (day_2 * 24)

var minute_2 = Math.floor(leave_2 / (1000*60)) – (day_2 * 24 *60) – (hour_2 * 60)

var second_2 = Math.floor(leave_2 / (1000)) – (day_2 * 24 *60*60) – (hour_2 * 60 * 60) – (minute_2*60)

day=day+1;

day_2=day_2+1;

if (day0) //還未開幕

{

//LiveClock1.innerHTML = “現在”+symbol+”天”

LiveClock1.innerHTML = “font

setTimeout(“DigitalTime1()”,1000)

}

if (day0) //已經開幕

{

//LiveClock1.innerHTML = “現在離”+symbol+”還有”+day+”天”+hour+”小時”+minute+”分”+second +”秒”

LiveClock1.innerHTML = “font

setTimeout(“DigitalTime1()”,1000)

}

if (day==0) //正在開幕

{

//LiveClock1.innerHTML = “現在”+symbol+”天”

LiveClock1.innerHTML = “font

setTimeout(“DigitalTime1()”,1000)

}

if (day0 day_219) //某某運動會結束

{

//LiveClock1.innerHTML = “現在離”+symbol+”還有”+day+”天”+hour+”小時”+minute+”分”+second +”秒”

LiveClock1.innerHTML = “font

setTimeout(“DigitalTime1()”,1000)

}

}

// —

/script

!–倒計時Javascript end–

body onload=DigitalTime1()

div id= LiveClock1/div

/body 第三種：小時倒計時

HTML代碼:

SCRIPT LANGUAGE=”JavaScript”

!–

var maxtime = 60*60 //一個小時，按秒計算，自己調整!

function CountDown(){

if(maxtime=0){

minutes = Math.floor(maxtime/60);

seconds = Math.floor(maxtime%60);

msg = “距離結束還有”+minutes+”分”+seconds+”秒”;

document.all[“timer”].innerHTML=msg;

if(maxtime == 5*60) alert(‘注意，還有5分鐘!’);

–maxtime;

}

else{

clearInterval(timer);

alert(“時間到，結束!”);

}

}

timer = setInterval(“CountDown()”,1000);

//–

/SCRIPT

div id=”timer” style=”color:red”/div

第四種：最簡倒計時

HTML代碼:

Script Language=”JavaScript”

!– Begin

var timedate= new Date(“January 14,2006”);

var times=”研究生考試”;

var now = new Date();

var date = timedate.getTime() – now.getTime();

var time = Math.floor(date / (1000 * 60 * 60 * 24));

if (time = 0) ;

document.write(“lifont color=#DEDBDE現在離2006年”+times+”還有: font color=#ffffffb”+time +”/b/font 天/font/li”);

// End —

/Script

第五種：最簡倒計時二

HTML代碼:

script language=”JavaScript” type=”text/javascript”

function djs(){

var urodz= new Date(“11/12/2008”);　

var now = new Date();

var num

var ile = urodz.getTime() – now.getTime();

var dni = Math.floor(ile / (1000 * 60 * 60 * 24));

if (dni 1)

num=dni+1

else if (dni == 1)　num=2　

else if (dni == 0)　num=1

else num=0　

document.write(num)

}

/script

距某某開幕式還有 [script language=”JavaScript” type=”text/javascript”djs()/script] 天

第五個：Javascript倒計時器 – 採用系統時間自校驗

這次利用系統時間自校驗倒計時, 無需手工調校使得倒計時更為精確, 代碼及詳細注釋如下:

span id=”clock”00:01:11:00/span

input id=”startB” type=”button” value=”start countdown!” onclick=”run()”

input id=”endB” type=”button” value=”stop countdown!” onclick=”stop()”

br

input id=”diff” type=”text”

input id=”next” type=”text”

script language=”Javascript”

/* This notice must be untouched at all times.

countdown.js v. 1.0

The latest version is available at

Copyright (c) 2004 Xinyi.Chen. All rights reserved.

Created 7/30/2004 by Xinyi.Chen.

Web:

E-Mail: chenxinyi1978@hotmail.com

Last modified: 7/30/2004

This program is free software;

you can redistribute it and/or modify it under the terms of the

GNU General Public License as published by the Free Software Foundation;

See the GNU General Public License

at for more details.

*/

var normalelapse = 100;

var nextelapse = normalelapse;

var counter;

var startTime;

var start = clock.innerText;

var finish = “00:00:00:00”;

var timer = null;

// 開始運行

function run() {

startB.disabled = true;

endB.disabled = false;

counter = 0;

// 初始化開始時間

startTime = new Date().valueOf();

// nextelapse是定時時間, 初始時為100毫秒

// 注意setInterval函數: 時間逝去nextelapse(毫秒)後, onTimer才開始執行

timer = window.setInterval(“onTimer()”, nextelapse);

}

// 停止運行

function stop() {

startB.disabled = false;

endB.disabled = true;

window.clearTimeout(timer);

}

window.onload = function() {

endB.disabled = true;

}

// 倒計時函數

function onTimer()

{

if (start == finish)

{

window.clearInterval(timer);

alert(“time is up!”);

return;

}

var hms = new String(start).split(“:”);

var ms = new Number(hms[3]);

var s = new Number(hms[2]);

var m = new Number(hms[1]);

var h = new Number(hms[0]);

ms -= 10;

if (ms 0)

{

ms = 90;

s -= 1;

if (s 0)

{

s = 59;

m -= 1;

}

if (m 0)

{

m = 59;

h -= 1;

}

}

var ms = ms 10 ? (“0” + ms) : ms;

var ss = s 10 ? (“0” + s) : s;

var sm = m 10 ? (“0” + m) : m;

var sh = h 10 ? (“0” + h) : h;

start = sh + “:” + sm + “:” + ss + “:” + ms;

clock.innerText = start;

// 清除上一次的定時器

window.clearInterval(timer);

// 自校驗系統時間得到時間差, 並由此得到下次所啟動的新定時器的時間nextelapse

counter++;

var counterSecs = counter * 100;

var elapseSecs = new Date().valueOf() – startTime;

var diffSecs = counterSecs – elapseSecs;

nextelapse = normalelapse + diffSecs;

diff.value = counterSecs + “-” + elapseSecs + “=” + diffSecs;

next.value = “nextelapse = ” + nextelapse;

if (nextelapse 0) nextelapse = 0;

// 啟動新的定時器

timer = window.setInterval(“onTimer()”, nextelapse);

}

/script

怎樣用javascript寫倒計時

form name=”form1″ action=”” 

div align=”center” align=”middle” 

center離2010年還有:br 

input type=”textarea” name=”left” size=”35″ style=”text-align: center” mce_style=”text-align: center” 

/center 

/div 

/form 

mce:script LANGUAGE=”javascript”!– 

startclock() 

var timerID = null; 

var timerRunning = false; 

function showtime() { 

Today = new Date(); 

var NowHour = Today.getHours(); 

var NowMinute = Today.getMinutes(); 

var NowMonth = Today.getMonth(); 

var NowDate = Today.getDate(); 

var NowYear = Today.getYear(); 

var NowSecond = Today.getSeconds(); 

if (NowYear 2000) 

NowYear=1900+NowYear; 

Today = null; 

Hourleft = 23 – NowHour 

Minuteleft = 59 – NowMinute 

Secondleft = 59 – NowSecond 

Yearleft = 2009 – NowYear 

Monthleft = 12 – NowMonth – 1 

Dateleft = 31 – NowDate 

if (Secondleft0) 

{ 

Secondleft=60+Secondleft; 

Minuteleft=Minuteleft-1; 

} 

if (Minuteleft0) 

{ 

Minuteleft=60+Minuteleft; 

Hourleft=Hourleft-1; 

} 

if (Hourleft0) 

{ 

Hourleft=24+Hourleft; 

Dateleft=Dateleft-1; 

} 

if (Dateleft0) 

{ 

Dateleft=31+Dateleft; 

Monthleft=Monthleft-1; 

} 

if (Monthleft0) 

{ 

Monthleft=12+Monthleft; 

Yearleft=Yearleft-1; 

} 

Temp=Yearleft+’年, ‘+Monthleft+’月, ‘+Dateleft+’天, ‘+Hourleft+’小時, ‘+Minuteleft+’分, ‘+Secondleft+’秒’ 

document.form1.left.value=Temp; 

timerID = setTimeout(“showtime()”,1000); 

timerRunning = true; 

} 

var timerID = null; 

var timerRunning = false; 

function stopclock () { 

if(timerRunning) 

clearTimeout(timerID); 

timerRunning = false; 

} 

function startclock () { 

stopclock(); 

showtime(); 

} 

// –/mce:script 

別地方複製的，測試有效

你把裡面的時間數據改成你想要的結果就可以了

原創文章，作者：APEO，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/140669.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
APEO的頭像APEO
0 0
上一篇 2024-10-04 00:24
下一篇 2024-10-04 00:24

相關推薦

  • Java 監控介面返回信息報錯信息怎麼處理

    本文將從多個方面對 Java 監控介面返回信息報錯信息的處理方法進行詳細的闡述，其中包括如何捕獲異常、如何使用日誌輸出錯誤信息、以及如何通過異常處理機制解決報錯問題等等。以下是詳細…

    CFQYU的頭像 CFQYU
    編程 2025-04-29

  • 使用Python爬蟲獲取電影信息的實現方法

    本文將介紹如何使用Python編寫爬蟲程序，來獲取和處理電影數據。需要了解基本的Python編程語言知識，並使用BeautifulSoup庫和Requests庫進行爬取。 一、準備…

    ABEKA的頭像 ABEKA
    編程 2025-04-28

  • Python爬取網頁信息

    本文將從多個方面對Python爬取網頁信息做詳細的闡述。 一、爬蟲介紹 爬蟲是一種自動化程序，可以模擬人對網頁進行訪問獲取信息的行為。通過編寫代碼，我們可以指定要獲取的信息，將其從…

    QQDHM的頭像 QQDHM
    編程 2025-04-28

  • 如何使用Python執行Shell命令並獲取執行過程信息

    本文將介紹如何使用Python執行Shell命令並獲取執行過程信息。我們將從以下幾個方面進行闡述： 一、執行Shell命令 Python內置的subprocess模塊可以方便地執行…

    HGHNA的頭像 HGHNA
    編程 2025-04-28

  • 使用JavaScript日期函數掌握時間

    在本文中，我們將深入探討JavaScript日期函數，並且從多個視角介紹其應用方法和重要性。 一、日期的基本表示與獲取 在JavaScript中，使用Date對象來表示日期和時間，…

    PBPIB的頭像 PBPIB
    編程 2025-04-28

  • Python實現身份信息模擬生成與查驗

    本文將從以下幾個方面對Python實現身份信息模擬生成與查驗進行詳細闡述: 一、身份信息生成 身份信息生成是指通過代碼生成符合身份信息規範的虛假數據。Python中，我們可以使用f…

    SIFVZ的頭像 SIFVZ
    編程 2025-04-27

  • JavaScript中使用new Date轉換為YYYYMMDD格式

    在JavaScript中，我們通常會使用Date對象來表示日期和時間。當我們需要在網站上顯示日期時，很多情況下需要將Date對象轉換成YYYYMMDD格式的字元串。下面我們來詳細了…

    MMKXM的頭像 MMKXM
    編程 2025-04-27

  • Dapper使用getschema獲取表信息

    本文旨在介紹Dapper中使用getschema獲取表信息的方法和注意事項。 一、獲取某張表的所有列信息 使用Dapper獲取某張表信息，可以使用 `IDbConnection.G…

    UMJBO的頭像 UMJBO
    編程 2025-04-27

  • 已裝備我軍的空中信息化作戰平台

    本文將會從多個方面詳細闡述已裝備我軍的空中信息化作戰平台。 一、平台概述 已裝備我軍的空中信息化作戰平台是一個全新的作戰系統，具備實時數據採集、處理、分析、共享的能力。它可以在不同…

    PALAU的頭像 PALAU
    編程 2025-04-27

  • 通過提交信息搜索-使用git

    本篇文章重點講解如何使用git通過提交信息來搜索。我們將從多個方面介紹如何使用git來搜索提交信息，並提供相應的代碼示例以供參考。 一、搜索方式 Git提供了三種搜索方式，分別為：…

    MTDFD的頭像 MTDFD
    編程 2025-04-27

發表回復

登錄後才能評論