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

WBOY
リリース: 2016-05-16 16:30:20
オリジナル
1330 人が閲覧しました

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

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

HTML コード:

コードをコピーします コードは次のとおりです。
2010 年まであと数日:



<スクリプト言語="javascript"> 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 コード:




コードをコピー


コードは次のとおりです:
<スクリプト言語="JavaScript">






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

HTML コード:

コードをコピーします

コードは次のとおりです。] 日

あります

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


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

コードをコピー

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

00:01:11:00

<スクリプト言語="Javascript"> 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 プログラミングに役立つことを願っています。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート