Kemahiran tutorial kecil pemasa HTML5 example_html5

html:

复制代码

代码如下:

TYPE













countdownSeconds = 60;
pemegang var = null;
//beban tetingkap
fungsi onLoadWindow() {
aCanvas = document.getElementById("countdownCanvas");
konteks = aCanvas.getContext("2d");
var canvasText = "Tekan untuk Mula...";
var xPos = aCanvas.width / 2;
var yPos = aCanvas.height / 2;
context.font = "12pt Century Gothic";
context.fillStyle = "#008000;";
context.textAlign = "tengah";
context.textBaseline = "tengah";
context.fillText(canvasText, xPos, yPos);
}
kemas kini fungsiCanvas(Konteks, lebar, tinggi) {
jika (countDownSeconds clearInterval(handle);
pegangan = null;
makluman("hey, masa sudah tamat!");
kembali 0;
}
minStr = Math.floor(countDownSeconds / 60);
secStr = countDownSeconds % 60;
jika (minStr minStr = "0" minStr;
}
if (secStr secStr = "0" secStr;
}
context.clearRect(0, 0, lebar, tinggi);
context.font = "24pt Century Gothic";
context.fillText(minStr " : " secStr, lebar / 2, tinggi / 2);
countdownSecons--;
}
fungsi 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);
}
fungsi startRestCountDown() {
jika (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);
}

pemasa keseimbangan kehidupan kerja

Sila pilih selang kerja:

minit

Sila pilih selang rehat:

minit



Ini ialah kanvas




Bekerja Keras


Rehat

© Hak Cipta Terpelihara

css3:

Salin kod

Kodnya adalah seperti berikut:

/*
* HTML5 ✰ Boilerplate
*
* Apa yang berikut ialah hasil daripada banyak penyelidikan tentang penggayaan merentas pelayar.
* Kredit kiri sebaris dan terima kasih kepada Nicolas Gallagher, Jonathan Neal,
* Kroc Camen dan komuniti dan pasukan pembangun H5BP.
*
* Maklumat terperinci tentang CSS ini: h5bp.com/css
*
* ==|== normalkan ================== ==========================================
*/

/* =============================================== ===============================
Takrif paparan HTML5
========== =================================================== ============== */
artikel, ketepikan, butiran, kapsyen rajah, rajah, pengaki, pengepala, hgroup, nav, bahagian { paparan: blok; }
pengepala {text-shadow: #220000 0px 0px 10px 10px;}
audio, kanvas, video { display: inline-block; *paparan: sebaris; *zum: 1; }
audio:not([controls]) { display: none; }
[tersembunyi] { paparan: tiada; }
/* ============================================ ===================================
Asas
========================= =================================================== ============== */
/*
* 1. Betulkan saiz semula teks secara ganjil dalam IE6/7 apabila saiz fon badan ditetapkan menggunakan unit em
* 2 . Paksa bar skrol menegak dalam bukan IE
* 3. Halang pelarasan saiz teks iOS pada perubahan orientasi peranti, tanpa melumpuhkan zum pengguna: h5bp.com/g
*/
html { saiz fon: 100% ; limpahan-y: tatal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
badan { margin: 0; saiz fon: 24px; line-height: 1.231;}
badan, butang, input, pilih, textarea {font-family:"Century Gothic"; color:#008000}
/*
* Alih keluar bayang-bayang teks dalam serlahan pilihan: h5bp.com/i
* Pengisytiharan pemilihan ini mesti berasingan
* Juga: merah jambu panas! (atau sesuaikan warna latar belakang agar sepadan dengan reka bentuk anda)
*/
::-moz-selection { background: #fe57a1; warna: #fff; text-shadow: tiada; }
::pilihan { latar belakang: #fe57a1; warna: #fff; text-shadow: tiada; }

/* =========================================== ====================================
Pautan
======== =================================================== =================== */
a { warna: #00e; }
a:dilawati { warna: #551a8b; }
a:hover { warna: #06e; }
a:fokus { garis besar: bertitik nipis; }
/* Tingkatkan kebolehbacaan apabila difokuskan dan dilegar dalam semua penyemak imbas: h5bp.com/h */
a:hover, a:active { outline: 0; }

/* =========================================== =====================================
Tipografi
======= =================================================== =================== */
abbr[tajuk] { sempadan-bawah: 1px bertitik; }
b, kuat { font-weight: bold; }
petikan blok { margin: 1em 40px; }
dfn { gaya fon: condong; }
jam { paparan: blok; ketinggian: 1px; sempadan: 0; atas sempadan: 1px pepejal #ccc; margin: 1em 0; padding: 0; }
masuk { latar belakang: #ff9; warna: #000; hiasan teks: tiada; }
tanda { latar belakang: #ff0; warna: #000; gaya fon: condong; font-weight: tebal; }
/* Isytihar semula keluarga fon monospace: h5bp.com/j */
pra, kod, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; saiz fon: 1em; }
/* Tingkatkan kebolehbacaan teks pra-format dalam semua penyemak imbas */
pra { white-space: pre; ruang putih: pra-bungkus; bungkus-kata: patah-kata; }
q { petikan: tiada; }
q:sebelumnya, q:selepas { kandungan: ""; kandungan: tiada; }
kecil { saiz fon: 85%; }
/* Kedudukan kandungan subskrip dan superskrip tanpa menjejaskan ketinggian baris: h5bp.com/k */
sub, sup { saiz fon: 75%; ketinggian garis: 0; kedudukan: relatif; penjajaran menegak: garis dasar; }
sup { atas: -0.5em; }
sub { bawah: -0.25em; }

/* =========================================== ===================================
Senarai
======== =================================================== =================== */
ul, ol { margin: 1em 0; pelapik: 0 0 0 40px; }
dd { jidar: 0 0 0 40px; }
nav ul, nav ol { gaya senarai: tiada; senarai-gaya-imej: tiada; margin: 0; padding: 0; }

/* =========================================== =====================================
Kandungan terbenam
====== =================================================== =================== */
/*
* 1. Tingkatkan kualiti imej apabila diskalakan dalam IE7: h5bp.com/d
* 2. Keluarkan jurang antara imej dan sempadan pada bekas imej: h5bp.com/e
*/
img { sempadan: 0; -ms-interpolasi-mod: bikubik; vertical-align: tengah; }
/*
* Limpahan betul tidak tersembunyi dalam IE9
*/
svg:not(:root) { limpahan: tersembunyi; }

/* =========================================== ====================================
Angka
======== =================================================== =================== */
angka { margin: 0; }

/* ================================================== ==============================
Borang
============== =================================================== ========== */
borang { margin: 0; }
set medan { sempadan: 0; margin: 0; padding: 0; }
/* Nyatakan bahawa 'label' akan mengalihkan fokus kepada elemen bentuk yang berkaitan */
label { cursor: pointer; }
/*
* 1. Warna yang betul tidak diwarisi dalam IE6/7/8/9
* 2. Penjajaran yang betul dipaparkan secara ganjil dalam IE6/7
*/
legenda { sempadan: 0; *margin-kiri: -7px; padding: 0; }
/*
* 1. Betulkan saiz fon yang tidak diwarisi dalam semua penyemak imbas
* 2. Alih keluar margin dalam FF3/4 S5 Chrome
* 3. Tentukan paparan penjajaran menegak yang konsisten dalam semua penyemak imbas
*/
butang, input, pilih, kawasan teks { saiz fon: 100%; margin: 0; penjajaran menegak: garis dasar; *vertical-align: tengah; }
/*
* 1. Tentukan ketinggian garisan seperti biasa untuk memadankan FF3/4 (tetapkan menggunakan !penting dalam lembaran gaya UA)
* 2. Jarak dalam yang betul dipaparkan secara ganjil dalam IE6/7
*/
butang, input { line-height: normal; *limpahan: nampak; }
/*
* Perkenalkan semula jarak dalam dalam 'jadual' untuk mengelakkan pertindihan dan isu ruang kosong dalam IE6/7
*/
butang jadual, input jadual { *overflow: auto; }
/*
* 1. Paparkan kursor tangan untuk elemen borang boleh klik
* 2. Benarkan penggayaan elemen borang boleh klik dalam iOS
*/
butang, input[type="button" ], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-penampilan: butang; }
/*
* Saiz dan rupa kotak yang konsisten
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-kotak-saiz: kandungan-kotak; -webkit-kotak-saiz: kandungan-kotak; saiz kotak: kotak kandungan; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/*
* Keluarkan pelapik dalam dan jidar dalam FF3/4: h5bp.com/l
*/
butang::-moz-focus-inner, input::-moz-focus -dalaman { sempadan: 0; padding: 0; }
/*
* 1. Alih keluar bar skrol menegak lalai dalam IE6/7/8/9
* 2. Benarkan saiz semula menegak
*/
textarea { limpahan: auto; vertical-align: atas; ubah saiz: menegak; }
/* Warna untuk kesahan borang */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }

/* =========================================== ===================================
Jadual
======== =================================================== =================== */
jadual { sempadan-runtuh: runtuh; jarak sempadan: 0; }
td { vertical-align: top; }

/* ==|== gaya utama ================================== ===================
Pengarang:
======================== =================================================== = */

/* ==|== kelas pembantu bukan semantik ============================== ===========
Sila tentukan gaya anda sebelum bahagian ini.
============================================ =========================== */
/* Untuk penggantian imej */
.ir { paparan: blok; sempadan: 0; inden teks: -999em; limpahan: tersembunyi; warna latar belakang: telus; background-repeat: tidak-ulang; text-align: kiri; arah: ltr; }
.ir br { paparan: tiada; }
/* Sembunyikan daripada kedua-dua pembaca skrin dan penyemak imbas: h5bp.com/u */
.tersembunyi { paparan: tiada !penting; penglihatan: tersembunyi; }
/* Sembunyikan hanya secara visual, tetapi sediakannya untuk pembaca skrin: h5bp.com/v */
.visuallyhidden { border: 0; klip: rect(0 0 0 0); ketinggian: 1px; jidar: -1px; limpahan: tersembunyi; padding: 0; jawatan: mutlak; lebar: 1px; }
/* Memanjangkan kelas .visuallyhidden untuk membolehkan elemen boleh difokuskan apabila dilayari melalui papan kekunci: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip : auto; ketinggian: auto; margin: 0; limpahan: nampak; kedudukan: statik; lebar: auto; }
/* Sembunyi secara visual dan daripada pembaca skrin, tetapi kekalkan reka letak */
.invisible { visibility: hidden; }
/* Mengandungi terapung: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; paparan: meja; }
.clearfix:selepas { clear: both; }
.clearfix { zum: 1; }

/* ==|== pertanyaan media ================================================== ====================
PERTANYAAN Media PEMEGANG TEMPAT untuk Reka Bentuk Responsif.
Ini mengatasi gaya utama ('mudah alih didahulukan')
Ubah suai mengikut keperluan kandungan.
============================================ =========================== */
@media sahaja skrin dan (lebar min: 480px) {
/* Pelarasan gaya untuk port pandangan 480px dan lebih pergi ke sini */
}
@media sahaja skrin dan (lebar min: 768px) {
/* Pelarasan gaya untuk viewport 768px dan lebih pergi ke sini */
}

/* ==|== gaya cetakan ================================== =====================
Gaya cetakan.
Inline, um die erforderliche HTTP-Verbindung zu vermeiden: h5bp.com/r
================================== ===================================== */
@media print {
* { Hintergrund: transparent !important; Farbe: schwarz !wichtig; Textschatten: keiner !important; filter:none !important; -ms-filter: keine !important; } /* Schwarz wird schneller gedruckt: 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: ""; } /* Keine Links für Bilder oder Javascript/interne Links anzeigen */
pre, blockquote { border: 1px solid #999; Seitenumbruch innerhalb: vermeiden; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: Vermeidung; }
img { max-width: 100% !important; }
@page { Rand: 0,5 cm; }
p, h2, h3 { Waisen: 3; Witwen: 3; }
h2, h3 { Seitenumbruch nach: vermeiden; }
}
#startTimer{
position:inherit
width:75px;
Höhe:20px;
top:35px;
links:25px;
cursor:pointer
}
#stopTimer{
position:inherit;
Breite:75px;
Höhe:20px;
top:10px;
links:25px;
cursor:pointer
}
#countdownCanvas{
border-radius:25px;
box-shadow:10px 10px 5px #888888;
}