Heim  >  Artikel  >  Web-Frontend  >  HTML5-Timer, kleine Beispiele_HTML5-Tutorial-Fähigkeiten

HTML5-Timer, kleine Beispiele_HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:48:521555Durchsuche

html:

复制代码
代码如下:







HTML5-Timer für die Balance zwischen Arbeit und Entspannung







<script> <br>countDownSeconds = 60; <br>var handle = null; <br>//Fenster laden <br>function onLoadWindow() { <br>aCanvas = document.getElementById("countdownCanvas"); <br>context = aCanvas.getContext("2d"); <br>var canvasText = „Zum Starten drücken …“; <br>var xPos = aCanvas.width / 2; <br>var yPos = aCanvas.height / 2; <br>context.font = "12pt Century Gothic"; <br>context.fillStyle = "#008000;"; <br>context.textAlign = "center"; <br>context.textBaseline = "middle"; <br>context.fillText(canvasText, xPos, yPos); <br>} <br>function updateCanvas(theContext, width, height) { <br>if (countDownSeconds < 0) { <br />clearInterval(handle); <br />handle = null; <br />alert("Hey, die Zeit ist abgelaufen!"); <br />Rückgabe 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 = "24pt Century Gothic"; <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>




Work-Life-Balance-Timer



Bitte wählen Sie das Arbeitsintervall:

Minuten

Bitte wählen Sie das Ruheintervall:

Minuten



Dies ist eine Leinwand







© Urheberrecht vorbehalten







css3:

Code kopieren
Der Code lautet wie folgt:

/*
* HTML5 ✰ Boilerplate
*
* Was folgt, ist das Ergebnis umfangreicher Forschung zum browserübergreifenden Styling.
* Credit links inline und großes Dankeschön an Nicolas Gallagher, Jonathan Neal,
* Kroc Camen und die H5BP-Entwickler-Community und das H5BP-Team.
*
* Detaillierte Informationen zu diesem CSS: h5bp.com/css
*
* ==|== normalisieren ================= =======================================
*/

/* ============================================ =============================
HTML5-Anzeigedefinitionen
========== =============================================== ============== */
article, aside, details, figcaption, Figure, footer, header, hgroup, nav, section { display: block; }
header {text-shadow: #220000 0px 0px 10px 10px;}
Audio, Canvas, Video { display: inline-block; *Anzeige: inline; *Zoom: 1; }
audio:not([controls]) { display: none; }
[versteckt] { display: none; }
/* ========================================== ===============================
Basis
========== =============================================== ============== */
/*
* 1. Korrigieren Sie die Textgrößenänderung seltsamerweise in IE6/7, wenn die Schriftgröße des Körpers mit em-Einheiten eingestellt ist
* 2 . Vertikale Bildlaufleiste in Nicht-IE erzwingen
* 3. Verhindern Sie die Anpassung der iOS-Textgröße bei Änderung der Geräteausrichtung, ohne den Benutzerzoom zu deaktivieren: h5bp.com/g
*/
html { Schriftgröße: 100 % ; overflow-y: scrollen; -webkit-text-size-adjust: 100 %; -ms-text-size-adjust: 100 %; }
body { margin: 0; Schriftgröße: 24px; line-height: 1.231;}
body, button, input, select, textarea {font-family:"Century Gothic"; color:#008000}
/*
* Textschatten in Auswahlhervorhebung entfernen: h5bp.com/i
* Diese Auswahldeklarationen müssen separat sein
* Außerdem: Pink! (oder passen Sie die Hintergrundfarbe an Ihr Design an)
*/
::-moz-selection { background: #fe57a1; Farbe: #fff; Textschatten: keiner; }
::selection { Hintergrund: #fe57a1; Farbe: #fff; Textschatten: keiner; }

/* ======================================== ==================================
Links
======= =============================================== ================= */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { Outline: dünn gepunktet; }
/* Verbessert die Lesbarkeit beim Fokussieren und Bewegen des Mauszeigers in allen Browsern: h5bp.com/h */
a:hover, a:active { outline: 0; }

/* ======================================== ==================================
Typografie
======= =============================================== ================= */
abbr[title] { border-bottom: 1px dotted; }
b, strong { Font-Weight: Bold; }
blockquote { margin: 1em 40px; }
dfn { Schriftstil: Kursiv; }
hr { display: block; Höhe: 1px; Rand: 0; border-top: 1px solid #ccc; Rand: 1em 0; Polsterung: 0; }
ins { Hintergrund: #ff9; Farbe: #000; Textdekoration: keine; }
markieren { Hintergrund: #ff0; Farbe: #000; Schriftstil: kursiv; Schriftstärke: fett; }
/* Monospace-Schriftfamilie neu deklarieren: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _Schriftfamilie: „courier new“, Monospace; Schriftgröße: 1em; }
/* Verbessert die Lesbarkeit von vorformatiertem Text in allen Browsern */
pre { white-space: pre; Leerraum: vor dem Umbruch; Zeilenumbruch: Wortumbruch; }
q { quotes: none; }
q:before, q:after { content: ""; Inhalt: keiner; }
klein { Schriftgröße: 85 %; }
/* Tiefgestellte und hochgestellte Inhalte positionieren, ohne die Zeilenhöhe zu beeinflussen: h5bp.com/k */
sub, sup { font-size: 75%; Zeilenhöhe: 0; Position: relativ; vertikal ausrichten: Grundlinie; }
sup { top: -0.5em; }
sub { unten: -0,25em; }

/* ======================================== ==================================
Listen
======= =============================================== ================= */
ul, ol { margin: 1em 0; Polsterung: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; Listenstil-Bild: keines; Rand: 0; Polsterung: 0; }

/* ======================================== ==================================
Eingebetteter Inhalt
====== =============================================== ================== */
/*
* 1. Verbessern Sie die Bildqualität bei der Skalierung in IE7: h5bp.com/d
* 2. Entfernen Sie die Lücke zwischen Bildern und Rändern in Bildcontainern: h5bp.com/e
*/
img { border: 0; -ms-interpolation-mode: bikubisch; vertikal ausrichten: Mitte; }
/*
* Korrigieren Sie den Überlauf, der in IE9 nicht ausgeblendet ist
*/
svg:not(:root) { overflow: versteckt; }

/* ======================================== ==================================
Figuren
======= =============================================== ================= */
figure { margin: 0; }

/* ============================================== ===========================
Formulare
============== =============================================== ========== */
form { margin: 0; }
fieldset { border: 0; Rand: 0; Polsterung: 0; }
/* Gibt an, dass „label“ den Fokus auf das zugehörige Formularelement verschiebt */
label { Cursor: Zeiger; }
/*
* 1. Korrekte Farbe wird in IE6/7/8/9 nicht vererbt
* 2. Korrekte Ausrichtung wird in IE6/7 seltsam angezeigt
*/
legend { border: 0; *Rand links: -7px; Polsterung: 0; }
/*
* 1. Korrigieren Sie die Schriftgröße, die nicht in allen Browsern übernommen wird
* 2. Entfernen Sie Ränder in FF3/4 S5 Chrome
* 3. Definieren Sie eine konsistente vertikale Ausrichtungsanzeige in allen Browsern
*/
button, input, select, textarea { Schriftgröße: 100 %; Rand: 0; vertikal ausrichten: Grundlinie; *vertikal ausrichten: Mitte; }
/*
* 1. Definieren Sie die Zeilenhöhe als normal, um sie an FF3/4 anzupassen (festgelegt mit !important im UA-Stylesheet)
* 2. Korrigieren Sie den inneren Abstand, der in IE6/7 seltsam angezeigt wird
*/
button, input { line-height: normal; *Überlauf: sichtbar; }
/*
* Innenabstand in „Tabelle“ wieder einführen, um Überlappungen und Leerraumprobleme in IE6/7 zu vermeiden
*/
Tabellenschaltfläche, Tabelleneingabe { *overflow: auto; }
/*
* 1. Handcursor für anklickbare Formularelemente anzeigen
* 2. Formatierung anklickbarer Formularelemente in iOS zulassen
*/
button, input[type="button" ], input[type="reset"], input[type="submit"] { Cursor: Zeiger; -webkit-appearance: Schaltfläche; }
/*
* Konsistente Boxgröße und -darstellung
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/*
* Innenpolsterung und Rand in FF3/4 entfernen: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus -inner { Grenze: 0; Polsterung: 0; }
/*
* 1. Standardmäßige vertikale Bildlaufleiste in IE6/7/8/9 entfernen
* 2. Nur vertikale Größenänderung zulassen
*/
textarea { overflow: auto; vertikal ausrichten: oben; Größe ändern: vertikal; }
/* Farben für Formulargültigkeit */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }

/* ======================================== ==================================
Tabellen
======= =============================================== ================= */
table { border-collapse: Collapse; Randabstand: 0; }
td { Vertical-align: top; }

/* ==|== primäre Stile ================================= ===================
Autor:
======================= =============================================== = */

/* ==|== nicht-semantische Hilfsklassen ============================= ===========
Bitte definieren Sie Ihre Stile vor diesem Abschnitt.
============================================= ========================== */
/* Für Bildersetzung */
.ir { display: block; Rand: 0; Texteinzug: -999em; Überlauf: versteckt; Hintergrundfarbe: transparent; Hintergrundwiederholung: keine Wiederholung; Textausrichtung: links; Richtung: vlnr; }
.ir br { display: none; }
/* Sowohl vor Screenreadern als auch vor Browsern verbergen: h5bp.com/u */
.hidden { display: none !important; Sichtbarkeit: verborgen; }
/* Nur visuell ausblenden, aber für Screenreader verfügbar machen: h5bp.com/v */
.visuallyhidden { border: 0; Clip: rect(0 0 0 0); Höhe: 1px; Rand: -1px; Überlauf: versteckt; Polsterung: 0; Position: absolut; Breite: 1px; }
/* Erweitert die .visuallyhidden-Klasse, damit das Element fokussierbar ist, wenn über die Tastatur zu ihm navigiert wird: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { Clip : automatisch; Höhe: automatisch; Rand: 0; Überlauf: sichtbar; Position: statisch; Breite: automatisch; }
/* Visuell und vor Screenreadern verbergen, aber Layout beibehalten */
.invisible { sichtbarkeit: versteckt; }
/* Floats enthalten: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; Anzeige: Tisch; }
.clearfix:after { clear: Both; }
.clearfix { zoom: 1; }

/* ==|== Medienabfragen ================================= ====================
PLACEHOLDER Medienabfragen für Responsive Design.
Diese überschreiben die primären Stile („Mobile First“).
Ändern Sie sie je nach Inhalt.
============================================= ========================== */
@media nur Bildschirm und (min-width: 480px) {
/* Stilanpassungen für Ansichtsfenster mit 480 Pixeln und mehr finden Sie hier */
}
@media only screen and (min-width: 768px) {
/* Stilanpassungen für Ansichtsfenster mit 768 Pixeln und mehr finden Sie hier */
}

/* ==|== Druckstile ================================= =====================
Druckstile.
Inlined pour éviter la connexion HTTP requise : h5bp.com/r
===================================== ======================================= */
@media print {
* { arrière-plan : transparent !important; couleur : noir !important ; text-shadow : aucun !important ; filtre:aucun !important; -ms-filter : aucun !important ; } /* Le noir s'imprime plus rapidement : 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: ""; } /* Ne pas afficher les liens pour les images, ni les liens javascript/internes */
pre, blockquote { border: 1px solid #999; saut de page à l'intérieur : à éviter ; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside : éviter ; }
img { max-width : 100 % !important; }
@page { marge : 0,5cm ; }
p, h2, h3 { orphelins : 3 ; veuves : 3 ; }
h2, h3 { page-break-after : éviter ; }
}
#startTimer{
position:inherit
width:75px;
hauteur : 20 px ;
haut :35px ;
gauche :25px ;
curseur:pointeur
}
#stopTimer{
position:inherit;
largeur : 75px ;
hauteur : 20 px ;
haut : 10px ;
gauche :25px ;
cursor:pointer
}
#countdownCanvas{
border-radius:25px;
box-shadow:10px 10px 5px #888888;
}
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn