この効果を実装するための鍵は、日付オブジェクトとSetimeOutの使用です。
合計3つの例があります。 HTML構造は次のとおりであるため、CSSスタイルは追加されていません。
<Body>現在の時刻：<P id = "P1"> </p>大学入学試験カウントダウン：<P id = "p2"> </p>限定時間ラッシュ：<p id = "p3"> </p> </body>
主にJavaScriptの実装を理解しています
window.onload = function（）{var p1 = document.getElementById（ "p1"）、p2 = document.getElementById（ "p2"）; p3 = document.getElementById（ "p3"）; showtime1（）; showtime2（）; showtime3（）;}1.現在の時間ディスプレイの簡単な実装
function showtime1（）{var nowdate = new date（）; //日付オブジェクトを作成しますnowdate nowdate.get.therear（）、get year month = nowdate.getmonth（）+1、// get month、get month（）は0-11を取得します。週= ["サンデー"、「月曜日」、「火曜日」、「木曜日」、「金曜日」、「土曜日」、h = nowdate.gethours（）、m = nowdate.getminutes（）、s = nowdate.getseconds（）、h = checktime（h）、/function checktimeは、フォーマット時間、数分、s =チェックタイム（m）、s p1.innerhtml = year+"year"+月+"月"+日付+"day"+week+h+"："+m+"："+s; setimeout（showtime1、1000）; //関数自体を繰り返す}チェックタイム関数は次のとおりです。
関数checktime（i）{if（i <10）{i = "0"+i; } return i;}通常、表示される時間形式は通常00:00:01であり、Gethours、Getminutesは00〜9ではなく0〜9ではなく形式を取得します。したがって、9〜10に変更するプロセスでは、2桁になり、充電が59秒に0秒または0分または23分に59秒になると0になります。
たとえば、23:59:59は次の秒で00:00:00に変更するはずです。チェックタイム関数が処理に使用されない場合、0：0：0に変更され、形式が少し矛盾し、単語数の増加または減少の視覚的変異もあります。 （次の2つの例では、チェックタイム関数を使用して時間、分、2番目を処理しません!!!）
2。大学入学試験のカウントダウン効果が実現しました
function showtime2（）{var nowtime = new date（）、//現在の時間末端= new date（ "2017/6/6"）; leftth = math.floor（leftime/（1000*60*60）％24）、// leftm = math.floor（leftime/（1000*60）％60）、// leftts = math.floor（leftime/1000％60）; //秒数p2.innerhtml = leftd+"day"+lefth+"："+leftm+"："+lefts; setimeout（showtime2、1000）; }その中で、より重要なポイント：
ext End Time EndTime = new Date（ "2017/6/6"）の定義は、パラメーターを使用して新しい日付オブジェクトを使用することであり、直接新しい日付（）は現在の時間を直接取得することです。
getTime（）メソッドは、1970年1月1日からミリ秒数を取得します。
dasy日数、時間、分、秒の計算、％（モジュロ操作）。終了時間からミリ秒（残りのミリ秒）を取得し、残りの秒を取得するために1000で割って、60で割って残りの分を取得し、残りの時間を取得します。残りの日を得るために24で割った。残りの秒残り秒/1000モジュール60秒数、残りの分の残り時間/（1000*60）モジュール60は、残りの時間を取得します。
3。期間限定のラッシュ購入のカウントダウン効果
function showtime3（）{var nowtime = new date（）、endtime = new date（ "2020/1/1,00：00：00"）、//終了時間lefttime = parseint（（endtime.gettime（） - nowtime.gettime（）/1000）、d = math.floor/（leftime/（leftime/（60*60*24） m = math.floor（lefttime/60％60）、s = math.floor（lefttime％60）; p3.innerhtml = d+"day"+h+"hour"+m+"minute"+s+"second"; setimeout（showtime3、1000）; }実際、それは2番目の例に似ています。違いは、終了時間が新しい日付に設定されていることです（ "2020/1/1,00：00：00"）
以下は完全なコードです
< } return i; } window.onload = function（）{var p1 = document.getElementById（ "p1"）、p2 = document.getElementById（ "p2"）; showtime1（）; showtime2（）; showtime3（）; }関数showtime1（）{var nowdate = new date（）; var year = nowdate.get.flyear（）、// year month = nowdate.getmonth（）+1、//月日= nowdate.getdate（）、// day week = ["Sunday"、 "Monday"、 "Tuesday"、 "木曜日]、「金曜日」、「土曜日」、day = nowdate.getday（）、 m = nowdate.getminutes（）、m = checktime（m）、s = nowdate.getSeconds（）、s = checktime（s）; p1.innerhtml = year+"year"+月+"月"+日付+"day"+week+h+"："+m+"："+s; setimeout（showtime1、1000）; }関数showtime2（）{var nowtime = new date（）、endtime = new date（ "2017/6/6"）; var lefttime = endtime.gettime（） - nowtime.gettime（）、leftd = math.floor（leftime/（1000*60*60*24））、left = math.floor（lefttime/（1000*60*60*60）％24）、leftm = math.floor（lefttime/（1000*60）％60）、lefts = math.floor（1000）; p2.innerhtml = leftd+"day"+lefth+"："+leftm+"："+lefts; setimeout（showtime2、1000）; } function showtime3（）{var nowtime = new date（）、endtime = new date（ "2020/1/1,00：00：00"）、leftime = parseint（（endtime.gettime（） - nowtime.gettime（）/1000）、d = math.floor（leftime/（60*60*））、h = math.floor/（60）。 m = math.floor（lefttime/60％60）、s = math.floor（lefttime％60）; p3.innerhtml = d+"day"+h+"hour"+m+"minute"+s+"秒"; setimeout（showtime3、1000）; } </script> </head> <body>現在の時刻：<p id = "p1"> </p>大学入学試験カウントダウン：<p id = "p2"> </p>限定時間ラッシュ：<p id = "p3"> </p> </body> </html> </html>上記のJavaScript Special Effects実装 - 現在の時間とカウントダウン効果の簡単な例は、私があなたと共有したすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。