Komentar: Setelah mendengar timer, Anda mungkin berpikir bahwa itu hanya dapat diimplementasikan dalam JS. Faktanya, ide ini masih bisa valid jika Anda tidak tahu bahwa ada HTML5. Berikut adalah deskripsi tentang bagaimana timer diimplementasikan dalam HTML5. Teman yang tertarik tidak boleh melewatkannya.
html:<! Doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<!- Selalu paksa mesin rendering IE terbaru (bahkan dalam intranet) & bingkai krom
Hapus ini jika Anda menggunakan .htaccess ->
<meta http-equiv = "x-ua-kompatibel" konten = "ie = edge, chrome = 1">
<title> HTML5 Timer untuk Work-Relax Balance </iteme>
<meta content = "">
<Meta Content = "Kevin">
<meta content = "width = perangkat-lebar; skala awal = 1.0">
<!-Ganti favicon.ico & apple-touch-icon.png di akar domain Anda dan hapus referensi ini->
<tautan href = "/favicon.ico"/>
<tautan href = "/apple-touch-icon.png"/>
<tautan tipe = "Teks/CSS" hREF = "css/style.css">
<script>
CountdownSeconds = 60;
var handle = null;
// Muat jendela
function onloadWindow () {
acanvas = document.geteLementById ("countdowncanvas");
konteks = acanvas.getContext ("2d");
var canvastext = "tekan untuk memulai ...";
var xpos = acanvas.width / 2;
var ypos = acanvas.height / 2;
Context.font = "12pt Century Gothic";
context.fillstyle = "#008000;";
context.textAlign = "center";
context.textBaseline = "tengah";
Context.FillText (CanVastext, XPOS, YPOS);
}
function updateCanvas (TheContext, Width, Height) {
if (countdownseconds <0) {
ClearInterval (pegangan);
pegangan = null;
waspada ("Hei, waktu sudah habis!");
kembali 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, lebar, tinggi);
Context.font = "24pt Century Gothic";
Context.FillText (Minstr + ":" + Secstr, Width / 2, Height / 2);
CountdownSeconds--;
}
fungsi startworkcountdown () {
if (handle! = null) {
ClearInterval (pegangan);
}
CountdownSeconds = document.getElementById ("WorkInterValInput"). Nilai * 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);
}
fungsi startrestcountdown () {
if (handle! = null) {
ClearInterval (pegangan);
}
CountdownSeconds = document.getElementById ("resistintervalInput"). Nilai * 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>
<div>
<Header>
<H1> Pengatur Waktu Kerja Saldo </h1>
</teader>
Pilih interval kerja:
<input type = "number" value = "25" min = "15" max = "45" step = "5"/>
menit
Pilih interval istirahat:
<input type = "number" value = "5" min = "3" max = "10" step = "1"/>
menit
<an kanvas>
Ini kanvas
</ Canvas>
<buton>
Bekerja keras
</tombol>
<buton>
Istirahat
</tombol>
<footer>
<p>
&menyalin; Hak cipta dicadangkan
</p>
</footer>
</div>
</body>
</html>
CSS3:
/*
* Html5 ✰ boilerplate
*
* Yang berikut adalah hasil dari banyak penelitian tentang gaya lintas-browser.
* Kredit kiri sejalan dan terima kasih besar kepada Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, dan komunitas dan tim H5BP Dev.
*
* Informasi terperinci tentang CSS ini: h5bp.com/css
*
* == | == normalisasi =========================================================================================================================================================
*/
/* ========================================================================================================================================================
Definisi tampilan HTML5
========================================================================================================================================================
Artikel, di samping, detail, figcaption, gambar, footer, header, hgroup, nav, bagian {display: block; }
header {text-shadow: #220000 0px 0px 10px 10px 10px;}
audio, kanvas, video {display: inline-block; *Tampilan: inline; *Zoom: 1; }
audio: not ([controls]) {display: none; }
[tersembunyi] {display: none; }
/* ========================================================================================================================================================
Basis
========================================================================================================================================================
/*
* 1. Teks yang benar mengubah ukuran aneh di IE6/7 saat ukuran font diatur menggunakan unit EM
* 2. Gulungan scroll vertikal di non -e
* 3. Cegah ukuran teks iOS menyesuaikan perubahan orientasi perangkat, tanpa menonaktifkan zoom pengguna: h5bp.com/g
*/
html {font-size: 100%; overflow-y: gulir; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
tubuh {margin: 0; Ukuran font: 24px; Line-Height: 1.231;}
tubuh, tombol, input, pilih, textarea {font-family: "Century Gothic"; Warna:#008000}
/*
* Hapus Teks-Shadow di Sorotan Seleksi: h5bp.com/i
* Deklarasi seleksi ini harus terpisah
* Juga: Hot Pink! (atau sesuaikan warna latar belakang agar sesuai dengan desain Anda)
*/
::-moz-seleksi {latar belakang: #fe57a1; Warna: #FFFF; Teks-Shadow: Tidak Ada; }
:: seleksi {latar belakang: #fe57a1; Warna: #fff; Teks-Shadow: Tidak Ada; }
/* ========================================================================================================================================================
Tautan
========================================================================================================================================================
A {Color: #00E; }
A: Visited {Color: #551a8b; }
A: Hover {Color: #06e; }
A: fokus {outline: Thin Dotted; }
/ * Meningkatkan keterbacaan saat fokus dan dilayang di semua browser: h5bp.com/h */
A: Hover, A: Active {Garis Besar: 0; }
/* ========================================================================================================================================================
Tipografi
========================================================================================================================================================
ABBR [judul] {Border-Bottom: 1px Dotted; }
b, kuat {font-weight: bold; }
blockquote {margin: 1em 40px; }
dfn {font-style: italic; }
hr {display: block; Tinggi: 1px; Perbatasan: 0; Border-top: 1px solid #ccc; margin: 1em 0; Padding: 0; }
INS {latar belakang: Color: #000; Dekorasi Teks: Tidak Ada; }
Mark {background: #ff0; Warna: #000; Font-style: Italic; font-weight: tebal; }
/ * Redeclare Monospace Font Family: h5bp.com/j */
Pre, Code, KBD, Samp {font-family: Monospace, Monospace; _font-family: 'Courier New', monospace; font-size: 1em; }
/ * Meningkatkan keterbacaan teks yang telah diformat di semua browser */
Pre {White-Space: Pre; ruang putih: pra-wrap; Word-Wrap: Break-word; }
Q {Quotes: None; }
T: Sebelumnya, T: Setelah {konten: ""; Konten: tidak ada; }
Small {font-size: 85%; }
/ * POSISI Subskrip dan konten superskrip tanpa mempengaruhi line-height: h5bp.com/k */
sub, sup {font-size: 75%; Line-Height: 0; Posisi: kerabat; Vertical-Align: Baseline; }
sup {top: -0.5em; }
Sub {Bottom: -0.25em; }
/* ========================================================================================================================================================
Daftar
========================================================================================================================================================
ul, ol {margin: 1em 0; padding: 0 0 0 40px; }
dd {margin: 0 0 0 40px; }
nav ul, nav ol {style daftar: tidak ada; Daftar-gaya-gambar: tidak ada; Margin: 0; Padding: 0; }
/* ========================================================================================================================================================
Konten tertanam
========================================================================================================================================================
/*
* 1. Meningkatkan kualitas gambar saat diskalakan di IE7: h5bp.com/d
* 2. Hapus celah antara gambar dan batas pada wadah gambar: h5bp.com/e
*/
img {border: 0; -MS-Mode-Interpolasi: Bicubic; Vertikal-Align: tengah; }
/*
* Luapan yang benar tidak disembunyikan di IE9
*/
svg: not (: root) {overflow: tersembunyi; }
/* ========================================================================================================================================================
Angka
========================================================================================================================================================
Gambar {margin: 0; }
/* ========================================================================================================================================================
Bentuk
========================================================================================================================================================
bentuk {margin: 0; }
Fieldset {Border: 0; Margin: 0; Padding: 0; }
/ * Menunjukkan bahwa 'label' akan mengalihkan fokus ke elemen bentuk terkait */
label {kursor: pointer; }
/*
* 1. Warna yang benar tidak mewarisi di IE6/7/8/9
* 2. Penyelarasan yang benar ditampilkan secara aneh di IE6/7
*/
legenda {perbatasan: 0; *margin -kiri: -7px; Padding: 0; }
/*
* 1. Ukuran font yang benar tidak mewarisi di semua browser
* 2. Hapus margin di ff3/4 s5 chrome
* 3. Tentukan tampilan penyelarasan vertikal yang konsisten di semua browser
*/
tombol, input, pilih, textarea {font-size: 100%; Margin: 0; Vertical-Align: Baseline; *Vertical-Align: tengah; }
/*
* 1. Tentukan garis tinggi seperti biasa untuk mencocokkan FF3/4 (set menggunakan! Penting dalam stylesheet UA)
* 2. Jarak dalam yang benar ditampilkan secara aneh di IE6/7
*/
tombol, input {line-height: normal; *overflow: terlihat; }
/*
* Memperkenalkan kembali jarak dalam 'Tabel' untuk menghindari masalah tumpang tindih dan whitespace di IE6/7
*/
tombol tabel, input tabel { *overflow: auto; }
/*
* 1. Tampilkan kursor tangan untuk elemen formulir yang dapat diklik
* 2. Izinkan gaya elemen formulir yang dapat diklik di iOS
*/
tombol, input [type = "tombol"], input [type = "reset"], input [type = "kirim"] {kursor: pointer; -WebKit-AMPEARCE: Tombol; }
/*
* Ukuran dan penampilan kotak yang konsisten
*/
input [type = "centang kotak"], input [type = "radio"] {box-sizing: boord-box; }
input [type = "cari"] {-webkit -appearance: textfield; -moz-box-ukuran: kotak konten; -webkit-box-ukuran: kotak konten; Ukuran kotak: kotak konten; }
input [type = "Search"] ::-WebKit-Search-Decoration {-webkit-APPANANCE: NONE; }
/*
* Lepaskan padding dalam dan perbatasan di FF3/4: h5bp.com/l
*/
Tombol ::-Moz-Focus-Inner, Input ::-Moz-Focus-Inner {Border: 0; Padding: 0; }
/*
* 1. Hapus scrollbar vertikal default di IE6/7/8/9
* 2. Hanya mengizinkan pengumoran ulang vertikal
*/
textarea {overflow: auto; Vertical-Align: Top; Ubah Ukuran: Vertikal; }
/ * Warna untuk validitas bentuk */
Input: Valid, TextArea: valid {}
input: tidak valid, textarea: tidak valid {latar belakang-warna: #f0dddd; }
/* ========================================================================================================================================================
Tabel
========================================================================================================================================================
Tabel {border-collapse: runtuh; spasi perbatasan: 0; }
td {vertical-align: top; }
/* == | == Gaya primer =============================================================================================================================================================
Pengarang:
========================================================================================================================================================
/* == | = kelas pembantu non-semantik ===============================================================================================
Harap tentukan gaya Anda sebelum bagian ini.
========================================================================================================================================================
/ * Untuk penggantian gambar */
.ir {display: block; Perbatasan: 0; Text -Indent: -999em; meluap: tersembunyi; latar belakang-warna: transparan; Latar belakang-repeat: No-Repeat; Teks-Align: Kiri; Arah: LTR; }
.ir br {display: tidak ada; }
/ * Sembunyikan dari screenreaders dan browser: h5bp.com/u */
.hidden {display: none! penting; Visibilitas: Tersembunyi; }
/ * Sembunyikan hanya secara visual, tetapi tersedia untuk screenreaders: h5bp.com/v */
.visualshidden {border: 0; Klip: Rect (0 0 0 0); Tinggi: 1px; margin: -1px; meluap: tersembunyi; Padding: 0; Posisi: Absolute; Lebar: 1px; }
/ * Memperluas kelas. Visus yang harus memungkinkan elemen difokuskan saat dinavigasi melalui keyboard: h5bp.com/p */
.visualshidden.focusable: aktif, .visualshidden.focusable: focus {clip: auto; Tinggi: otomatis; Margin: 0; meluap: terlihat; Posisi: statis; Lebar: otomatis; }
/ * Sembunyikan secara visual dan dari screenreaders, tetapi pertahankan tata letak */
.invisible {visibilitas: tersembunyi; }
/ * Berisi pelampung: h5bp.com/q */
.clearfix: Sebelumnya, .clearfix: After {Content: ""; Tampilan: Tabel; }
.clearfix: After {clear: keduanya; }
.clearfix {zoom: 1; }
/* == | == kueri media ===================================================================================================================================================================
Kueri media placeholder untuk desain responsif.
Ini menggantikan gaya primer ('seluler pertama')
Memodifikasi karena konten membutuhkan.
========================================================================================================================================================
@Media Only Screen dan (Min-Width: 480px) {
/ * Penyesuaian gaya untuk viewports 480px dan over wo here */
}
@media Only Screen dan (Min-Width: 768px) {
/ * Penyesuaian gaya untuk viewports 768px dan over wo here */
}
/* == | == cetak gaya =================================================================================================================================================================================
Gaya cetak.
Diinstal untuk menghindari koneksi http yang diperlukan: h5bp.com/r
========================================================================================================================================================
@media cetak {
* {latar belakang: transparan! penting; Warna: Hitam! Penting; Teks-Shadow: Tidak ada! Penting; Filter: tidak ada! Penting; -MS-filter: tidak ada! Penting; }/ * Cetakan hitam lebih cepat: h5bp.com/s */
A, A: Dikunjungi {Text-Decoration: Underline; }
a [href]: setelah {content: "(" attr (href) ")"; }
ABBR [title]: After {Content: "(" attr (title) ")"; }
.ir a: setelah, a [href^= "javascript:"]: setelah, a [href^= "#"]: setelah {konten: ""; }/ * Jangan menampilkan tautan untuk gambar, atau tautan javascript/internal */
pra, blockquote {border: 1px solid #999; halaman-break-inside: hindari; }
Thead {display: Table-header-group; }/ * h5bp.com/t */
tr, img {halaman-break-inside: hindari; }
IMG {Max-Width: 100%! Penting; }
@page {margin: 0.5cm; }
p, h2, h3 {yatim: 3; Janda: 3; }
h2, h3 {halaman-break-after: hindari; }
}
#starttimer {
Posisi: warisan
Lebar: 75px;
Tinggi: 20px;
Atas: 35px;
Kiri: 25px;
Kursor: Pointer
}
#stoptimer {
Posisi: warisan;
Lebar: 75px;
Tinggi: 20px;
Atas: 10px;
Kiri: 25px;
Kursor: Pointer
}
#countdownCanvas {
Border-Radius: 25px;
Kotak-Shadow: 10px 10px 5px #888888;
}