Maison >interface Web >Tutoriel H5 >Démonstration du code H5 pour créer une minuterie

Démonstration du code H5 pour créer une minuterie

Y2Joriginal: 2017-05-23 13:59:164848parcourir

Après avoir entendu parler des minuteries, vous pensez peut-être qu'elles ne peuvent être implémentées qu'en js. En fait, cette idée peut toujours être vraie si vous ne savez pas qu'il existe html5. Ce qui suit s'adresse à tout le monde. Présentation de la façon d'implémenter des minuteries en HTML5. Les amis intéressés ne devraient pas le manquer. html :

Le code est le suivant :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>HTML5 Timer for work-relax balance</title> 
<meta name="description" content=""> 
<meta name="author" content="kevin"> 
<meta name="viewport" content="width=device-width; initial-scale=1.0"> 
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> 
<link rel="shortcut icon" href="/favicon.ico"/> 
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<script> 
countDownSeconds = 60; 
var handle = null; 
//window load 
function onLoadWindow() { 
aCanvas = document.getElementById("countdownCanvas"); context = aCanvas.getContext("2d"); 
var canvasText = "Press to Start..."; 
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); 
} 
function updateCanvas(theContext, width, height) { 
if (countDownSeconds < 0) { 
clearInterval(handle); 
handle = null; 
alert("hey, time is up!"); 
return
 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, width, height); 
context.font = "24pt Century Gothic"; 
context.fillText(minStr + " : " + secStr, width / 2, height / 2); 
countDownSeconds--; 
} 
function startWorkCountDown() { 
if (handle != null) { 
clearInterval(handle); 
} 
countDownSeconds = document.getElementById("workIntervalInput").value * 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(handle); 
} 
countDownSeconds = document.getElementById("restIntervalInput").value * 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 onload="onLoadWindow()"> 
<p align="center"> 
<header> 
<h1>work-life balance timer</h1> 
</header> 
Please choose the work interval: 
<input name="workIntervalInput" id="workIntervalInput" type="number" value="25" min="15" max="45" step="5"/> 
minutes 
Please choose the rest interval: 
<input name="restIntervalInput" id="restIntervalInput" type="number" value="5" min="3" max="10" step="1"/> 
minutes 
<canvas id="countdownCanvas" width="
300
" height="50" style="border:2px solid black"> 
This is a canvas 
</canvas> 
<button 
onclick
="startWorkCountDown()"> 
Work Hard 
</button> 
<button onclick="startRestCountDown()"> 
Take A 
Break
 
</button> 
<footer> 
<p> 
&
copy
; Copyright Reserved 
</p> 
</footer> 
</p> 
</body> 
</html>

css3 :

Le code est le suivant :

/*
* HTML5 ✰ Boilerplate
*
* Ce qui suit est le résultat de nombreuses recherches sur le style multi-navigateurs.
* Crédit à gauche en ligne et un grand merci à Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, ainsi qu'à la communauté et à l'équipe de développement H5BP.
*
* Informations détaillées sur ce CSS : h5bp.com/css
*
* ==|== normaliser ================= ==========================================
*/

/* ============================================== ===============================
Définitions d'affichage HTML5
========== =================================================== ============== */
article, aparté, détails, figcaption, figure, pied de page, en-tête, hgroup, nav, section { display: block; }
en-tête {text-shadow : #220000 0px 0px 10px 10px ;}
audio, toile, vidéo { display : inline-block ; *affichage : en ligne ; *zoom : 1 ; }
audio:not([controls]) { display: none; }
[caché] { affichage : aucun ; }
/* ============================================ =================================
Base
========== =================================================== ============== */
/*
* 1. Corriger le redimensionnement du texte de manière étrange dans IE6/7 lorsque la taille de la police du corps est définie en utilisant les unités em
* 2 . Forcer la barre de défilement verticale dans les environnements non-IE
* 3. Empêcher l'ajustement de la taille du texte iOS lors du changement d'orientation de l'appareil, sans désactiver le zoom de l'utilisateur : h5bp.com/g
*/
html { font-size : 100 % ; overflow-y : défilement ; -webkit-text-size-adjust : 100 % ; -ms-text-size-adjust : 100 % ; }
corps { marge : 0 ; taille de police : 24 px ; hauteur de ligne : 1,231 ;}
corps, bouton, saisie, sélection, zone de texte {font-family:"Century Gothic" ; color:#008000}
/*
* Supprimez l'ombre du texte dans la sélection en surbrillance : h5bp.com/i
* Ces déclarations de sélection doivent être séparées
* Aussi : rose vif ! (ou personnalisez la couleur d'arrière-plan en fonction de votre design)
*/
::-moz-selection { background: #fe57a1; couleur : #fff ; texte-ombre : aucun ; }
::sélection { background: #fe57a1; couleur : #fff ; texte-ombre : aucun ; }

/* ========================================= ====================================
Liens
======= =================================================== ================= */
a { couleur : #00e ; }
a:visité { couleur: #551a8b; }
a:hover { couleur: #06e; }
a:focus { contour : pointillé fin ; }
/* Améliorer la lisibilité lors du focus et du survol dans tous les navigateurs : h5bp.com/h */
a:hover, a:active { outline: 0; }

/* ========================================= ====================================
Typographie
======= =================================================== ================= */
abbr[title] { border-bottom : 1px pointillé ; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style : italic ; }
hr { display: block; hauteur : 1px ; bordure : 0 ; bordure supérieure : 1px solide #ccc ; marge : 1em 0 ; remplissage : 0 ; }
ins { arrière-plan : #ff9; couleur : #000 ; décoration de texte : aucune ; }
marque { background: #ff0; couleur : #000 ; style de police : italique ; poids de la police : gras ; }
/* Redéclarez la famille de polices monospace : h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family : 'courrier new', monospace ; taille de police : 1em ; }
/* Améliorer la lisibilité du texte préformaté dans tous les navigateurs */
pre { white-space: pre; espace blanc : pré-enveloppement ; retour à la ligne : coupure de mot ; }
q { guillemets : aucun ; }
q:avant, q:après { content: ""; contenu : aucun ; }
petit { taille de police : 85 % ; }
/* Positionner le contenu en indice et en exposant sans affecter la hauteur de ligne : h5bp.com/k */
sub, sup { font-size : 75% ; hauteur de ligne : 0 ; position : relative ; alignement vertical : ligne de base ; }
sup { haut : -0,5em ; }
sub { bas : -0,25em ; }

/* ========================================= ====================================
Listes
======= =================================================== ================= */
ul, ol { margin: 1em 0; remplissage : 0 0 0 40px ; }
jj { marge : 0 0 0 40px ; }
nav ul, nav ol { list-style : aucun ; image de style de liste : aucune ; marge : 0 ; remplissage : 0 ; }

/* ========================================= ====================================
Contenu intégré
====== =================================================== ================== */
/*
* 1. Améliorer la qualité de l'image lors de la mise à l'échelle dans IE7 : h5bp.com/d
* 2. Supprimez l'espace entre les images et les bordures sur les conteneurs d'images : h5bp.com/e
*/
img { border: 0; -ms-interpolation-mode : bicubique ; alignement vertical : milieu ; }
/*
* Corriger le débordement non masqué dans IE9
*/
svg:not(:root) { overflow: Hidden; }

/* ========================================= ====================================
Chiffres
======= =================================================== ================= */
chiffre { marge : 0 ; }

/* ========================================= ====================================
Formulaires
======= =================================================== ================= */
form { margin: 0; }
fieldset { border: 0; marge : 0 ; remplissage : 0 ; }
/* Indiquez que 'label' déplacera le focus sur l'élément de formulaire associé */
label { Cursor: pointer; }
/*
* 1. Corriger la couleur n'héritant pas dans IE6/7/8/9
* 2. Corriger l'alignement affiché bizarrement dans IE6/7
*/
légende { border : 0 ; *marge gauche : -7px ; remplissage : 0 ; }
/*
* 1. Corriger la taille de police qui n'hérite pas dans tous les navigateurs
* 2. Supprimer les marges dans FF3/4 S5 Chrome
* 3. Définir un affichage d'alignement vertical cohérent dans tous les navigateurs
*/
bouton, saisie, sélection, zone de texte { taille de police : 100 % ; marge : 0 ; alignement vertical : ligne de base ; *alignement vertical : milieu ; }
/*
* 1. Définissez la hauteur de ligne comme d'habitude pour correspondre à FF3/4 (définie en utilisant !important dans la feuille de style UA)
* 2. Corrigez l'espacement intérieur affiché bizarrement dans IE6/7
*/
bouton, entrée { line-height : normal ; *débordement : visible ; }
/*
* Réintroduire l'espacement intérieur dans 'table' pour éviter les problèmes de chevauchement et d'espaces dans IE6/7
*/
bouton table, entrée table { *overflow: auto; }
/*
* 1. Afficher le curseur en forme de main pour les éléments de formulaire cliquables
* 2. Autoriser le style des éléments de formulaire cliquables dans iOS
*/
bouton, input[type="button" ], input[type="reset"], input[type="submit"] { curseur : pointeur ; -apparence du webkit : bouton ; }
/*
* Dimensionnement et apparence de boîte cohérents
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-apparence : textfield ; -moz-box-sizing : contenu-box ; -webkit-box-sizing : contenu-box ; dimensionnement de la boîte : contenu-box ; }
input[type="search"]::-webkit-search-decoration { -webkit-apparence : aucun ; }
/*
* Supprimez le rembourrage intérieur et la bordure dans FF3/4 : h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus -intérieur { bordure : 0 ; remplissage : 0 ; }
/*
* 1. Supprimer la barre de défilement verticale par défaut dans IE6/7/8/9
* 2. Autoriser uniquement le redimensionnement vertical
*/
textarea { overflow: auto; alignement vertical : haut ; redimensionner : vertical ; }
/* Couleurs pour la validité du formulaire */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }

/* ========================================= ====================================
Tableaux
======= =================================================== ================= */
table { border-collapse:effondrement; espacement des bordures : 0 ; }
td { vertical-align: top; }

/* ==|== styles primaires ================================== ===================
Auteur :
======================== =================================================== = */

/* ==|== classes d'assistance non sémantiques ============================== ===========
Veuillez définir vos styles avant cette section.
=============================================== =========================== */
/* Pour le remplacement d'image */
.ir { display: block; bordure : 0 ; retrait du texte : -999em ; débordement : caché ; couleur d'arrière-plan : transparent ; répétition d'arrière-plan : pas de répétition ; aligner le texte : gauche ; sens : litres ; }
.ir br { affichage : aucun ; }
/* Masquer des lecteurs d'écran et des navigateurs : h5bp.com/u */
.hidden { display: none !important; visibilité : cachée ; }
/* Masquer uniquement visuellement, mais le rendre disponible pour les lecteurs d'écran : h5bp.com/v */
.visuallyhidden { border: 0; clip : rect(0 0 0 0); hauteur : 1px ; marge : -1px ; débordement : caché ; remplissage : 0 ; position : absolue ; largeur : 1px ; }
/* Étend la classe .visuallyhidden pour permettre à l'élément d'être focalisable lors de la navigation via le clavier : h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip : automatique ; hauteur : automatique ; marge : 0 ; débordement : visible ; position : statique ; largeur : automatique ; }
/* Masquer visuellement et aux lecteurs d'écran, mais conserver la mise en page */
.invisible { visibilité: caché; }
/* Contient des flottants : h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; affichage : tableau ; }
.clearfix:after { clear: les deux; }
.clearfix { zoom : 1 ; }

/* ==|== requêtes média ================================== ====================
Requêtes multimédias PLACEHOLDER pour une conception réactive.
Ceux-ci remplacent les styles principaux (« mobile first »).
Modifiez selon les besoins du contenu.
=============================================== =========================== */
@media uniquement écran et (largeur min : 480px) {
/* Ajustements de style pour les fenêtres de 480 px et plus, cliquez ici */
}
@media uniquement écran et (largeur minimale : 768 px) {
/* Ajustements de style pour les fenêtres de 768 px et plus, cliquez ici */
}

/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */

@media print { 
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ 
a, a:visited { text-decoration: underline; } 
a[href]:after { content: " (" attr(href) ")"; } 
abbr[title]:after { content: " (" attr(title) ")"; } 
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don&#39;t show links for images, or javascript/internal links */ 
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 
thead { display: table-header-group; } /* h5bp.com/t */ 
tr, img { page-break-inside: avoid; } 
img { max-width: 100% !important; } 
@page { margin: 0.5cm; } 
p, h2, h3 { orphans: 3; widows: 3; } 
h2, h3 { page-break-after: avoid; } 
} 
#startTimer{ 
position:inherit 
width:75px; 
height:20px; 
top:35px; 
left:25px; 
cursor:pointer 
} 
#stopTimer{ 
position:inherit; 
width:75px; 
height:20px; 
top:10px; 
left:25px; 
cursor:pointer 
} 
#countdownCanvas{ 
border-radius:25px; 
box-shadow:10px 10px 5px #888888; 
}

【相关推荐】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la différence entre H5 et HTML4Article suivant：Explication détaillée de la différence entre H5 et HTML4

Articles Liés

Voir plus