시계
시계를 생성하는 가장 쉬운 방법은 정규 표현식의 exec () 메소드를 사용하여 시간 개체 문자열의 시간 부분을 차단하고 타이머로 새로 고침하는 것입니다.
<div id = "mydiv"> </div> <cript> 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/d/d/d/d/d/d/d/d/d/d 날짜 (). toString ()) [0], 500);카운트 다운
【1 count 간단한 카운트 다운
간단한 카운트 다운은 요구 사항을 충족시키기 위해 1 초마다 간격을 설정하여 설정 시간을 빼는 것입니다.
<div id = "mydiv"> <label for = "set"> <input type = "number"id = "set"step = "1"value = "0"> 초 </label> <button id = "btn"> 확인 </button "> vart id ="Reset "> reset </button> </div> <cript> var var timer; reset.onclic = intustric. () function () {if (timer) return; set.setAttribute ( 'disabled', 'disabled'); timer = setInterval (function () {if (number (set.value) === 0) {clearInterVal (timer); set.removeattribute ( 'repinabled'); 1;}, 1000);} </script>【2 urate 정확한 카운트 다운
타이머의 작동 메커니즘을 기반으로, 우리는 1000ms마다 시간을 바꾸는 것이 신뢰할 수 없다는 것을 알고 있습니다. 보다 정확하게는 시스템의 실행 시간을 참조하는 데 사용해야하며 카운트 다운의 시간 변경은 정확한 카운트 다운의 효과를 달성하기 위해 시스템의 시간 변경과 동기화됩니다.
[참고]이 부분에서는 모듈러스 및 분할 작업을 통해 시간, 분 및 두 번째를 계산해야합니다. 세부 사항은 여기에 옮겨졌습니다.
<div id = "mydiv"> <label for = "hour"> <input type = "number"id = "hour"min = "0"max = "23"step = "1"value = "0" /> time < /label> < "minute"> <input type = "number"id = "minut"min = "max ="59 "value ="0 " /> min < />>>>>>>>>>>>>>>>>>> /> min <input type ="0 " /> min < /> <input type =. type = "number"id = "second"min = "0"max = "23"23 "step ="1 "value ="0 "/> secon this.value = 0; if (this.value> 23) this. value = 23; if (this.value <0) this.value = 0;} second.onchange = minute.onchange = function () {if (humber (this.value)! == number = 0; if (value> 59) this.value = 0; 59; if (this.value <0) this.value = 0;} reset.onclick = function () {histor.go ();} btn.onclick = function () {if (타이머) retur; for (var i = 0; i <3; i ++) {myDiv.getElementsByTagName ( 'input') [i] .setAttribute ( 'disabled', 'disabled');} // raw 저장 값 var setori = hour.value*3600 + minute.value*60 + second.value*1; // original system val var timeori = (new date (); // gettime (). setNow; cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {// 현재 시스템 시간 값 var timenow = (new date ()). Math.floor ((setnow%86400)/3600); minute.value = math.floor ((setnow%3600)/60); sec end '; for (var i = 0; i <3; i ++) {mydiv.getElementsByTagName ('input ') [i] .removeatTribute ('disabled ');} settimeout (function () {btn.innerhtml ='OK ';}, 1000)}}} </script>스톱워치
【1 stop 간단한 스톱워치
STOPWATCH는 카운트 다운과 동일한 아이디어를 가지고 있으며 비교할 때 더 간단합니다. 간격 당 100ms를 추가하십시오
<div id = "mydiv"> <label for = "set"> <input id = "set"value = "0"> </label> <button id = "btn"> start </button> <button id = "Reset"> reset </div> <cript> var timer; var con = 'off'; var = 0; reset.onclic = 함수 () function () {if (con === 'off') {set.setAttribute ( 'disabled', 'disabled'); con = 'on'; btn.innerhtml = 'pause'; timer = setInterval (function () {num+= 100; var minute = math.floor (num/1000/60); var second = math.flor (num/1000); Math.floor (num%1000) /100; value = minute + ':' + ms ', 100); }} </script>【2 urate 정확한 스톱워치
카운트 다운과 마찬가지로 타이머의 시간 간격을 시간 변동에 대한 참조로 사용하는 것이 부정확합니다. 보다 정확한 접근 방식은 시스템의 시간 변경을 스톱워치의 변경에 대한 참조로 사용하는 것입니다.
<div id = "mydiv"> <label for = "set"> <input id = "set"value = "0"> </label> <button id = "btn"> start </button> <button id = "Reset"> reset> </div> <cript> var timer; var con = 'off'; // ori는 var var (hick on th the the the the the the the the the thems) var dis = 0; // 마지막으로 일시 정지 (static) var last = 0; reset.onclick = function () {history.go ();} btn.onclick = function () {if (con === 'off') {set.setattribute ( 'disabable', 'disabled'); btn.innerhtml = ''; ori = (new date ()). gettime () - 마지막; TIMER = requestAnimationFrame (function fn () {dis = (new date ()). gettime () - ori; cancelAnimationFrame (timer); timer = requestAnimationFrame (fn); var minute = math.floor (dis/1000/60); var second = math.floor (dis/1000); math.floor (dis.value); . ' + ms;});} else {cancelAnimationFrame (타이머); btn.innerHtml ='start '; con = 'off'; last = dis;}} </script>자명종
알람 시계는 실제로 시계에 미리 정해진 시간 설정을 추가합니다. 알람 시계 설정은 설정 시간을 1970 년 1 월 1 일부터 밀리 초로 변환 한 다음 현재 시간과의 차이를 계산해야합니다. 현재 시간이 계속 증가함에 따라 차이가 0이면 알람 시계가 울립니다.
<div id = "mydiv"> </div> <div id = "con"> <label for = "hour"> <input type = "number"id = "hour"min = "0"max = "23"step = "1"value = "0"/> time </label> <레이블 "minute"> <input type = "id ="minute "0"max = ""1 ""1 "" "" "" "" "" "1"1 "" "" "" /> min </label> <label for = "second"> <input type = "number"id = "sec dis; mydiv.innerhtml = //d/d/d:/d/d/d/d/d/d/d/.exec(). Tostring ()) [0]; setInterval (function () {mydiv.innerhtml = //d/d:/d/d/d/d/d/d/d/d/d/.exec(newtrement ()); }, 100); reset.onclick = function () {history.go ();} btn.onclick = function () {// 원래 저장된 값 var setori = hour.value*3600 + minute.value*60 + second.value*1; // 1970 var sets = + new date () + 새로운 날짜 () + 새로운 날짜 (). setori*1000; // 설정 시간이 현재 시간보다 이른 경우 설정이 유효하지 않은 경우 (setms <+new date ()) {return;} for (var i = 0; i <3; i ++) {con.getElementsByTagName ( 'input') [i] .setattribution ( 'disabled', 'disabled'); requestAnimationFrame (function fn () {// 설정 시간과 현재 시간 사이의 차이를 프레임으로 틀립니다. dis = math.ceil (setms- (new date ()). requestAnimationFrame (fn); show.innerhtml = '예정된 시간' + showhour + 'hour' + showminute + 'minus' + showecond + 'seconds'; // 차이가 0이면 시간에 도달하면 (dis == 0) {cancelAnimationframe (timer); vatn.innerhtml = if '; for in up'; <3; i ++ {con.getElementsByTagName ( 'input') [i] .removeattribute ( 'disabled');} timer = settimeout (function () {btn.innerhtml = 'Ok';}, 1000)}) </script>마침내
타이머로서 가장 번거로운 것은 타이머 관리입니다. 타이머가 켜지지 만 꺼지지 않으면 타이머 중첩 효과가 발생하여 작업이 더 빠르고 빠르게됩니다. 따라서 타이머를 끄고 활성화하는 것은 좋은 습관입니다.
위는 편집기가 귀하에게 소개 한 세 번째 타이머 응용 프로그램 (Clock, Countdown, Stopwatch 및 Alarm Clock)입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!