Exemplo de timer html5

Autor：Eve Cole Data da Última Atualização：2025-05-09 23:00:03

Comentário: Depois de ouvir o cronômetro, você pode pensar que ele só pode ser implementado no JS. De fato, essa ideia ainda pode ser válida se você não souber que existe HTML5. Aqui está uma descrição de como o timer é implementado no HTML5. Amigos interessados não devem perder.

html:

<! Doctype html>

<head>

<!- Sempre force o mecanismo de renderização mais recente do IE (mesmo em intranet) e quadro do Chrome

Remova isso se você usar o .htaccess ->

<title> HTML5 Timer para balanço de trabalho de trabalho </ititle>

<!-Substitua Favicon.ico e Apple-Touch-icon.png na raiz do seu domínio e exclua essas referências->

<Cript>

Countdownsends = 60;

VAR Handle = NULL;

// Carga da janela

função onloadwindow () {

acanvas = document.getElementById ("CountdownCanvas");

context = acanvas.getContext ("2D");

var Canvastext = "Pressione para iniciar ...";

var xpos = acanvas.width / 2;

var ypos = acanvas.Height / 2;

context.font = "12pt século gótico";

context.fillstyle = "#008000;";

context.TexTalign = "Center";

context.TextBaseline = "Middle";

context.FillText (CanVastext, xpos, ypos);

}

Função UpdateCanvas (TheContext, Largura, Altura) {

if (contingdownseconds <0) {

ClearInterval (alça);

alça = nulo;

alerta ("Ei, o tempo acabou!");

retornar 0;

}

Minestr = Math.Floor (CountdowSegunds / 60);

Secstr = Countdownsends % 60;

if (MINSTR <10) {

MINSTR = "0" + MINSTR;

}

if (secstr <10) {

secstr = "0" + secstr;

}

context.clearrect (0, 0, largura, altura);

Context.Font = "24pt Century Gothic";

Context.FillText (MINSTR + ":" + secstr, largura / 2, altura / 2);

Countdownsends--;

}

função startworkcountdown () {

if (handle! = null) {

ClearInterval (alça);

}

CountDownseconds = document.getElementById ("workIntervalInput"). Valor * 60;

timedisplayCanvas = document.getElementById ("CountdownCanvas");

timedisplayContext2D = timedIsplayCanvas.getContext ("2D");

UpdateCanvas (timedisplayContext2D, timedisplayCanvas.width, timedisplayCanvas.Height);

handle = setInterval (function () {

UpdateCanvas (timedisplayContext2D, timedisplayCanvas.width, timedisplayCanvas.Height);

}, 1000);

}

função starTrestCountDown () {

if (handle! = null) {

ClearInterval (alça);

}

CountdowSowSeconds = document.getElementById ("RestInterValInput"). Valor * 60;

timedisplayCanvas = document.getElementById ("CountdownCanvas");

timedisplayContext2D = timedIsplayCanvas.getContext ("2D");

UpdateCanvas (timedisplayContext2D, timedisplayCanvas.width, timedisplayCanvas.Height);

handle = setInterval (function () {

UpdateCanvas (timedisplayContext2D, timedisplayCanvas.width, timedisplayCanvas.Height);

}, 1000);

}

</script>

</head>

<Body>

<div>

<H1> Timer de equilíbrio entre vida profissional e pessoal </h1>

</header>

Escolha o intervalo de trabalho:

minutos

Escolha o intervalo de repouso:

minutos

Esta é uma tela

</canvas>

Trabalhe duro

</button>

Faça uma pausa

</button>

<wower>

<p>

&cópia; Copyright reservado

</p>

</rodapé>

</div>

</body>

</html>

CSS3:

* HTML5 ✰ Boilerplate

* O que se segue é o resultado de muitas pesquisas sobre o estilo de navegador.

* Crédito deixado em linha e muito obrigado a Nicolas Gallagher, Jonathan Neal,

* Kroc camen e a comunidade e equipe de Dev H5BP.

* Informações detalhadas sobre este CSS: h5bp.com/css

* == | == Normalize ==================================================================================================================================

/* =================================================================================================================================================================================roeroeóóóó ,ó quase |========eeeeóS surroeroeóóóstaeeeeeerororoeroroóóóroó ,óóóó ,óóóóóó ororororororororo dorororo do momento donsse do ,ns, dons, dons nons nons nov ,ns nov ,v BilSll

Definições de exibição HTML5

=====================================================================================================================>

Artigo, além, detalhes, FigCaption, Figura, rodapé, cabeçalho, HGroup, Nav, Seção {Display: Block; }

Cabeçalho {Shadow Text: #220000 0px 0px 10px 10px 10px;}

áudio, tela, vídeo {display: inline-block; *Display: Inline; *zoom: 1; }

áudio: não ([controles]) {display: nenhum; }

[Hidden] {display: Nenhum; }

Base

=====================================================================================================================>

* 1. Texto correto redimensionando estranhamente no IE6/7 quando o tamanho da fonte do corpo é definido usando unidades EM

* 2. Força a barra de rolagem vertical em não-da-dura

* 3. Evite o tamanho do texto do iOS Ajuste na mudança de orientação do dispositivo, sem desativar o zoom do usuário: h5bp.com/g

html {font-size: 100%; Overflow-y: rolagem; -Webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

corpo {margem: 0; Size da fonte: 24px; altura de linha: 1.231;}

corpo, botão, entrada, selecione, textarea {Font-Family: "Century Gothic"; Cor:#008000}

* Remova a sombra de texto na seleção Destaque: h5bp.com/i

* Essas declarações de seleção devem ser separadas

* Também: rosa quente! (ou personalize a cor de fundo para combinar com seu design)

::-moz-selection {background: #fe57a1; Cor: #ffff; Shadow Text: Nenhum; }

:: Seleção {Background: #Fe57A1; Cor: #FFF; Shadow Text: Nenhum; }

Links

=====================================================================================================================>

a {color: #00E; }

A: visitado {color: #551A8b; }

A: Hover {color: #06E; }

A: foco {esboço: pontilhado fino; }

/ * Melhore a legibilidade quando focada e pairada em todos os navegadores: h5bp.com/h */

A: Passe o mouse, a: ativo {esboço: 0; }

Tipografia

=====================================================================================================================>

ABBR [título] {Border-Bottom: 1px pontilhado; }

B, forte {font-weight: BOLD; }

blockQuote {margem: 1em 40px; }

dfn {estilo de fonte: itálico; }

hr {display: block; Altura: 1px; borda: 0; Top de borda: 1px Solid #CCC; margem: 1em 0; preenchimento: 0; }

INS {Background: Color: #000; Decoração de texto: Nenhum; }

Mark {Background: #ff0; Cor: #000; estilo de fonte: itálico; Peso da fonte: negrito; }

/ * Redeclare Monospace Font Family: h5bp.com/j */

Pre, código, KBD, SAMP {Font-Family: Monospace, Monospace; _Font-Family: 'Courier New', Monospace; tamanho da fonte: 1em; }

/ * Melhore a legibilidade do texto pré-formatado em todos os navegadores */

pré {space branco: pré; Espaço Branco: pré-escravo; Word-wrap: Break-Word; }

q {cita: nenhum; }

P: Antes, P: After {content: ""; Conteúdo: nenhum; }

pequeno {tamanho da fonte: 85%; }

/ * Position Subscrit e Conteúdo Superscript sem afetar a altura da linha: h5bp.com/k */

sub, sup {font-size: 75%; altura da linha: 0; Posição: relativa; Alinhamento vertical: linha de base; }

sup {top: -0.5em; }

sub {Bottom: -0.25em; }

Listas

=====================================================================================================================>

ul, ol {margem: 1em 0; preenchimento: 0 0 0 40px; }

dd {margem: 0 0 0 40px; }

Nav Ul, Nav OL {estilo de lista: Nenhum; Imagem de estilo de lista: Nenhum; margem: 0; preenchimento: 0; }

Conteúdo incorporado

=====================================================================================================================>

* 1. Melhore a qualidade da imagem quando escalado no IE7: h5bp.com/d

* 2. Remova a lacuna entre imagens e fronteiras em recipientes de imagem: h5bp.com/e

img {borda: 0; -ms-interpolation-modo: Bicubic; Alinhamento vertical: meio; }

* Overflow correto não escondido no ie9

svg: não (: root) {overflow: hidden; }

Figuras

=====================================================================================================================>

Figura {margem: 0; }

Formas

=====================================================================================================================>

forma {margem: 0; }

Fieldset {Border: 0; margem: 0; preenchimento: 0; }

/ * Indique que 'Label' mudará o foco para o elemento de formulário associado */

Rótulo {cursor: ponteiro; }

* 1. Cor correta não herdando no IE6/7/8/9/9

* 2. Alinhamento correto exibido estranhamente no IE6/7

lenda {borda: 0; *margem -esquerda: -7px; preenchimento: 0; }

* 1. Correto do tamanho da fonte não herdando em todos os navegadores

* 2. Remova as margens no FF3/4 S5 Chrome

* 3. Defina exibição consistente de alinhamento vertical em todos os navegadores

botão, entrada, selecione, textarea {font-size: 100%; margem: 0; Alinhamento vertical: linha de base; *Alinhamento vertical: meio; }

* 1. Defina a altura da linha normalmente para corresponder ao FF3/4 (definido usando! IMPORTANTE na folha de estilo UA)

* 2. O espaçamento interno correto exibido estranhamente no IE6/7

botão, entrada {altura da linha: normal; *transbordamento: visível; }

* Reintroduz o espaçamento interno na 'tabela' para evitar sobreposição e espaço em branco no IE6/7

Botão da tabela, entrada da tabela { *Overflow: Auto; }

* 1. Exibir cursor da mão para elementos de formulário clicável

* 2. Permitir estilo de elementos de formulário clicável no iOS

botão, entrada [type = "button"], input [type = "reset"], input [type = "submit"] {cursor: pointer; -Webkit-Aparência: botão; }

* Dimensionamento consistente de caixa e aparência

input [type = "caixa de seleção"], input [type = "Radio"] {box-sizing: border-box; }

input [type = "Search"] {-webkit -APECEAÇÃO: textfield; -moz-box-size: content-box; -Webkit-box-sizing: content-box; Timing de caixa: caixa de conteúdo; }

input [type = "search"] ::-webkit-search-dececoration {-Webkit-Aparência: Nenhum; }

* Remova o preenchimento interno e a borda em FF3/4: h5bp.com/l

Button ::-Moz-focus-Inner, Input ::-Moz-focus-Inner {Border: 0; preenchimento: 0; }

* 1. Remova a barra de rolagem vertical padrão no IE6/7/8/9

* 2. Permitir apenas redimensionamento vertical

Textarea {Overflow: Auto; Alinhamento vertical: topo; redimensionar: vertical; }

/ * Cores para validade de formulário */

Entrada: válida, textarea: válida {}

Entrada: inválido, textarea: inválido {background-color: #f0dddd; }

Mesas

=====================================================================================================================>

Tabela {colapso da borda: colapso; espaçamento de borda: 0; }

td {vertical-align: top; }

/* == | == Estilos primários =================================================================================================================================

Autor:

=====================================================================================================================>

/* == | = Classes de auxiliares não semânticos =========================================================================================================================

Defina seus estilos antes desta seção.

=====================================================================================================================>

/ * Para substituição de imagem */

.ir {display: block; borda: 0; Indent Text: -999em; estouro: oculto; Background-Color: transparente; Repetição de fundo: sem repetição; Alinhamento de texto: esquerda; direção: ltr; }

.ir br {display: Nenhum; }

/ * Esconda dos leitores de tela e dos navegadores: h5bp.com/u */

.Hidden {Display: Nenhum! IMPORTANTE; Visibilidade: escondida; }

/ * Ocultar apenas visualmente, mas disponível para os leitores de tela: h5bp.com/v */

.VisoulyHidden {Border: 0; Clipe: Rect (0 0 0); Altura: 1px; margem: -1px; estouro: oculto; preenchimento: 0; Posição: Absoluto; Largura: 1px; }

/ * Estende a classe. Visualyhidding para permitir que o elemento seja focado quando navegado pelo teclado: h5bp.com/p *//

.Visualmentehidden.focusable: ativo, .Visualmentehidden.Focusable: Focus {clip: Auto; Altura: Auto; margem: 0; transbordamento: visível; Posição: estática; Largura: Auto; }

/ * Esconda visualmente e dos leitores de tela, mas mantenha o layout */

.Invisible {visibilidade: Hidden; }

/ * Contém carros alegóricos: h5bp.com/q */

.clearfix: antes, .clearfix: após {content: ""; exibição: tabela; }

.clearfix: depois {claro: ambos; }

.clearfix {zoom: 1; }

/* == | == Consultas de mídia =========================================================================================================================================================================================eroeóusroeóas surroeroeroasrorororoasroroasroroasas seu momentororo do momentororo dele dele dele dele dele dele dele dele dele dele dele que que dele que dele que dele queá que que que que que que que que que que que que queNN N Nvevevevevevesesese

Consultas de mídia de espaço reservado para design responsivo.

Estes substituem os estilos primários ('Mobile First')

Modificar conforme o conteúdo requer.

=====================================================================================================================>

@media apenas tela e (largura min: 480px) {

/ * Ajustes de estilo para viewports 480px e vá aqui */

}

@media apenas tela e (largura min: 768px) {

/ * Ajustes de estilo para viewports 768px e over vá aqui */

}

/* == | == Estilos de impressão ============================================================================================================================================================== quaseroóusroeóó ,óóó orige surroeeóuseeóóasóasroeroasroroasroroasrororororororororoóacos do `` do S O no entanto no Suito do São Paulo do São Paulo.

Estilos de impressão.

Inlined para evitar a conexão HTTP necessária: h5bp.com/r

=====================================================================================================================>

@media print {

* {Background: transparent! IMPORTANTE; Cor: preto! IMPORTANTE; Shadow Text: Nenhum! IMPORTANTE; Filtro: Nenhum! IMPORTANTE; -ms-filter: Nenhum! IMPORTANTE; }/ * Impressões pretas mais rápidas: h5bp.com/s */

a, a: visitado {decoração de texto: sublinhado; }

a [href]: após {content: "(" att (href) ")"; }

ABBR [título]: após {content: "(" att (title) ")"; }

.ir a: depois, a [href^= "javascript:"]: depois, a [href^= "#"]: depois {content: ""; }/ * Não mostre links para imagens ou links javascript/interno */

pre, blockquote {borda: 1px Solid #999; Page-Break-Inside: Evite; }

thead {display: tabela header-group; }/ * h5bp.com/t */

TR, img {Page-Break-Inside: Evite; }

img {max-width: 100%! IMPORTANTE; }

@Page {margem: 0,5cm; }

P, H2, H3 {Orphans: 3; viúvas: 3; }

H2, H3 {Page-Break-After: Evite; }

}

#starttimer {

Posição: herdar

Largura: 75px;

Altura: 20px;

topo: 35px;

Esquerda: 25px;

Cursor: Ponteiro

}

#stoptimer {

Posição: herdar;

Largura: 75px;

Altura: 20px;

topo: 10px;

Esquerda: 25px;

Cursor: Ponteiro

}

#CountDownCanvas {

Radio de fronteira: 25px;

Box-Shadow: 10px 10px 5px #888888;

}