Ejemplo de temporizador HTML5

Autor：Eve Cole Fecha de actualización：2025-05-09 23:00:03

Comentario: Después de escuchar el temporizador, puede pensar que solo se puede implementar en JS. De hecho, esta idea aún puede ser válida si no sabe que hay HTML5. Aquí hay una descripción de cómo se implementa el temporizador en HTML5. Los amigos interesados no deben perderse.

HTML:

<! Doctype html>

Elimine esto si usa el .htaccess ->

<title> Temporizador HTML5 para el saldo de trabajo de trabajo </title>

CountdownSeconds = 60;

var manio = nulo;

// Carga de ventana

función onloadwindow () {

acanvas = document.getElementById ("CountdownCanvas");

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

var canvastext = "Presione para iniciar ...";

var xPos = acanvas.width / 2;

var yPos = acanvas.height / 2;

context.font = "12pt Century Gothic";

context.fillstyle = "#008000;";

context.textalign = "Center";

context.TextBaseline = "Middle";

context.fillText (CanVastext, XPOS, YPOS);

}

función updateCanvas (thecontext, width, altura) {

if (CountDownSeconds <0) {

ClearInterval (mango);

manejar = nulo;

alerta ("¡Hey, el tiempo está arriba!");

regresar 0;

}

minstr = math.floor (CountDownSeconds / 60);

secstr = CountdownSeconds % 60;

if (minstr <10) {

minstr = "0" + minstr;

}

if (secstr <10) {

secstr = "0" + Secstr;

}

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

context.font = "24pt Century Gothic";

context.fillText (minstr + ":" + secstr, ancho / 2, altura / 2);

CountdownSeconds--;

}

function startWorkCountDown () {

if (handle! = null) {

ClearInterval (mango);

}

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);

}

function starTrestCountDown () {

if (handle! = null) {

ClearInterval (mango);

}

CountDownSeconds = 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>

</ablo>

<Body>

<div>

<h1> Temporizador de equilibrio entre el trabajo y la vida </h1>

</Header>

Elija el intervalo de trabajo:

minutos

Elija el intervalo de descanso:

minutos

Este es un lienzo

</able>

<botón>

Atarearse

</botón>

<botón>

Hacer una pausa

</botón>

<p>

&Copiar; Copyright reservado

</p>

</foTer>

</div>

</body>

</html>

CSS3:

* Html5 ✰ calderla

* Lo que sigue es el resultado de mucha investigación sobre el estilo de navegador cruzado.

* El crédito dejó en línea y muchas gracias a Nicolas Gallagher, Jonathan Neal,

* Kroc Camen y la comunidad y equipo de desarrollo de H5BP.

* Información detallada sobre este CSS: h5bp.com/css

* ==|== normalize ================================================================================

/* ======================================================================================.

Definiciones de visualización HTML5

==========================================================================================================================================================================================================================================================================================================.

Artículo, aparte, detalles, figption, figura, pie de página, encabezado, hgroup, navegue, sección {display: block; }

Encabezado {Shadow de texto: #220000 0px 0px 10px 10px 10px;}

audio, lienzo, video {display: inline-block; *Pantalla: en línea; *Zoom: 1; }

audio: no ([controls]) {display: none; }

[Hidden] {Display: None; }

/* ======================================================================================.

Base

* 1. Correcto de cambio de texto de texto extrañamente en IE6/7 cuando el tamaño de la fuente del cuerpo se establece usando unidades EM

* 2. Fuerza la barra de desplazamiento vertical en no II

* 3. Evite el tamaño de texto de iOS ajuste en el cambio de orientación del dispositivo, sin deshabilitar el zoom de usuario: h5bp.com/g

html {font-size: 100%; Overflow-y: desplazarse; -Webkit-text-size-ajust: 100%; -ms-text-size-ajust: 100%; }

cuerpo {margen: 0; tamaño de fuente: 24px; Línea-aguja: 1.231;}

cuerpo, botón, entrada, selección, TextARea {Font-Family: "Century Gothic"; Color:#008000}

* Eliminar la Shadow de texto en la selección Resalto: h5bp.com/i

* Estas declaraciones de selección deben estar separadas

* También: ¡rosa fuerte! (o personalizar el color de fondo para que coincida con su diseño)

::-Moz-Selection {Background: #Fe57a1; Color: #ffff; Shadow de texto: ninguno; }

:: selección {fondo: #fe57a1; Color: #fff; Shadow de texto: ninguno; }

/* ======================================================================================.

Campo de golf

A {color: #00e; }

A: visitado {color: #551a8b; }

A: Hover {Color: #06E; }

A: Focus {Buteline: delgada punteada; }

/ * Mejorar la legibilidad cuando se enfoca y se desplaza en todos los navegadores: h5bp.com/h */

a: hover, a: activo {esquema: 0; }

/* ======================================================================================.

Tipografía

Abbr [título] {Border-Bottom: 1px Dotted; }

B, fuerte {Font-Weight: Bold; }

blockquote {margen: 1em 40px; }

dfn {estilo fuente: cursiva; }

HR {Display: Block; Altura: 1px; borde: 0; border-top: 1px sólido #ccc; margen: 1em 0; relleno: 0; }

INS {fondo: color: #000; Decoración de texto: ninguna; }

Mark {fondo: #ff0; Color: #000; estilo de fuente: cursiva; Font-Weight: Bold; }

/ * Redeclare Familia de fuentes monoespace: h5bp.com/j */

Pre, Code, KBD, SAMP {Font-Family: monoespace, monoespace; _family-Family: 'Courier New', monoespace; tamaño de fuente: 1em; }

/ * Mejorar la legibilidad del texto pre-formateado en todos los navegadores */

pre {espacio blanco: pre; Espacio blanco: pre-envoltura; Word-Wrap: Break-Word; }

Q {citas: ninguno; }

P: Antes, P: After {content: ""; Contenido: Ninguno; }

pequeño {tamaño de fuente: 85%; }

/ * Posición de subíndice y contenido Superscript sin afectar la línea de línea: h5bp.com/k */

Sub, sup {tamaño de fuente: 75%; Línea de altura: 0; Posición: relativo; Align vertical: línea de base; }

sup {top: -0.5em; }

sub {fondo: -0.25em; }

/* ======================================================================================.

Liza

ul, ol {margen: 1em 0; relleno: 0 0 0 40px; }

dd {margen: 0 0 0 40px; }

Nav Ul, Nav Ol {List-Style: None; Imagen de estilo de lista: ninguna; margen: 0; relleno: 0; }

/* ======================================================================================.

Contenido integrado

* 1. Mejore la calidad de la imagen cuando se escala en IE7: h5bp.com/d

* 2. Retire el espacio entre imágenes y bordes en contenedores de imágenes: h5bp.com/e

img {border: 0; -modo de interpolación -m: bicubic; Align vertical: medio; }

* El desbordamiento correcto no oculto en IE9

svg: no (: root) {desbordamiento: oculto; }

/* ======================================================================================.

Figuras

Figura {margen: 0; }

/* ======================================================================================.

Formularios

forma {margen: 0; }

Fieldset {Border: 0; margen: 0; relleno: 0; }

/ * Indica que 'etiqueta' cambiará el enfoque al elemento de forma asociado */

etiqueta {cursor: pointer; }

* 1. Color correcto que no herede en IE6/7/8/9

* 2. Alineación correcta se muestra extrañamente en IE6/7

leyenda {border: 0; *margen -izquierda: -7px; relleno: 0; }

* 1. El tamaño correcto de la fuente no herede en todos los navegadores

* 2. Retire los márgenes en FF3/4 S5 Chrome

* 3. Definir visualización de alineación vertical consistente en todos los navegadores

botón, entrada, seleccionar, TextARea {Font-Size: 100%; margen: 0; Align vertical: línea de base; *alineado vertical: medio; }

* 1. Defina la altura de línea como normal para que coincida con FF3/4 (¡establecido usando! Importante en la hoja de estilo UA)

* 2. Espacio interno correcto que se muestra extrañamente en IE6/7

botón, entrada {Línea-aguja: normal; *desbordamiento: visible; }

* Reintroducir el espacio interno en la 'tabla' para evitar problemas de superposición y espacios en blanco en IE6/7

botón de tabla, entrada de tabla { *desbordamiento: auto; }

* 1. Mostrar cursor de mano para elementos de formulario que se puede hacer clic

* 2. Permitir el estilo de elementos de formulario en ios en iOS

botón, entrada [type = "botón"], input [type = "reset"], input [type = "enviar"] {cursor: pointer; -Webkit-apariencia: botón; }

* Dimensionamiento y apariencia de caja consistentes

input [type = "CheckBox"], input [type = "radio"] {box-sizing: border-box; }

entrada [type = "search"] {-webkit -apariencia: textfield; -Moz-box-siting: content-box; -webkit-box-singing: content-box; dimensionamiento de la caja: contenido-box; }

input [type = "search"] ::-WebKit-Search-Decoration {-webkit-apariencia: ninguno; }

* Retire el relleno interno y el borde en FF3/4: h5bp.com/l

Botón ::-Moz-Focus-Inner, Input ::-Moz-Focus-Inner {Border: 0; relleno: 0; }

* 1. Retire la barra de desplazamiento vertical predeterminado en IE6/7/8/9

* 2. Permitir solo un cambio de tamaño vertical

TextAREA {desbordamiento: auto; Align vertical: arriba; cambiar el tamaño: vertical; }

/ * Colores para la validez de la forma */

Entrada: Válido, TextARea: Válido {}

Entrada: Inválido, TextARea: inválido {Color de fondo: #F0DDDD; }

/* ======================================================================================.

Mesas

tabla {colapso de borde: colapso; espaciado fronterizo: 0; }

td {vertical-align: top; }

/* ==|== primary styles ==============================================================================

Autor:

/* == | = clases de ayuda de ayuda no semántica =====================================================================================================

Defina sus estilos antes de esta sección.

/ * Para reemplazo de imagen */

.ir {display: block; borde: 0; Text -Indent: -999em; desbordamiento: oculto; Color de fondo: transparente; Background-Repeat: sin repetición; text-align: izquierda; Dirección: LTR; }

.ir br {display: none; }

/ * Ocultar de los lectores de pantalla y los navegadores: h5bp.com/u */

.hidden {display: ninguno! IMPORTANTE; Visibilidad: oculto; }

/ * Ocultar solo visualmente, pero tenga disponible para listas de lectores de pantalla: h5bp.com/v */

.Visuallyhidden {border: 0; clip: rect (0 0 0 0); Altura: 1px; margen: -1px; desbordamiento: oculto; relleno: 0; Posición: Absoluto; Ancho: 1px; }

/ * Extiende la clase .visualhidden para permitir que el elemento se concentre cuando se navega a través del teclado: h5bp.com/p */

.visualHidden.cocusable: activo, .visualyhidden.focusable: focus {clip: auto; Altura: Auto; margen: 0; desbordamiento: visible; Posición: estática; Ancho: Auto; }

/ * Se esconde visualmente y de lectores de pantalla, pero mantenga el diseño */

.invisible {visibilidad: oculto; }

/ * Contener flotadores: h5bp.com/q */

.clearfix: antes, .clearfix: después de {content: ""; Pantalla: tabla; }

.CLearFix: After {clare: ambos; }

.clarfix {zoom: 1; }

/* == | == Consultas de medios =============================================================================================================================================

Consultas de medios de marcador de posición para el diseño receptivo.

Estos anulan los estilos primarios ('móvil primero')

Modificar como lo requiere contenido.

@Media Only Screen y (Min-Width: 480px) {

/ * Ajustes de estilo para los vistas 480px y vete aquí */

}

@Media Solo pantalla y (Min-Width: 768px) {

/ * Ajustes de estilo para las vistas 768px y vete aquí */

}

/* == | == Imprima estilos =========================================================================================================================================================================================================================================================================================== ¡

Estilos de impresión.

Entrada para evitar la conexión HTTP requerida: h5bp.com/r

@Media Print {

* {fondo: transparente! importante; Color: Negro! Importante; Shadow de texto: ¡Ninguno! Importante; Filtro: ¡Ninguno! IMPORTANTE; -ms-filter: ninguno! importante; }/ * Impresiones negras más rápido: h5bp.com/s */

A, A: Visited {Text-Decoration: Underline; }

a [href]: después de {content: "(" attr (href) ")"; }

abbr [title]: después de {content: "(" attr (title) ")"; }

.ir a: después, a [href^= "javaScript:"]: después, a [href^= "#"]: After {content: ""; }/ * No muestre enlaces para imágenes, o JavaScript/Enlaces internos */

pre, blockquote {borde: 1px sólido #999; Page-Break-Inside: Evite; }

thead {Display: Table-Header-Group; }/ * h5bp.com/t */

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

IMG {WAIL MAX: 100%! IMPORTANTE; }

@Page {margen: 0.5cm; }

p, h2, h3 {huérfanos: 3; viudas: 3; }

H2, H3 {Page-Break-después: evitar; }

}

#StartTimer {

Posición: heredar

Ancho: 75px;

Altura: 20px;

Arriba: 35px;

Izquierda: 25px;

Cursor: puntero

}

#stoptimer {

Posición: heredar;

Ancho: 75px;

Altura: 20px;

arriba: 10px;

Izquierda: 25px;

Cursor: puntero

}

#CountdownCanvas {

Border-Radius: 25px;

Shadow de caja: 10px 10px 5px #888888;

}