シンプルなページカウントダウンを実現するJavaScript

この記事では、参考までに、シンプルなページカウントダウンを実装するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。

面倒なことはせずに、コードを貼り付けるだけです

<!DOCTYPE html>
<html>
<ヘッド>
 <メタ文字セット="utf-8">
 <スタイル タイプ="text/css">
  体
  {
   色：赤;
   テキスト配置: 中央;
  }
  。1つ{
   色：黒;
   テキスト配置:中央;
  }
 </スタイル>
</head>
<本文>
<p>
 日付カウントダウン<br>
 目標日を入力してボタンをクリックして、目標日までのカウントダウンを開始してください。
</p>
<フォーム名="form1">
 <input type="text" id="a" size=1 name="a">年<input type="text" id="b" size=1 name="b">月<input type="text" id="c" size=1 name="c">日<input type="text" id="d" size=1 name="d">時間<input type="text" id="e" size=1 name="e">分<input type="text" id="f" size=1 name="f">秒<br>

 <div id="時間" 値="時間"></div> 
 <スクリプト>
  関数 getdate(clock){
   var now = 新しい日付();
   var y = now.getFullYear()
   var m = now.getMonth()
   var d = now.getDate()

   var day = now.getDay()
   var h = now.getHours()
   var minu = now.getMinutes()
   var s = now.getSeconds()

   ｍ+=1;
   var array = new Array("日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日")
   var nowtime=y+"年"+m+"月"+d+"日"+配列[日]+" "+h+"時間"+minu+"分"+s+"秒";
   clock.innerHTML="現在の時刻: "+nowtime; 
  }
  window.onload = 関数(){  
  window.setInterval("getdate(time)",1000)
  }
 </スクリプト>

 <input type="button" value="カウントダウン" onclick="leftTime()">:
 まだあります:
 <input type="text" id="cha" >
 <スクリプト> 
 var flag=1;var t;
 関数 leftTime(){ 

 if(フラグ==0){フラグ=1;}

 年=document.getElementById("a").value;
 月=document.getElementById("b").value;
 day=document.getElementById("c").value;
 時間=document.getElementById("d").value;
 分=document.getElementById("e").value;
 2番目=document.getElementById("f").value;

 var leftTime = (new Date(年、月-1、日、時、分、秒)) - (new Date()); 
 //残りのミリ秒を計算する if(leftTime>0){
 var days = parseInt(leftTime/1000/60/60/24,10); //残りの日数を計算var hours = parseInt(leftTime/1000/60/60%24,10); //残りの時間を計算var minutes = parseInt(leftTime/1000/60%60,10);//残りの分数を計算var seconds = parseInt(leftTime/1000%60,10);//残りの秒数を計算document.getElementById("cha").value=days+"天" + hours+"小時" + minutes+"分" + seconds+"秒";
 }
 それ以外{
  document.getElementById("cha").value="0日0時間0分0秒";
  alert("マスター、時間切れです!")
  フラグ=0;クリア間隔(t);
 }
 if(フラグ==1){
 t=setInterval("leftTime()",1000);
 フラグ=2;
 }
 } 
 </スクリプト>
</フォーム> 
</本文>
</html>

初めてテストを書き終えたとき、時間が経過してもページにプロンプトボックスがポップアップし続けることに気付きました。その後、Baidu で検索したところ、関数を定期的に呼び出すために setInterval が呼び出されるたびに、それを閉じるために clearInterval を設定する必要があることがわかったので、フラグを設定して実装しました。最終的なコードは上記のとおりです。結果は次のとおりです。