JSカウントダウンコードまとめ_JavaScriptスキル

この記事の例は、一般的な JS カウントダウン コードをまとめたものです。皆さんの参考に共有してください。具体的な概要は次のとおりです。

最初のタイプ: 秒まで正確な JavaScript カウントダウン コード

HTML コード:

コードをコピーします コードは次のとおりです。

2010 年まであと数日:

フォーム>
start Clock()
var timerID = null; var timerRunning = false; 関数 showtime() {
今日 = 新しい日付()
var NowHour = Today.getHours(); var NowMinute = Today.getMinutes(); var NowMonth = Today.getMonth(); var NowDate = Today.getDate(); var Nowyear = Today.get Year(); var NowSecond = Today.getSeconds()
if (Now Year 今年=1900 今年
今日 = null; 残り時間 = 23 - 現在時間
左分 = 59 - 今分
左から 2 番目 = 59 - NowSecond
残り年 = 2009 - 現在年
残りの月 = 12 - 現在の月 - 1
Dateleft = 31 - NowDate
if (左から 2 番目 {
左 2 番目 = 60 左 2 番目
残り分 = 残り分-1
}
if (残り分 {
残り分=残り 60 分
左時間 = 左時間-1
}
if (残り時間 {
残り時間=残り 24 時間
日付左=日付左-1
}
if (Dateleft {
Dateleft=31 Dateleft
Monthleft=Monthleft-1; }
if (残り月 {
残り 12 ヶ月 = 残り 12 ヶ月
残り年=残り年-1
}
Temp=yearleft '年、' Monthleft ' 月、' Dateleft ' 日、' Hourleft ' 時、' Minuteleft ' 分、' Secondleft ' 秒'
document.form1.left.value=Temp; timerID = setTimeout("showtime()",1000); タイマー実行中 = true; }
var timerID = null; var timerRunning = false; 関数ストップクロック () {
if(タイマー実行中)
クリアタイムアウト(タイマーID); タイマー実行中 = false; }
function start Clock () {
ストップクロック(); ショータイム(); }
// -->




2種類目：とある運動会


HTML コード:




コードをコピー


コードは次のとおりです:

スクリプト>

3 番目のタイプ: 時間カウントダウン

HTML コード:

コードをコピーします

コードは次のとおりです。 var maxtime = 60*60 //1 時間は秒単位で計算されます。調整してください。 関数 CountDown(){ if(maxtime>=0){

分 = Math.floor(maxtime/60); 秒 = Math.floor(maxtime`); msg = "終了まではまだ"分"秒"秒あります

; document.all["タイマー"].innerHTML=msg; if(maxtime == 5*60)alert('注意、まだ 5 分あります!'); --最大時間
}
他{
クリアインターバル(タイマー); alert("時間切れです、終わりです!"); }
}
タイマー = setInterval("CountDown()",1000); //-->
スクリプト>

4 番目のタイプ: 最も単純なカウントダウン


HTML コード:




コードをコピー

コードは次のとおりです:

スクリプト>



5 番目のタイプ: 最も単純なカウントダウン 2

HTML コード:

コードをコピー

コードは次のとおりです: 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)
}
スクリプト>
XX の開会式まで [] 日

あります

6 番目: Javascript カウントダウン タイマー - システム時間の自己チェックを使用する


今回は、カウントダウンをより正確にするために手動で調整することなく、システム時刻をカウントダウンの自己チェックに使用します。コードと詳細なコメントは次のとおりです。

コードをコピー

コードは次のとおりです:

00:01:11:00

var 正常経過 = 100
var nextelapse = 通常の経過
変数カウンター
var startTime; var start = クロック.インナーテキスト
var 終了 = "00:00:00:00"; var タイマー = null; // 実行を開始します
関数 run() {
startB.disabled = true; endB.disabled = false
カウンタ = 0; //初期化開始時刻
startTime = new Date().valueOf(); // nextelapse はタイミング時間で、最初は 100 ミリ秒です
// setInterval 関数に注意してください。nextelapse (ミリ秒) の時間が経過すると、onTimer が
の実行を開始します。 timer = window.setInterval("onTimer()", nextelapse); }
// 実行を停止
関数 stop() {
startB.disabled = false; endB.disabled = true; window.clearTimeout(タイマー); }
window.onload = function() {
endB.disabled = true; }
// カウントダウン関数
関数 onTimer()
{
if (開始 == 終了)
{
window.clearInterval(タイマー); アラート(「時間切れ!」);
に戻る }
var hms = new String(start).split(":"); var ms = 新しい数値(hms[3]); var s = 新しい数値(hms[2]); var m = 新しい数値(hms[1]); var h = 新しい数値(hms[0]); ミリ秒 -= 10
if (ms {
ミリ秒 = 90;
s -= 1; if (s {
s = 59; m -= 1; }
if (m {
m = 59; h -= 1; }
}
var ms = ms window.clearInterval(タイマー); // システム時刻をセルフチェックして時差を取得し、それによって次回開始される新しいタイマーの時刻を取得します
カウンター
var counterSecs = カウンター * 100; var elapseSecs = new Date().valueOf() - startTime; var diffSecs = counterSecs - elapseSecs; nextelapse = 通常の経過 diffSecs
diff.value = counterSecs "-" elapseSecs "=" diffSecs; next.value = "nextelapse = " nextelapse
if (nextelapse timer = window.setInterval("onTimer()", nextelapse); }



この記事が皆さんの JavaScript ベースの Web プログラミングに役立つことを願っています。