Minuterie HTML5 petit exemple_html5 compétences du didacticiel

html :

复制代码

代码如下 :

<script> <br />countDownSeconds = 60 ; <br />var handle = null; <br />//window load <br />function onLoadWindow() { <br />aCanvas = document.getElementById("countdownCanvas"); <br />context = aCanvas.getContext("2d"); <br />var canvasText = "Appuyez pour démarrer..."; <br />var xPos = aCanvas.width / 2; <br />var yPos = aCanvas.height / 2; <br />context.font = "Gothique du siècle 12pt" ; <br />context.fillStyle = "#008000;"; <br />context.textAlign = "center"; <br />context.textBaseline = "milieu"; <br />context.fillText(canvasText, xPos, yPos); <br />} <br />function updateCanvas(theContext, width, height) { <br />if (countDownSeconds < 0) { <br />clearInterval(handle); <br />poignée = null ; <br />alert("hé, le temps est écoulé !"); <br />retourne 0 ; <br />} <br />minStr = Math.floor(countDownSeconds / 60); <br />secStr = countDownSeconds % 60 ; <br />if (minStr < 10) { <br />minStr = "0" minStr; <br />} <br />if (secStr < 10) { <br />secStr = "0" secStr; <br />} <br />context.clearRect(0, 0, width, height); <br />context.font = "Gothique du siècle 24pt"; <br />context.fillText(minStr " : " secStr, width / 2, height / 2); <br />countDownSeconds--; <br />} <br />function startWorkCountDown() { <br />if (handle != null) { <br />clearInterval(handle); <br />} <br />countDownSeconds = document.getElementById("workIntervalInput").value * 60; <br />timeDisplayCanvas = document.getElementById("countdownCanvas"); <br />timeDisplayContext2D = timeDisplayCanvas.getContext("2d"); <br />updateCanvas(timeDisplayContext2D, timeDisplayCanvas.width, timeDisplayCanvas.height); <br />handle = setInterval(function() { <br />updateCanvas(timeDisplayContext2D, timeDisplayCanvas.width, timeDisplayCanvas.height); <br />}, 1000); <br />} <br />function startRestCountDown() { <br />if (handle != null) { <br />clearInterval(handle); <br />} <br />countDownSeconds = document.getElementById("restIntervalInput").value * 60; <br />timeDisplayCanvas = document.getElementById("countdownCanvas"); <br />timeDisplayContext2D = timeDisplayCanvas.getContext("2d"); <br />updateCanvas(timeDisplayContext2D, timeDisplayCanvas.width, timeDisplayCanvas.height); <br />handle = setInterval(function() { <br />updateCanvas(timeDisplayContext2D, timeDisplayCanvas.width, timeDisplayCanvas.height); <br />}, 1000); <br />} <br /></script>
ête>

minuterie d'équilibre travail-vie personnelle

ête>
Veuillez choisir l'intervalle de travail :

minutes

Veuillez choisir l'intervalle de repos :

minutes



Ceci est une toile




Travailler dur


Faites une pause

&copie; Copyright réservé

css3 :

Copier le code

Le code est le suivant :

/*
* HTML5 ✰ Boilerplate
*
* Ce qui suit est le résultat de nombreuses recherches sur le style multi-navigateurs.
* Crédit laissé 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 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
======= =================================================== ================= */
figure { marge : 0 ; }

/* ================================================= =============================
Formulaires
============== =================================================== ========== */
formulaire { marge : 0 ; }
fieldset { border: 0; marge : 0 ; remplissage : 0 ; }
/* Indique 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 : boîte de contenu ; 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 écran uniquement 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 */
}

/* ==|== styles d'impression ================================== =====================
Styles d'impression.
必要な HTTP 接続を回避するためにインライン化: h5bp.com/r
=================================== ======================================= */
@media print {
* { 背景: 透明 !重要;色: 黒!重要; text-shadow: なし !重要;フィルタ:なし!重要; -ms-filter: なし !重要; } /* 黒の方が速く印刷されます: 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: ""; } /* 画像のリンク、または JavaScript/内部リンクを表示しません */
pre, blockquote { border: 1px Solid #999; page-break-inside: 回避します。 }
thead { 表示: テーブルヘッダーグループ; } /* h5bp.com/t */
tr, img { page-break-inside: 回避; }
img { max-width: 100% !重要; }
@page { 余白: 0.5cm; }
p, h2, h3 { 孤児: 3;未亡人: 3人。 }
h2, h3 {改ページ後: 回避; }
}
#startTimer{
position:inherit
width:75px;
高さ:20px;
トップ:35px;
左:25px;
cursor:pointer
}
#stopTimer{
position:inherit;
幅:75ピクセル;
高さ:20px;
トップ:10px;
左:25px;
cursor:pointer
}
#countdownCanvas{
border-radius:25px;
box-shadow:10px 10px 5px #888888;
}