Commentaire: Après avoir entendu le minuteur, vous pouvez penser qu'il ne peut être mis en œuvre que dans JS. En fait, cette idée peut toujours être valide si vous ne savez pas qu'il y a HTML5. Voici une description de la façon dont le temporisateur est implémenté dans HTML5. Les amis intéressés ne devraient pas le manquer.
HTML:<! Doctype html>
<html lang = "en">
<adal>
<meta charset = "utf-8">
<! - Forcer toujours le dernier moteur de rendu IE (même dans Intranet) et Chrome Frame
Supprimez cela si vous utilisez le .htaccess ->
<meta http-equiv = "x-ua compatible" contenu = "ie = edge, chrome = 1">
<Title> Html5 Timer pour le solde de travail-lilaxe </taptère>
<meta content = "">
<meta content = "kevin">
<meta contenu = "width = width-width; initial-scale = 1,0">
<! - Remplacez Favicon.ico & Apple-Touch-icon.png à la racine de votre domaine et supprimez ces références ->
<link href = "/ favicon.ico" />
<link href = "/ apple-touch-icon.png" />
<link type = "text / css" href = "css / style.css">
<cript>
Countdownseconds = 60;
var handle = null;
// charge de fenêtre
fonction onloadwindow () {
acanvas = document.getElementById ("CountdownCanvas");
context = acanvas.getContext ("2d");
var canvastext = "Appuyez pour commencer ...";
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);
}
fonction updatecanvas (thecontext, largeur, hauteur) {
if (Countdownseconds <0) {
ClearInterval (manche);
poignée = null;
alert ("Hé, le temps est écoulé!");
retour 0;
}
Minstr = math.floor (compte à rebours / 60);
SecStr = compte à rebours de secondes% 60;
if (mistr <10) {
Minstr = "0" + Minstr;
}
if (secStr <10) {
SecStr = "0" + Secstr;
}
context.ClearRect (0, 0, largeur, hauteur);
context.font = "24pt Century Gothic";
context.fillText (Minstr + ":" + Secstr, largeur / 2, hauteur / 2);
Compte à rebours de secondes -;
}
fonction startworkCountDown () {
if (handle! = null) {
ClearInterval (manche);
}
CountdownSeconds = document.getElementById ("workIntervalinput"). Valeur * 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);
}
fonction starTrestCountDown () {
if (handle! = null) {
ClearInterval (manche);
}
CountdownSeconds = document.getElementById ("Restintervalinput"). Valeur * 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);
}
</cript>
</ head>
<body>
<div>
<dique>
<H1> Timer de l'équilibre du travail-vie </h1>
</-header>
Veuillez choisir l'intervalle de travail:
<input type = "nombre" value = "25" min = "15" max = "45" Step = "5" />
minutes
Veuillez choisir l'intervalle de repos:
<input type = "nombre" value = "5" min = "3" max = "10" Step = "1" />
minutes
<lebvas>
C'est une toile
</ canvas>
<button>
Travailler dur
</ bouton>
<button>
Faire une pause
</ bouton>
<foomer>
<p>
&copie; Copyright réservé
</p>
</fooder>
</div>
</docy>
</html>
CSS3:
/ *
* HTML5 ✰ Plate-plaque
*
* Ce qui suit est le résultat de nombreuses recherches sur le style de croisement.
* Crédit laissé en ligne et grand merci à Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, et la communauté et l'équipe H5BP Dev.
*
* Informations détaillées sur ce CSS: h5bp.com/css
*
* ==|== normalize ================================================================================
* /
/ * =============================================================================================================================.
Définitions d'affichage HTML5
=====================================================================================================.
Article, à part les détails, FigCaption, figure, pied de page, en-tête, hgroup, nav, section {affichage: bloc; }
En-tête {Text-shadow: # 220000 0px 0px 10px 10px 10px;}
Audio, toile, vidéo {affichage: bloc en ligne; * Affichage: en ligne; * Zoom: 1; }
Audio: pas ([contrôles]) {affichage: aucun; }
[Hidden] {Affichage: aucun; }
/ * =============================================================================================================================.
Base
=====================================================================================================.
/ *
* 1. Le redimensionnement du texte correct est étrangement dans IE6 / 7 lorsque la taille de la police du corps est définie à l'aide d'unités EM
* 2. Forcer la barre de défilement vertical dans les non-IE
* 3. Empêchez le réglage de la taille du texte iOS sur la modification de l'orientation de l'appareil, sans désactiver le zoom de l'utilisateur: h5bp.com/g
* /
HTML {taille de police: 100%; débordement-y: faites défiler; -webkit-text-size-ajustement: 100%; -ms-text-size-ajustement: 100%; }
corps {marge: 0; taille de police: 24px; hauteur de ligne: 1.231;}
Corps, bouton, entrée, sélection, TextArea {Font-Family: "Century Gothic"; Couleur: # 008000}
/ *
* Supprimer le Text-Shadow dans Sélection Highlight: h5bp.com/i
* Ces déclarations de sélection doivent être séparées
* Aussi: rose vif! (ou personnaliser la couleur d'arrière-plan pour correspondre à votre conception)
* /
:: - Moz-Selection {Background: # fe57a1; Couleur: #ffff; Text-shadow: aucun; }
:: Sélection {Background: # fe57a1; Couleur: #FFF; Text-shadow: aucun; }
/ * =============================================================================================================================.
Links
=====================================================================================================.
a {couleur: # 00E; }
A: Visité {Color: # 551A8B; }
A: Hover {Color: # 06E; }
R: Focus {contour: mince en pointillé; }
/ * Améliorer la lisibilité lorsqu'il est concentré et plané dans tous les navigateurs: h5bp.com/h * /
A: Hover, A: Active {Outline: 0; }
/ * =============================================================================================================================.
Typographie
=====================================================================================================.
abbr [title] {border-bottom: 1px pointillé; }
B, fort {Font-Weight: Bold; }
BlockQuote {margin: 1em 40px; }
dfn {style de police: italique; }
hr {affichage: bloc; hauteur: 1px; bordure: 0; Border-top: 1px solide #ccc; marge: 1em 0; rembourrage: 0; }
ins {fond: couleur: # 000; Décoration du texte: aucune; }
Mark {Background: # ff0; Couleur: # 000; Style de police: italique; Police-poids: Bold; }
/ * REDECLARE FAMILLE DE FONT MONOSPACE: h5bp.com/j * /
pre, code, kbd, samp {font-family: monospace, monospace; _Font-Family: «Courier New», Monospace; taille de police: 1em; }
/ * Améliorer la lisibilité du texte pré-format dans tous les navigateurs * /
Pre {White-espace: pre; Espace blanc: pré-wrap; Word-Wrap: Break-Word; }
Q {Citations: aucun; }
Q: Avant, Q: After {Content: ""; Contenu: aucun; }
petite {taille de police: 85%; }
/ * Positionner les indices et le contenu en exposant sans affecter la hauteur de ligne: h5bp.com/k * /
sub, sup {taille de police: 75%; hauteur de ligne: 0; Position: relative; Adigne vertical: ligne de base; }
sup {top: -0.5em; }
sub {inférieur: -0.25em; }
/ * =============================================================================================================================.
Listes
=====================================================================================================.
ul, ol {marge: 1em 0; rembourrage: 0 0 0 40px; }
dd {margin: 0 0 0 40px; }
nav ul, nav ol {list-style: aucun; Image de style liste: aucun; marge: 0; rembourrage: 0; }
/ * =============================================================================================================================.
Contenu intégré
=====================================================================================================.
/ *
* 1. Améliorer la qualité de l'image lorsqu'elle est mise à l'échelle dans IE7: h5bp.com/D
* 2. Supprimez l'écart entre les images et les bordures sur les conteneurs d'image: h5bp.com/E
* /
img {border: 0; -MS-interpolation-mode: Bicubic; Adigne vertical: milieu; }
/ *
* Débordement correct non caché dans IE9
* /
svg: pas (: root) {overflow: Hidden; }
/ * =============================================================================================================================.
Chiffres
=====================================================================================================.
Figure {marge: 0; }
/ * =============================================================================================================================.
Formes
=====================================================================================================.
formulaire {margin: 0; }
Fieldset {Border: 0; marge: 0; rembourrage: 0; }
/ * Indiquez que «Label» se concentrera sur l'élément de forme associé * /
étiquette {curseur: pointeur; }
/ *
* 1. La couleur correcte n'est pas héritée dans IE6 / 7/8/9
* 2. Alignement correct affiché étrangement dans IE6 / 7
* /
Légende {Border: 0; * marge-gauche: -7px; rembourrage: 0; }
/ *
* 1. Correction de la taille de police qui n'est pas héritée dans tous les navigateurs
* 2. Retirez les marges dans le chrome FF3 / 4 S5
* 3. Définir l'affichage d'alignement vertical cohérent dans tous les navigateurs
* /
bouton, entrée, sélection, textarea {Font-Size: 100%; marge: 0; Adigne vertical: ligne de base; * Adigne vertical: milieu; }
/ *
* 1. Définissez la hauteur de ligne comme d'habitude pour correspondre à FF3 / 4 (définir en utilisant! Important dans la feuille de style UA)
* 2. Espacement intérieur correct affiché étrangement dans IE6 / 7
* /
Bouton, entrée {HEIGHT DE LINE: NORMAL; * débordement: visible; }
/ *
* Réintroduire l'espacement intérieur dans «table» pour éviter les problèmes de chevauchement et d'espace blanc dans IE6 / 7
* /
Bouton de table, entrée de table {* débordement: auto; }
/ *
* 1. Afficher le curseur à main pour les éléments de formulaire cliquables
* 2. Autoriser le style des éléments de formulaire cliquables dans iOS
* /
bouton, entrée [type = "bouton"], entrée [type = "reset"], entrée [type = "soumettre"] {curseur: pointeur; -Webkit-Apparent: Button; }
/ *
* Dimension et apparence cohérentes
* /
Input [type = "Checkbox"], entrée [type = "radio"] {Box-Size: Border-Box; }
Input [type = "search"] {-webkit-apparence: textField; -moz-box-size: contenu-box; -Webkit-box-size: contenu-box; Dimensionnement en boîte: contenu-box; }
Input [type = "search"] :: - webkit-search-decoration {-webkit-apparenance: aucun; }
/ *
* Retirez le rembourrage intérieur et la bordure en FF3 / 4: h5bp.com/L
* /
Button :: - moz-focus-inner, entrée :: - moz-focus-inner {border: 0; rembourrage: 0; }
/ *
* 1. Retirer la barre de défilement verticale par défaut dans IE6 / 7/8/9
* 2. Autoriser uniquement le redimensionnement vertical
* /
TextArea {Overflow: Auto; Aligne verticale: haut; redimensionner: vertical; }
/ * Couleurs pour la validité du formulaire * /
Entrée: valide, TextArea: valide {}
Entrée: invalide, textarea: invalid {background-Color: # f0dddd; }
/ * =============================================================================================================================.
Tables
=====================================================================================================.
Tableau {Border-Collapse: s'effondrer; Espacement des bordures: 0; }
TD {Vertical-Align: Top; }
/* ==|== primary styles ==============================================================================
Auteur:
=====================================================================================================.
/* ==|= non-semantic helper classes ===============================================================
Veuillez définir vos styles avant cette section.
=====================================================================================================.
/ * Pour le remplacement de l'image * /
.ir {affichage: bloc; bordure: 0; Texte-indent: -999em; débordement: caché; Color en arrière-plan: transparent; République de fond: sans répétition; Texte-aligne: gauche; Direction: LTR; }
.ir br {affichage: aucun; }
/ * Masquer à la fois à ScreenReders et aux navigateurs: h5bp.com/u * /
.HIDDEN {Affichage: aucun! IMPORTANT; Visibilité: cachée; }
/ * Masquez uniquement visuellement, mais je l'ai disponible pour ScreenReders: h5bp.com/v * /
.VisuallyHidden {Border: 0; Clip: rect (0 0 0 0); hauteur: 1px; marge: -1px; débordement: caché; rembourrage: 0; Position: absolue; Largeur: 1px; }
/ * Étend la classe .VisuallyHidden pour permettre à l'élément d'être focalisé lorsqu'il est navigué via le clavier: h5bp.com/p * /
.Visuellementhidden.focusable: actif, .VisuallyHidden.focusable: focus {clip: auto; Hauteur: Auto; marge: 0; débordement: visible; Position: statique; Largeur: Auto; }
/ * Se cacher visuellement et à ScreenReders, mais maintenez la disposition * /
.Invisible {Visibilité: Hidden; }
/ * Contient des flotteurs: h5bp.com/q * /
.ClearFix: avant, .ClearFix: après {contenu: ""; Affichage: table; }
.ClearFix: après {Clear: les deux; }
.ClearFix {Zoom: 1; }
/* ==|== media queries ===================================================================================
Requêtes multimédias pour l'espace pour la conception réactive.
Ceux-ci remplacent les styles principaux («mobiles d'abord»)
Modifier comme le contenu nécessite.
=====================================================================================================.
@media uniquement écran et (largeur min: 480px) {
/ * Ajustements de style pour les fenêtres 480px et plus allez ici * /
}
@media uniquement écran et (largeur min: 768px) {
/ * Ajustements de style pour les fenêtres 768px et plus allez ici * /
}
/ * == | == Styles d'impression ===================================================================================================================================================================================================================================.
Styles d'impression.
Innécalisé pour éviter la connexion HTTP requise: h5bp.com/R
=====================================================================================================.
@media print {
* {Background: Transparent! IMPORTANT; Couleur: noir! IMPORTANT; Text-shadow: Aucun! IMPORTANT; Filtre: Aucun! IMPORTANT; -m-filtre: Aucun! IMPORTANT; } / * Black imprime plus rapidement: h5bp.com/s * /
A, A: Visité {Text-Decoration: soulignement; }
a [href]: après {contenu: "(" att (href) ")"; }
abbr [title]: après {contenu: "(" attr (title) ")"; }
.ir a: after, a [href ^ = "javascript:"]: after, a [href ^ = "#"]: après {contenu: ""; } / * Ne montrez pas de liens pour les images, ou javascript / liens internes * /
pre, blockquote {border: 1px solide # 999; PAGE-CUPE-ISDIDE: Évitez; }
thead {display: table-header-group; } / * h5bp.com/t * /
tr, img {page-brise-inside: éviter; }
IMG {max-largeur: 100%! IMPORTANT; }
@Page {margin: 0,5 cm; }
P, H2, H3 {Orphans: 3; veuves: 3; }
H2, H3 {Page-Break-après: éviter; }
}
#starttimer {
Position: hériter
Largeur: 75px;
hauteur: 20px;
En haut: 35px;
Gauche: 25px;
curseur: pointeur
}
#Stoptimer {
Position: hériter;
Largeur: 75px;
hauteur: 20px;
En haut: 10px;
Gauche: 25px;
curseur: pointeur
}
#countDownCanvas {
Border-Radius: 25px;
Box-Shadow: 10px 10px 5px # 888888;
}