suchen
HeimWeb-FrontendH5-TutorialHTML5-Timer, kleine Beispiele_HTML5-Tutorial-Fähigkeiten

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
Beispiele für H5 -Code: Praktische Anwendungen und TutorialsBeispiele für H5 -Code: Praktische Anwendungen und TutorialsApr 25, 2025 am 12:10 AM

H5 bietet eine Vielzahl neuer Funktionen und Funktionen und verbessert die Fähigkeiten der Front-End-Entwicklung erheblich. 1. Multimedia-Unterstützung: Einbetten von Medien und Elementen, keine Plug-Ins sind erforderlich. 2. Leinwand: Verwenden Sie Elemente, um 2D -Grafiken und -Animationen dynamisch zu rendern. 3. Lokaler Speicher: Implementieren Sie die persistente Datenspeicherung über LocalStorage und SessionStorage, um die Benutzererfahrung zu verbessern.

Die Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeDie Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeApr 24, 2025 am 12:01 AM

H5 und HTML5 sind verschiedene Konzepte: HTML5 ist eine Version von HTML, die neue Elemente und APIs enthält. H5 ist ein Rahmen für mobile Anwendungsentwicklungen, die auf HTML5 basieren. HTML5 pariert und rendert Code über den Browser, während H5 -Anwendungen Container ausführen und über JavaScript mit nativem Code interagieren müssen.

Die Bausteine ​​des H5 -Codes: Schlüsselelemente und deren ZweckDie Bausteine ​​des H5 -Codes: Schlüsselelemente und deren ZweckApr 23, 2025 am 12:09 AM

Zu den wichtigsten Elementen von HTML5 gehören ,,,,,, usw., mit denen moderne Webseiten erstellt werden. 1. Definieren Sie den Kopfinhalt, 2. Zum Navigieren durch den Link, 3. darstellen den Inhalt unabhängiger Artikel, 4. organisieren Sie den Seiteninhalt, 5. Zeigen Sie den Seitenleisteninhalt an, 6. Definieren Sie die Fußzeile. Diese Elemente verbessern die Struktur und Funktionalität der Webseite.

HTML5 und H5: Verständnis der gemeinsamen VerwendungHTML5 und H5: Verständnis der gemeinsamen VerwendungApr 22, 2025 am 12:01 AM

Es gibt keinen Unterschied zwischen HTML5 und H5, der Abkürzung von HTML5. 1.HTML5 ist die fünfte Version von HTML, die die Multimedia- und interaktiven Funktionen von Webseiten verbessert. 2.H5 wird häufig verwendet, um auf HTML5-basierte mobile Webseiten oder -anwendungen zu verweisen, und eignet sich für verschiedene mobile Geräte.

HTML5: Die Bausteine ​​des modernen Webs (H5)HTML5: Die Bausteine ​​des modernen Webs (H5)Apr 21, 2025 am 12:05 AM

HTML5 ist die neueste Version der Hypertext -Markup -Sprache, die von W3C standardisiert wurde. HTML5 führt neue semantische Tags, Multimedia -Support- und Form -Verbesserungen ein, verbessert die Webstruktur, die Benutzererfahrung und die SEO -Effekte. HTML5 führt neue semantische Tags vor, wie z. HTML5 unterstützt Multimedia-Elemente und es sind keine Plug-Ins von Drittanbietern erforderlich, wodurch die Benutzererfahrung und die Ladegeschwindigkeit verbessert werden. HTML5 verbessert die Formfunktionen und führt neue Eingangstypen wie usw. ein, die die Effizienz der Benutzererfahrung und der Form von Formularverifizierung verbessert.

H5 -Code: Sauberes und effizientes HTML5 schreibenH5 -Code: Sauberes und effizientes HTML5 schreibenApr 20, 2025 am 12:06 AM

Wie schreibe ich sauberen und effizienten HTML5 -Code? Die Antwort besteht darin, häufige Fehler zu vermeiden, indem Tags, strukturierte Code, Leistungsoptimierung und die Vermeidung häufiger Fehler vermieden werden. 1. Verwenden Sie semantische Tags wie usw., um die Code -Lesbarkeit und SEO -Effekt zu verbessern. 2. Halten Sie den Code strukturiert und lesbar, wobei entsprechende Eindrücke und Kommentare verwendet werden. 3. Optimieren Sie die Leistung, indem Sie unnötige Tags reduzieren, CDN- und Komprimierungscode. V.

H5: Wie es die Benutzererfahrung im Web verbessertH5: Wie es die Benutzererfahrung im Web verbessertApr 19, 2025 am 12:08 AM

H5 verbessert die Erfahrung des Webbenutzers mit Multimedia -Support, Offline -Speicher und Leistungsoptimierung. 1) Multimedia -Unterstützung: H5 und Elemente vereinfachen die Entwicklung und verbessern die Benutzererfahrung. 2) Offline -Speicher: Webstorage und IndexedDB ermöglichen die Verstärkung der Erfahrung offline. 3) Leistungsoptimierung: Webworker und Elemente optimieren die Leistung, um den Bandbreitenverbrauch zu verringern.

Dekonstruieren von H5 -Code: Tags, Elemente und AttributeDekonstruieren von H5 -Code: Tags, Elemente und AttributeApr 18, 2025 am 12:06 AM

Der HTML5 -Code besteht aus Tags, Elementen und Attributen: 1. Das Tag definiert den Inhaltstyp und ist von Winkelklammern umgeben, wie z. 2. Elemente bestehen aus Start -Tags, Inhalten und End -Tags wie Inhalten. 3. Attribute definieren Schlüsselwertpaare im Start-Tag und verbessern Funktionen, z. B.. Dies sind die grundlegenden Einheiten zum Aufbau von Webstruktur.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

DVWA

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

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),