Nachdem Sie von Timern gehört haben, denken Sie vielleicht, dass sie nur in js implementiert werden können. Tatsächlich kann diese Idee immer noch wahr sein, wenn Sie nicht wissen, dass es html5. Im Folgenden erfahren Sie, wie man Timer in HTML5 implementiert. Interessierte sollten es sich nicht entgehen lassen. html:
Der Code lautet wie folgt:<!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 id="work-life-nbsp-balance-nbsp-timer">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: Der Code lautet wie folgt:
/*
* HTML5 ✰ Boilerplate
*
* Was folgt, ist das Ergebnis umfangreicher Forschung zum browserübergreifenden Styling.
* Credit linksinline und großes Dankeschön an Nicolas Gallagher, Jonathan Neal,
* Kroc Camen und die H5BP-Entwicklergemeinschaft und das H5BP-Entwicklerteam.
*
* 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 seltsame Textgrößenänderung 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 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
======= =============================================== ================= */
Abbildung { Rand: 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 setzen die primären Stile („Mobile First“) außer Kraft.
Ä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 */
}
/* ==|== 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'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;
}【相关推荐】
1. HTML5免费视频教程
4. 教你用H5绘图的基础方法
Das obige ist der detaillierte Inhalt vonH5-Codedemonstration zum Erstellen eines Timers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
H5 und HTML5: häufig verwendete Begriffe in der WebentwicklungApr 13, 2025 am 12:01 AMH5 und HTML5 beziehen sich auf dasselbe, nämlich HTML5. HTML5 ist die fünfte Version von HTML, die neue Funktionen wie semantische Tags, Multimedia -Support, Leinwand und Grafiken, Offline -Speicher und lokaler Speicher bietet, die Ausdrucksfähigkeit und Interaktivität von Webseiten verbessert.
Worauf bezieht sich H5? Erforschen des KontextesApr 12, 2025 am 12:03 AMH5REFERSTOHTML5, ApivotaltechnologyInwebdevelopment.1) HTML5IntroducesNewelementsandapisrich, Dynamicwebapplications.2) ITSUPP ortsmultimediaWitHoutPlugins, BETHINGINGUSEREXPERICERCROSSDEVICES.3) SEMANTICELEMENTSIMPROVEPENTENTENTENTRUCTENTRUCTELUREANDSEO.4) H5'SRespo
H5: Tools, Frameworks und Best PracticesApr 11, 2025 am 12:11 AMZu den Tools und Frameworks, die in der H5 -Entwicklung gemeistert werden müssen, gehören Vue.js, React und WebPack. 1.Vue.js eignet sich zum Erstellen von Benutzeroberflächen und unterstützt die Komponentenentwicklung. 2. Die Rendern des Seitenrenders über virtuelle DOM optimiert, geeignet für komplexe Anwendungen. 3.Webpack wird zur Modulverpackung und zur Optimierung der Ressourcenlast verwendet.
Das Erbe von HTML5: H5 in der Gegenwart verstehenApr 10, 2025 am 09:28 AMHTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee
H5 -Code: Zugänglichkeit und semantische HTMLApr 09, 2025 am 12:05 AMH5 verbessert die Zugänglichkeits- und SEO -Effekte der Webseiten durch semantische Elemente und Aria -Attribute. 1. Verwendung usw., um die Inhaltsstruktur zu organisieren und SEO zu verbessern. 2. ARIA-Attribute wie ARIA-Label verbessern die Zugänglichkeit, und assistive Technologie-Benutzer können Webseiten reibungslos verwenden.
Ist H5 gleich wie HTML5?Apr 08, 2025 am 12:16 AM"H5" und "HTML5" sind in den meisten Fällen gleich, haben jedoch möglicherweise unterschiedliche Bedeutungen in bestimmten Szenarien. 1. "HTML5" ist ein W3C-definierter Standard, der neue Tags und APIs enthält. 2. "H5" ist normalerweise die Abkürzung von HTML5, kann jedoch in der mobilen Entwicklung auf ein auf HTML5 basierendes Framework verweisen. Das Verständnis dieser Unterschiede trägt dazu bei, diese Begriffe in Ihrem Projekt genau zu verwenden.
Was ist die Funktion von H5?Apr 07, 2025 am 12:10 AMH5 oder HTML5 ist die fünfte Version von HTML. Es bietet Entwicklern ein stärkeres Toolset, so dass es einfacher ist, komplexe Webanwendungen zu erstellen. Die Kernfunktionen von H5 umfassen: 1) Elemente, mit denen Grafiken und Animationen auf Webseiten zeichnen können; 2) semantische Tags wie usw., um die Webseitenstruktur klar und förderlich für die SEO -Optimierung zu machen; 3) neue APIs wie GeolocationAPI unterstützen standortbasierte Dienste; 4) Die Kompatibilität des Cross-Browsers muss durch Kompatibilitätstests und Polyfill-Bibliothek gewährleistet werden.
So machen Sie H5 -LinkApr 06, 2025 pm 12:39 PMWie erstelle ich einen H5 -Link? Bestimmen Sie das Linkziel: Holen Sie sich die URL der H5 -Seite oder -Anwendung. Erstellen Sie HTML -Anker: Verwenden Sie das & lt; a & gt; Tag, um einen Anker zu erstellen und die Link -Ziel -URL anzugeben. Link -Eigenschaften festlegen (optional): Setzen Sie nach Bedarf Ziel-, Titel- und Onclick -Eigenschaften. Zu der Webseite hinzufügen: Hinzufügen von HTML -Ankercode zur Webseite, auf der der Link angezeigt werden soll.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
DVWA
Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
Dreamweaver CS6
Visuelle Webentwicklungstools
