relógio
A maneira mais fácil de criar um relógio é usar o método EXEC () da expressão regular para interceptar a parte do tempo da string do objeto de tempo e atualizá -lo com um timer.
<div id = "mydiv"> </div> <cript> mydiv.innerhtml = //d/d:/d/d:/d/d/.exec(new Date (). Date (). ToString ()) [0];
Contagem regressiva
【1】 Contagem regressiva simples
A contagem regressiva simples é subtrair o tempo definido, definindo intervalo a cada 1 s para atender aos requisitos
<div id = "mydiv"> <gravador para = "set"> <input type = "número" id = "set" step = "1" value = "0"> segundos </elated> <button id = "btn"> confirm </button> <button id = "reset"> reset </button> </div) <cript> var timer; function () {if (timer) return; set.setAttribute ('desativado', 'desativado'); timer = setInterval (function () {if (number (set.value) === 0) {clearInterval (timer); timer = 0; set.RemoVeattribute ('Disabled'); retorno; </script>【2】 Contagem regressiva precisa
Com base no mecanismo operacional do timer, sabemos que mudar o tempo a cada 1000ms não é confiável. Mais precisamente, ele deve ser usado para se referir ao tempo de execução do sistema, e as mudanças de tempo na contagem regressiva são sincronizadas com as alterações de tempo do sistema para alcançar o efeito da contagem regressiva precisa.
[Nota] Nesta parte, você precisa calcular o tempo, o minuto e o segundo por meio de operações de módulo e divisão. Os detalhes são movidos aqui.
<div id id = "mydiv"> <etiqueta para = "hour"> <input type = "número" id = "hour" min = "0" max = "23" step = "1" value = "0" /> time < /etiquetel> <etiqueta para = "minuto"> <input type = "number" "minuto" "" 0x "0x =" 59 "> para = "Second"> <input type = "número" id = "segundo" min = "0" max = "23" step = "1" value = "0"/> segundo </elated> <botão id = "btn"> confirm </botão> <butão iD = "reset"> reset </button> </divent> <script> variner (// nonput) Número (this.value)) this.value = 0; if (this.value> 23) this.value = 23; if (this.value <0) this.value = 0;} Second.onchange = minute.onchange = function () {if (this.value)! 0) this.value = 0;} redefet.OnClick = function () {history.go ();} btn.onClick = function () {if (timer) return; para (var i = 0; i <3; i ++) {mydiv.getElementsBysBName ('input') [i].. = hour.value*3600 + minuto.Value*60 + Second.Value*1; // Valor do tempo do sistema original var timeori = (new Date ()). getTime (); // o valor do tempo restante atual var varnow; cancelanimationframe (timer); timer); O tempo é igual à diferença no tempo definido para obter alterações normais de tempo setNow = setori - math.floor ((timeNow - timeori)/1000); hour.value = math.floor ((SetNow%86400)/3600); minuto.value = math.floor ((SetNow 3600)/60); requestanimationframe (fn); if (setNow == 0) {cancelanimationframe (timer); timer = 0; btn.innerhtml = 'final de tempo'; para (var i = 0; i <3; i ++) {mydiv.getElementsByTagName ('input') [i] .Removeattribute ('desabilitado');} setTimeout (function () {btn.innerhtml = 'ok';}, 1000)}}} </cript>Cronômetro
【1】 Stopwatch simples
O StopWatch tem a mesma ideia que a contagem regressiva e é mais simples em comparação. Adicione 100ms por intervalo
<div id = "mydiv"> <etiqueta para = "set"> <input id = "set" value = "0"> </label> <button id = "btn"> start </button> <button id = "reset"> reset </button> </div> <script> var timer; var con = '; function () {if (con === 'off') {set.setattribute ('desabilitado', 'desabilitado'); con Math.Floor (NUM%1000) /100; }} </script>【2】 Stopwatch preciso
Semelhante à contagem regressiva, é impreciso usar o intervalo de tempo do timer como referência para variação de tempo. Uma abordagem mais precisa deve ser usar as mudanças de tempo do sistema como referência para alterações no stopwatch.
<div id = "mydiv"> <gravador para = "set"> <input id = "set" value = "0"> </label> <button id = "btn"> start </button> <button id = "reset"> reset </button> </div> <cript> var timer; var con/'off'; // ou indicados no sistema do sistema var dis = 0; // Última armazena o número de segundos na pausa (estática) var last = 0; reset.OnClick = function () {history.go.go ();} btn.onclick = function () {if (con == 'off') {set.ettribute ('Disabled', 'Dissen); consmante; Hora do sistema do número de segundos que passaram ORI = (new Date ()). getTime () - Last; timer = requestanimationframe (função fn () {dis = (new date ()). gettime () - ori; cancelanimationframe (timer); timer = requestanimationframe (fn); var minuto = math.floor (DIS/1000/60); var = Math.FOOR (DIS/1000); segundo + '. con = 'off'; last = dis;}} </sCript>Despertador
O despertador está realmente adicionando uma configuração de tempo predeterminada ao relógio. A configuração do despertador requer a conversão do tempo definido no número de milissegundos a partir de 1º de janeiro de 1970 e, em seguida, a diferença com a hora atual é calculada. À medida que o tempo atual continua aumentando, quando a diferença é 0, o despertador toca
<div id id = "mydiv"> </div> <div id = "con"> <gravador para = "hour"> <input type = "number" id = "hour" min = "0" max = "23" step = "1" value = "0"/> time </etc. /> min </etabel> <etiqueta para = "Second"> <input type = "número" id = "segundo" min = "0" max = "23" step = "1" value = "0"/> segundo </etc. 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/div.exec. }, 100); reset.OnClick = function () {history.go ();} btn.onClick = function () {// o valor original armazenado var stali = hour.value*3600 + minuto.Value*60 + Second.Value*1; // o valor original é convertido para o número de moinhos (.. Setori*1000; // Se o tempo de configuração for anterior ao horário atual, a configuração será inválida if (setms <+new date ()) {return;} para (var i = 0; i <3; i ++) {con.getElementsByTagName ('input') [i]. requestanimationframe (função fn () {// enquadre a diferença entre o tempo definido e o tempo atual dis = math.ceil ((setms - (new date ()). gettime ())/1000); var showhour = math.floor ((dis%86400)/3600); var showMinute = math.floor (Dis%366400)/3600); var minute = math.floor (disp. Math.Floor (Dis%60); Timer = requestanimationFrame (fn); show.innerhtml = 'Ainda há uma distância do tempo programado' + ShowHour + 'Hour' + Showminute + 'Minus' + ShowEcond + 'Seconds'; = 'O tempo está UP'; para (var i = 0; i <3; i ++) {Con.getElementsByTagName ('input') [i] .removeattribute ('desativado');} timer = setTimeout (function () {Btn.innerhtml = 'ok';}, 1000)}}}afinal
Como cronômetro, o mais problemático é o gerenciamento do timer. Se o temporizador estiver ligado apenas, mas não desligado, isso causará o efeito da superposição do timer, tornando a operação cada vez mais rápida. Portanto, é um bom hábito desligar e depois ativar o cronômetro.
O acima é o aplicativo do terceiro timer (relógio, contagem regressiva, cronômetro e despertador) apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!