تعليق: بعد سماع المؤقت ، قد تعتقد أنه لا يمكن تنفيذه إلا في JS. في الواقع ، يمكن أن تظل هذه الفكرة صالحة إذا كنت لا تعرف أن هناك HTML5. فيما يلي وصف لكيفية تنفيذ المؤقت في HTML5. يجب ألا يفوتها الأصدقاء المهتمين.
HTML:<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<!- دائمًا فرض أحدث محرك عرض IE (حتى في إنترانت) وإطار الكروم
أزل هذا إذا كنت تستخدم .htaccess ->
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<title> Timer HTML5 لتوازن العمل في العمل </title>
<meta content = "">
<meta content = "kevin">
<meta content = "width = width device ؛ sciale scale = 1.0">
<!-استبدل favicon.ico & apple-touch-icon.png في جذر المجال الخاص بك وحذف هذه المراجع->
<link href = "/favicon.ico"/>
<Link Href = "/Apple-touch-icon.png"/>
<link type = "text/css" href = "css/style.css">
<script>
العد التنازلي = 60 ؛
var handle = null ؛
// تحميل النافذة
وظيفة onloadwindow () {
acanvas = document.getElementById ("CountDownCanvas") ؛
context = acanvas.getContext ("2d") ؛
var canvastext = "اضغط للبدء ..." ؛
var xpos = acanvas.width / 2 ؛
var ypos = acanvas.hight / 2 ؛
context.font = "12pt Century Gothic" ؛
context.fillStyle = "#008000 ؛" ؛
context.textalign = "center" ؛
context.textBaseline = "Middle" ؛
context.fillText (canvastext ، xpos ، ypos) ؛
}
وظيفة updatecanvas (thecontext ، العرض ، الارتفاع) {
if (CountDownseconds <0) {
ClearInterval (مقبض) ؛
مقبض = فارغ ؛
تنبيه ("مهلا ، الوقت ما يصل!") ؛
العودة 0 ؛
}
minstr = math.floor (العد التنازلي / 60) ؛
SecStr = CountDownSeconds ٪ 60 ؛
if (minstr <10) {
minstr = "0" + minstr ؛
}
if (secstr <10) {
SecStr = "0" + secstr ؛
}
context.clearRect (0 ، 0 ، العرض ، الارتفاع) ؛
context.font = "24pt century gothic" ؛
context.fillText (minstr + ":" + secstr ، width / 2 ، height / 2) ؛
العد التنازلي-؛
}
وظيفة startWorkCountDown () {
إذا (مقبض! = فارغ) {
ClearInterval (مقبض) ؛
}
CountDownSeconds = document.getElementById ("WorkInterValInput"). القيمة * 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) ؛
}
وظيفة startrestcountdown () {
إذا (مقبض! = فارغ) {
ClearInterval (مقبض) ؛
}
CountDownSeconds = document.getElementById ("RESTINTERVALINPUT"). القيمة * 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>
<viv>
<header>
<H1> توازن التوازن بين العمل والحياة </h1>
</header>
الرجاء اختيار فاصل العمل:
<type type = "number" value = "25" min = "15" max = "45" step = "5"/>
دقائق
الرجاء اختيار فاصل الراحة:
<type type = "number" value = "5" min = "3" max = "10" step = "1"/>
دقائق
<canvas>
هذه قماش
</canvas>
<NUNTER>
العمل بجد
</button>
<NUNTER>
خذ استراحة
</button>
<Tower>
<p>
&ينسخ؛ حقوق الطبع والنشر محفوظة
</p>
</tower>
</div>
</body>
</html>
CSS3:
/*
* html5 ✰ boilerplate
*
* ما يلي هو نتيجة الكثير من الأبحاث حول تصميم المتصفح.
* الائتمان المتبقي ومضمّنًا كبيرًا لنيكولاس غالاغر ، جوناثان نيل ،
* Kroc Camen ، ومجتمع H5BP Dev والفريق.
*
* معلومات مفصلة حول CSS: H5BP.com/css
*
* == | == nordalize =============================================================================================================================================================
*/
/* ===============================================================سف
تعريفات عرض HTML5
======================================================================================== ^
مقال ، جانبا ، التفاصيل ، الشكل ، الشكل ، تذييل ، رأس ، hgroup ، nav ، القسم {display: block ؛ }
رأس {text-shadow: #220000 0px 0px 10px 10px 10px ؛}
الصوت ، قماش ، فيديو {display: inline-block ؛ *العرض: مضمّن ؛ *التكبير: 1 ؛ }
الصوت: لا ([عناصر التحكم]) {display: none ؛ }
[Hidden] {Display: None ؛ }
/* ===============================================================سف
قاعدة
======================================================================================== ^
/*
* 1. النص الصحيح تغيير حجم الغريب في IE6/7 عندما يتم تعيين حجم خط الجسم باستخدام وحدات EM
* 2
* 3. منع ضبط حجم نص iOS على تغيير اتجاه الجهاز ، دون تعطيل تكبير المستخدم: H5BP.com/g
*/
html {font-size: 100 ٪ ؛ فائض y: التمرير ؛ -webkit-text-size-most: 100 ٪ ؛ -MS-Text-Size-Ad-Just: 100 ٪ ؛ }
الجسم {الهامش: 0 ؛ حجم الخط: 24 بكسل ؛ ارتفاع الخط: 1.231 ؛}
الجسم ، الزر ، الإدخال ، حدد ، textarea {font-family: "Century Gothic" ؛ اللون:#008000}
/*
* قم بإزالة النصوص النصية في تسليط الضوء على التحديد: H5BP.com/i
* يجب أن تكون إعلانات الاختيار هذه منفصلة
* أيضا: الوردي الساخن! (أو تخصيص لون الخلفية لمطابقة التصميم الخاص بك)
*/
::-Moz-selection {background: #fe57a1 ؛ اللون: #ffff ؛ النص الشادو: لا شيء ؛ }
:: Selection {background: #fe57a1 ؛ اللون: #fff ؛ النص الشادو: لا شيء ؛ }
/* ===============================================================سف
الروابط
======================================================================================== ^
A {color: #00e ؛ }
ج: زيارة {color: #551a8b ؛ }
A: Hover {color: #06e ؛ }
ج: التركيز {Outline: Thin Scetted ؛ }
/ * تحسين قابلية القراءة عند التركيز والتحوم في جميع المتصفحات: H5BP.com/H */
A: Hover ، A: Active {Outline: 0 ؛ }
/* ===============================================================سف
الطباعة
======================================================================================== ^
ABBR [TITLE] {Border-Bottom: 1px منقط ؛ }
ب ، قوي {font-weight: Bold ؛ }
blockquote {margin: 1em 40px ؛ }
dfn {font-style: italic ؛ }
HR {Display: Block ؛ الارتفاع: 1 بكسل ؛ الحدود: 0 ؛ أعلى الحدود: 1px الصلبة #CCC ؛ الهامش: 1EM 0 ؛ الحشو: 0 ؛ }
ins {background: color: #000 ؛ تدمير النص: لا شيء ؛ }
Mark {background: #ff0 ؛ اللون: #000 ؛ على غرار الخط: مائل ؛ خط الرصيف: جريئة ؛ }
/ * Redeclare Monospace Font Family: H5BP.com/j */
Pre ، Code ، KBD ، Samp {Font-Family: Monospace ، Monospace ؛ _font-family: "Courier New" ، Monospace ؛ حجم الخط: 1EM ؛ }
/ * تحسين قابلية قراءة النص المسبق في جميع المتصفحات */
Pre {White-Space: Pre ؛ الفضاء الأبيض: ما قبل الراب. Word-Wrap: كلمة استراحة ؛ }
Q {Quotes: None ؛ }
س: قبل ، س: بعد {المحتوى: "" ؛ المحتوى: لا شيء ؛ }
صغير {font-size: 85 ٪ ؛ }
/ * موضع الموضع والاحتفال بمحتوى SuperScript دون التأثير على ارتفاع الخط: h5bp.com/k */
sub ، sup {font-size: 75 ٪ ؛ Line-Leight: 0 ؛ الموقف: قريب المحاذاة العمودية: خط الأساس ؛ }
Sup {Top: -0.5em ؛ }
Sub {Bottom: -0.25em ؛ }
/* ===============================================================سف
قوائم
======================================================================================== ^
ul ، ol {margin: 1em 0 ؛ الحشو: 0 0 0 40px ؛ }
dd {margin: 0 0 0 40px ؛ }
Nav ul ، nav ol {style style: none ؛ صورة على غرار القائمة: لا شيء ؛ الهامش: 0 ؛ الحشو: 0 ؛ }
/* ===============================================================سف
محتوى مضمن
======================================================================================== ^
/*
* 1. تحسين جودة الصورة عند تحجيمها في IE7: H5BP.com/d
* 2. قم بإزالة الفجوة بين الصور والحدود على حاويات الصور: h5bp.com/e
*/
img {الحدود: 0 ؛ -MS-INTERPOLATION-ODE: Bicubic ؛ المحاذاة الرأسية: الأوسط ؛ }
/*
* الفائض الصحيح غير مخفي في IE9
*/
SVG: NOT (: ROOT) {Overflow: Hidden ؛ }
/* ===============================================================سف
الأرقام
======================================================================================== ^
الشكل {الهامش: 0 ؛ }
/* ===============================================================سف
الأشكال
======================================================================================== ^
نموذج {margin: 0 ؛ }
Fieldset {الحدود: 0 ؛ الهامش: 0 ؛ الحشو: 0 ؛ }
/ * تشير إلى أن "التسمية" سوف تحول التركيز إلى عنصر النموذج المرتبط */
Label {Cursor: Pointer ؛ }
/*
* 1. اللون الصحيح لا يرث في IE6/7/8/9
* 2. المحاذاة الصحيحة المعروضة بشكل غريب في IE6/7
*/
الأسطورة {الحدود: 0 ؛ *الهامش اليساري: -7px ؛ الحشو: 0 ؛ }
/*
* 1. تصحيح حجم الخط لا يرث في جميع المتصفحات
* 2. قم بإزالة الهوامش في Chrome FF3/4 S5
* 3. تحديد عرض محاذاة عمودي ثابت في جميع المتصفحات
*/
زر ، إدخال ، تحديد ، textarea {font-size: 100 ٪ ؛ الهامش: 0 ؛ المحاذاة العمودية: خط الأساس ؛ *المحاذاة العمودية: الأوسط ؛ }
/*
* 1. حدد ارتفاع الخط على أنه طبيعي لمطابقة FF3/4 (تعيين باستخدام! مهم في ورقة أنماط UA)
* 2. التباعد الداخلي الصحيح المعروض بشكل غريب في IE6/7
*/
زر ، إدخال {خط الارتفاع: عادي ؛ *الفائض: مرئي ؛ }
/*
* أعد إدخال التباعد الداخلي في "الجدول" لتجنب مشكلات التداخل والمساحة البيضاء في IE6/7
*/
زر الجدول ، إدخال الجدول { *overflow: Auto ؛ }
/*
* 1. عرض مؤشر اليد لعناصر النماذج القابلة للنقر
* 2. السماح بتصميم عناصر النماذج القابلة للنقر في iOS
*/
الزر ، الإدخال [type = "button"] ، إدخال [type = "reset"] ، إدخال [type = "submit"] {cursor: pointer ؛ -بكيت ظهور: زر ؛ }
/*
* تحجيم مربع ثابت ومظهره
*/
الإدخال [type = "checkbox"] ، إدخال [type = "radio"] {box-size: border-box ؛ }
إدخال [type = "search"] {-webkit -Appearance: textfield ؛ -Moz-Box-Size: Content-Box ؛ -webkit-box-size: content-box ؛ مربع حجم: صندوق المحتوى ؛ }
إدخال [type = "search"] ::-WebKit-Search-Decoration {-WebKit-Appearance: None ؛ }
/*
* إزالة الحشو الداخلي والحدود في FF3/4: H5BP.com/L
*/
Button ::-Moz-focus-Inner ، input ::-Moz-focus-Inner {border: 0 ؛ الحشو: 0 ؛ }
/*
* 1. قم بإزالة شريط التمرير العمودي الافتراضي في IE6/7/8/9
* 2. السماح فقط بتغيير حجم الرأسي
*/
textarea {overflow: auto ؛ المحاذاة الرأسية: أعلى ؛ تغيير الحجم: عمودي. }
/ * ألوان الصلاحية الشكل */
الإدخال: صالح ، textarea: صالح {}
الإدخال: غير صالح ، textarea: غير صالح {background-color: #f0dddd ؛ }
/* ===============================================================سف
الطاولات
======================================================================================== ^
الجدول {حدود الحدود: الانهيار ؛ تباعد الحدود: 0 ؛ }
td {alsal-align: top ؛ }
/* ==تش
مؤلف:
======================================================================================== ^
/* == | = فئات المساعد غير السامحة ====================== يتعلق
يرجى تحديد أنماطك قبل هذا القسم.
======================================================================================== ^
/ * لاستبدال الصورة */
.ir {display: block ؛ الحدود: 0 ؛ استولى النص: -999EM ؛ الفائض: مخفي. لون الخلفية: شفاف. تكرار الخلفية: عدم التكرار ؛ محاذاة النص: اليسار ؛ الاتجاه: LTR ؛ }
.ir br {display: none ؛ }
/ * الاختباء من كل من ScreenReaders and Browsers: H5BP.com/u */
.hidden {Display: None! Armort ؛ الرؤية: مخفية ؛ }
)
. مقطع: Rect (0 0 0 0) ؛ الارتفاع: 1 بكسل ؛ الهامش: -1px ؛ الفائض: مخفي. الحشو: 0 ؛ الموقف: مطلق ؛ العرض: 1px ؛ }
/ * يمتد فئة.
.visialehidden.focusable: نشط ،. الارتفاع: السيارات ؛ الهامش: 0 ؛ الفائض: مرئي ؛ الموقف: ثابت. العرض: السيارات ؛ }
/ * الاختباء بصريًا ومن قادة الشاشة ، ولكن الحفاظ على التصميم */
. }
/ * تحتوي على عوامات: h5bp.com/q */
.clearfix: قبل ، .clearfix: بعد {content: "" ؛ العرض: الجدول ؛ }
.clearfix: بعد {clear: كلاهما ؛ }
.clearfix {Zoom: 1 ؛ }
/* ==|== media queries ===================================================================================
استفسارات وسائل الإعلام النائبة للتصميم المستجيب.
هذه تجاوزت أنماط الأساسيات ("المحمول أولاً")
تعديل كما يتطلب المحتوى.
======================================================================================== ^
MEDIA SCREEN فقط و (MIN-WIDTH: 480px) {
/ * تعديلات النمط لـ Viewports 480px و Over Go Here */
}
MEDIA SCREEN فقط و (MIN-WIDTH: 768px) {
/ * تعديلات النمط لـ Viewports 768px و Over Go Here */
}
/* == | == أنماط الطباعة ======================================================================================================================================================
أنماط الطباعة.
inline لتجنب اتصال HTTP المطلوب: h5bp.com/r
======================================================================================== ^
media print {
* {الخلفية: شفافة! مهمة ؛ اللون: أسود! مهم ؛ النص الشادو: لا شيء! مهم ؛ مرشح: لا شيء! مهم ؛ -MS-Filter: لا شيء! مهم ؛ }/ * المطبوعات السوداء بشكل أسرع: h5bp.com/s */
A ، A: زيارة {decoration text: thankline ؛ }
A [HREF]: بعد {content: "(" attr (href) ")" ؛ }
ABBR [title]: بعد {content: "(" attr (title) ")" ؛ }
.ir a: بعد ، a [href^= "javaScript:"]: بعد ، a [href^= "#"]: بعد {content: "" ؛ }/ * لا تعرض روابط للصور ، أو روابط javaScript/داخلية */
pre ، blockquote {border: 1px solid #999 ؛ الصفحة الرئيسية-inside: تجنب ؛ }
thead {Display: Table-Header-Group ؛ }/ * h5bp.com/t */
tr ، img {page-break-inside: تجنب ؛ }
img {max-width: 100 ٪! مهم ؛ }
page {margin: 0.5cm ؛ }
P ، H2 ، H3 {Orphans: 3 ؛ الأرامل: 3 ؛ }
H2 ، H3 {page-break-efter: recking ؛ }
}
#starttimer {
الموقف: ورث
العرض: 75 بكسل ؛
الارتفاع: 20 بكسل ؛
أعلى: 35 بكسل ؛
اليسار: 25 بكسل ؛
المؤشر: مؤشر
}
#stoptimer {
الموقف: ورث.
العرض: 75 بكسل ؛
الارتفاع: 20 بكسل ؛
أعلى: 10 بكسل ؛
اليسار: 25 بكسل ؛
المؤشر: مؤشر
}
#CountDownCanvas {
الحدود الحدودية: 25 بكسل ؛
Box-Shadow: 10px 10px 5px #888888 ؛
}