Démonstration du code H5 pour créer une minuterie-Tutoriel H5-php.cn

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>

Copier après la connexion

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

Copier après la connexion

【相关推荐】

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!