クロック
クロックを作成する最も簡単な方法は、正規表現のexec（）メソッドを使用して、時間オブジェクトの文字列の時間部分を傍受し、タイマーで更新することです。
<div id="myDiv"></div><script>myDiv.innerHTML = //d/d:/d/d:/d/d/.exec(new Date().toString())[0];setInterval(function(){myDiv.innerHTML = //d/d:/d/d:/d/d/d/.exec(new date（）。toString（））[0]; </script>カウントダウン
【1】シンプルなカウントダウン
単純なカウントダウンは、要件を満たすために1秒ごとに間隔を設定することにより、設定時間を差し引くことです
<div id = "mydiv"> <label for = "set"> <input type = "number" id = "set" set "1" value = "0">秒</label> <button id = "btn">確認</button> <ボタンid = "reset"> reset </button </button> </div> <script> resict.onclick = function function（）{if（timer）return; set.setattribute（ 'disabled'、 'disabled'）; timer = setinterval（function（）{if（number（set.value）=== 0）{clearinterval（timer）; timer = 0; set.removeattribute（ 'disabled'）; return = set.value = unt.value = unt.value = firue【2】正確なカウントダウン
タイマーの動作メカニズムに基づいて、1000msごとに時間の変化が信頼できないことがわかっています。より正確には、システムの実行時間を参照するために使用する必要があり、カウントダウンの時間の変化は、正確なカウントダウンの効果を達成するためにシステムの時間の変更と同期されます。
[注]この部分では、弾性率と分割操作を介して、時間と2番目の操作を計算する必要があります。詳細はここに移動します。
<div id = "mydiv"> <ラベル= "hour"> <input type = "number" id = "hour" min = "" max = "23" step = "1" value = "0" /> <label> <for = "minute"> <入力タイプ= "number" id "id =" minut "min =" 0 "max =" 59 "1 min <" /min <" type = "number" id = "second" min = "0" max = "23" step = "1" value = "0"/> second </label> <button id = "btn">確認</button> <ボタンid = "reset"> reset </button> </div> <script> var timer; = 0; if（this.value> 23）this.value = 23; if（this.value <0）this.value = 0;} onchange = minute.onchange = function（）{if（number（this.value）！== number（this.value））this.value = 0; 0;} reset.onclick = function（）{history.go（）;} btn.onclick = function（）{if（timer）return; for（var i = 0; i <3; i ++）{mydiv.getelementsBytagname（ 'input'）[i] setattribute（ 'disabled'）; minute.value*60 + second.value*1; //元のシステム時間値var timeori =（new date（））。通常の時間の変更を取得setnow = setori -math.floor（（timenow -timeori）/1000）; hour.value = math.floor（（setnow％86400）/3600）; minute.value = math.floor（（setnow％3600）/60）; second.value = math.floor（setnow％60）; timer = timer RequestAnimationFrame（fn）; if（setNow == 0）{cancelanimationFrame（Timer）; Timer = 0; btn.innerhtml = 'Time End'; for（var i = 0; i <3; i ++）{myDiv.getElementsByTagname（ 'input'）[i] .Removeattribute（ 'Disabled'）;} setimeout（）{btn.innerhtml = 'ok';}、1000）}}} </scrip>ストップウォッチ
【1】単純なストップウォッチ
StopwatchはCountdownと同じアイデアを持っており、比較すると簡単です。インターバルごとに100msを追加します
<div id = "mydiv"> <label for = "set"> <input id = "set" value = "0"> </label> <button id = "btn"> start </button> <button id = "reset"> reset </button> </div> <スクリプト> varタイマー; var con = 'off'; var num = 0; resit.onclick = fentic function（）{if（con === 'off'）{set.setattribute（ 'disabled'、 'disabled'）; con = 'on'; btn.innerhtml = 'Pause'; setinterval（）{num+= 100; var minute = math.floor（num/1000/60）; math.floor（num％1000）/100; set.value = ' + second +'、100）;} }} </script>【2】正確なストップウォッチ
Countdownと同様に、タイムのバリエーションの参照としてタイマーの時間間隔を使用することは不正確です。より正確なアプローチは、ストップウォッチの変更の参照としてシステムの時間の変更を使用することです。
<div id = "mydiv"> <label for = "set"> <入力id = "" value = "0"> </label> <button id = "btn"> start </button> <button id = "reset"> reset </button> </div> <スクリプト> varタイマー; var con = 'off'; // or = 0。 Ori =（new date（））を渡した秒数。GetTime（） - last; Timer = RequestAnimationFrame（function fn（）{dis =（new date（））。gettime（） - ori; cancelanimationframe（タイマー）;タイマー= requestanimationframe（fn）; var minute = math.floor（dis/1000/60）; var second = math.floor（dis/1000）; second + '' + ms;} con = 'off'; last = dis;}} </script>目覚まし時計
目覚まし時計は、実際に時計に所定の時間設定を追加しています。目覚まし時計設定では、設定時間を1970年1月1日からミリ秒数に変換する必要があり、現在の時間との差が計算されます。現在の時刻が増え続けるにつれて、差が0の場合、目覚まし時計が鳴ります
<div id = "mydiv"> </div> <div id = "con"> <label for = "hour"> <入力タイプ= "hour" min = "0" max = "23" 1 "値=" 0 "/>> <ラベル=" minute "> <入力タイプ="番号 "id =" min = "min =" "" Max = " /> min </label> <label for = "second"> <入力タイプ= "id" second "min =" 0 "max =" 23 "value =" 0 "/> second </label> <ボタンid =" btn "> ciend </button> <button id =" reset "> reset </button> </div div" dis; mydiv.innerhtml = //d/d/d/d/d/d/d/.exec(new date（）。tostring（））[0]; setinterval（function（）{mydiv.innerhtml = //d/d/d/d/d/d/d/d/d/d/d/d/d/.exec(new（））; }、100）; reset.onclick = function（）{history.go（）;} btn.onclick = function（）{//元の保存値var setori = hourue*3600 + value*60 + value*1; setori*1000; //設定時間が現在の時間よりも早い場合、設定が無効である場合、（var i = 0; i <3; i ++）{con.getElementsBytagname（ 'input'）[i] .setattribute（ 'disablead'）;} cancelanimationframe（ 'disabre frame（' input '）; RequestAnimationFrame（function fn（）{//設定された時間と現在の時間= math.ceil（（new date（））。gettime（））/1000）; var showhour = math.floor（（dis％86400）/3600）; var showminute = math.floor（（dis％3600）/60）; var showsecond Math.floor（dis％60）; Timer = RequestAnimationFrame（fn）; show.innerhtml = 'スケジュールされた時間からまだ距離があります' + showhour + 'hour minute +' minus ' + showsond +'秒 '; = 'time is up';やっと
タイマーとして、最も厄介なことはタイマー管理です。タイマーの電源がオンになっているだけでなく、オフになっていない場合、タイマーの重ね合わせ効果が発生し、操作がより速く速くなります。したがって、オフにしてタイマーを有効にすることは良い習慣です。
上記は、編集者が紹介した3番目のタイマーアプリケーション（Clock、Countdown、StopWatch、Alarm Clock）です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！