Комментарий: услышав таймер, вы можете подумать, что он может быть реализован только в JS. На самом деле, эта идея все еще может быть действительной, если вы не знаете, что есть HTML5. Вот описание того, как таймер реализован в HTML5. Друзья, которые заинтересованы, не должны пропустить это.
HTML:<! Doctype html>
<html lang = "en">
<голова>
<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; начальная масштаба = 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">
<Скрипт>
Обратный отсчет секунды = 60;
var handle = null;
// нагрузка на окно
function OnloadWindow () {
acanvas = document.getElementbyId ("countdowncanvas");
context = acanvas.getContext ("2d");
var canVastext = "нажмите, чтобы запустить ...";
var xpos = acanvas.width / 2;
var ypos = acanvas.height / 2;
context.font = "12pt век готика";
context.fillstyle = "#008000;";
context.textalign = "center";
Context.TextBaseline = "Middle";
context.filltext (canvastext, xpos, ypos);
}
Функция UpdateCanvas (Thecontext, ширина, высота) {
if (countdownseconds <0) {
ClearInterval (ручка);
ручка = null;
оповещение («Эй, время истекло!»);
возврат 0;
}
minstr = math.floor (countdownseconds / 60);
secstr = обратный отсчет секунд % 60;
if (minstr <10) {
minstr = "0" + minstr;
}
if (secstr <10) {
secstr = "0" + secstr;
}
context.clearrect (0, 0, ширина, высота);
context.font = "24pt век готика";
context.filltext (minstr + ":" + secstr, width / 2, высота / 2);
Обратный отсчет секунды--;
}
функция startWorkCountdown () {
if (ganger! = null) {
ClearInterval (ручка);
}
countdownseconds = document.getElementById ("konyIntervalinput"). Значение * 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 (ganger! = null) {
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>
<тело>
<div>
<заголовок>
<h1> Таймер баланса между работой и личной жизнью </h1>
</header>
Пожалуйста, выберите интервал работы:
<input type = "number" value = "25" min = "15" max = "45" step = "5"/>
минуты
Пожалуйста, выберите интервал отдыха:
<input type = "number" value = "5" min = "3" max = "10" step = "1"/>
минуты
<Canvas>
Это холст
</canvas>
<Кнопка>
Усердно работать
</button>
<Кнопка>
Сделать перерыв
</button>
<нижний колонтитул>
<p>
& копировать; Авторское право зарезервировано
</p>
</cooler>
</div>
</body>
</html>
CSS3:
/*
* Html5 ✰ шаблон
*
* То, что следует, является результатом большого исследования стиля кросс-браузера.
* Кредит остался в линии и большой благодаря Николасу Галлахеру, Джонатану Нилу,
* KOC CAMEN и H5BP DEV Community and Team.
*
* Подробная информация об этом CSS: h5bp.com/css
*
* == | == Нормализация =================================================================================
*/
/* ==================================================================================================
Определения отображения HTML5
=========================================================================
Статья, в стороне, детали, фигнирование, фигура, нижний колонтитул, заголовок, hgroup, vav, section {display: block; }
Header {Text-Shadow: #220000 0px 0px 10px 10px 10px;}
аудио, холст, видео {дисплей: inline-block; *дисплей: inline; *Zoom: 1; }
audio: не ([controls]) {display: none; }
[hidden] {display: none; }
/* ==================================================================================================
База
=========================================================================
/*
* 1. Правильный текст, изменяющийся с изменением размера странно в IE6/7, когда размер шрифта тела установлен с использованием EM-единиц
* 2. Сила вертикальной прокрутки
* 3. Предотвратить настройку размера текста iOS при изменении ориентации устройства без отключения Zoom User: h5bp.com/g
*/
html {font-size: 100%; Overflow-y: прокрутка; -Вебкит-текст-размер-100%; -М-мс-текст-размер-100%; }
Тело {маржа: 0; размер шрифта: 24px; Линия-высота: 1.231;}
тело, кнопка, ввод, выберите, Textarea {font-family: "Century Gothic"; Цвет:#008000}
/*
* Удалите текстовые тени в выборе выделения: h5bp.com/i
* Эти объявления отбора должны быть отдельными
* Также: ярко -розовый! (или настроить цвет фона, чтобы соответствовать вашему дизайну)
*/
::-Moz-Selection {founale: #fe57a1; Цвет: #ffff; Текст-тени: нет; }
:: Selection {founale: #fe57a1; Цвет: #fff; Текст-тени: нет; }
/* ==================================================================================================
Ссылки
=========================================================================
a {color: #00e; }
A: Посещено {Color: #551A8B; }
A: Hover {Color: #06E; }
A: Focus {upline: тонкий пунктир; }
/ * Улучшение читаемости при сфокусированном и зависном во всех браузерах: h5bp.com/h *//
A: Hover, A: Active {Outline: 0; }
/* ==================================================================================================
Типография
=========================================================================
abbr [title] {border-bottom: 1px пунктир; }
b, strong {font-weight: Bold; }
BlockQuote {Margin: 1em 40px; }
dfn {font-style: курсив; }
HR {Display: Block; Высота: 1px; граница: 0; Пограничная топ: 1PX SOLID #CCC; Поле: 1ем 0; Заполнение: 0; }
ins {founly: color: #000; Текстовое декорация: нет; }
Mark {founale: #ff0; Цвет: #000; в стиле шрифта: курсив; шрифт-вес: жирный шрифт; }
/ * Редакция моноспешений Семейство шрифтов: h5bp.com/j */
Pre, code, KBD, Samp {font-family: Monospace, Monospace; _font-family: «Курьер новый», Monospace; размер шрифта: 1ем; }
/ * Улучшение читаемости предварительно форматированного текста во всех браузерах */
pre {белое пространство: pre; Белое пространство: предварительно прозвучал; Word-wrap: слов-слова; }
q {Quotes: none; }
Q: До, Q: After {Content: ""; Контент: нет; }
Small {Font-Size: 85%; }
/ * Подписаться на позицию и контент SuperScript, не влияя на высоту линии: h5bp.com/k */
sub, sup {font-size: 75%; высота линии: 0; позиция: относительно; Вертикальный аровка: базовая линия; }
sup {top: -0.5em; }
sub {внизу: -0.25em; }
/* ==================================================================================================
Списки
=========================================================================
ul, ol {margin: 1em 0; Надо: 0 0 0 40px; }
dd {рентабель: 0 0 0 40px; }
NAV UL, NAV OL {List-Style: нет; Список-изображение: нет; поля: 0; Заполнение: 0; }
/* ==================================================================================================
Встроенный контент
=========================================================================
/*
* 1. Улучшение качества изображения при масштабировании IE7: h5bp.com/d
* 2. Удалите разрыв между изображениями и границами на контейнерах изображения: h5bp.com/e
*/
img {border: 0; -М-в-интерполяция режима: бикубик; Вертикальная атака: средняя; }
/*
* Исправить переполнение не скрыто в IE9
*/
SVG: не (: root) {Overflow: Hidden; }
/* ==================================================================================================
Фигуры
=========================================================================
Рисунок {маржа: 0; }
/* ==================================================================================================
Формы
=========================================================================
Форма {маржа: 0; }
Fieldset {Border: 0; поля: 0; Заполнение: 0; }
/ * Укажите, что «метка» будет сместить фокус на связанный элемент формы */
метка {coursor: pointer; }
/*
* 1. Правильный цвет не наследует в IE6/7/8/9
* 2. Правильное выравнивание отображается странно в IE6/7
*/
Легенда {граница: 0; *Маржа -лето: -7px; Заполнение: 0; }
/*
* 1. Правильный размер шрифта не наследуя во всех браузерах
* 2. Удалить поля в FF3/4 S5 Chrome
* 3. Определите последовательный вертикальный выравнивание во всех браузерах
*/
кнопка, ввод, выберите, Textarea {font-size: 100%; поля: 0; Вертикальный аровка: базовая линия; *Вертикальная Альга: Средняя; }
/*
* 1. Определите высоту линии как обычно, чтобы соответствовать FF3/4 (установлен с использованием! Важно в таблице стилей UA)
* 2. Правильное внутреннее расстояние, как ни странно, отображается в IE6/7
*/
кнопка, вход {линейная-высокая: нормальная; *переполнение: видимо; }
/*
* Вновь внутреннее расстояние в «таблице», чтобы избежать перекрытия и пробелов в IE6/7
*/
Кнопка таблицы, таблица ввода { *переполнение: auto; }
/*
* 1. Отображать курсор ручной
* 2. Разрешить стиль элементов кликабельной формы в iOS
*/
кнопка, вход [type = "button"], input [type = "reset"], input [type = "opper"] {cursor: pointer; -Webkit-Apperance: кнопка; }
/*
* Последовательный размер коробки и внешний вид
*/
input [type = "fackbox"], input [type = "radio"] {box-size: border-box; }
input [type = "search"] {-webkit -appearance: textfield; -Моз-короб-размер: контент-бокс; -Вебкит-бокс-размер: контент-box; Распределение коробки: контент-бокс; }
input [type = "search"] ::-webkit-search-decoration {-webkit-apperance: 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; Вертикальная атака: сверху; Изменение размера: вертикально; }
/ * Цвета для обоснованности формы */
Ввод: Valid, Textarea: value {}
Ввод: недействительный, TextArea: Invalid {фоновый цвет: #f0dddd; }
/* ==================================================================================================
Столы
=========================================================================
Таблица {Border-Collapse: Collapse; Расхождение границы: 0; }
td {vertical-align: top; }
/* == | == Основные стили ===============================================================================
Автор:
=========================================================================
/* == | = не-сумантические вспомогательные классы ==============================================================================
Пожалуйста, определите свои стили перед этим разделом.
=========================================================================
/ * Для замены изображения */
.ir {display: block; граница: 0; текстовый: -999EM; переполнение: скрыто; фоновый цвет: прозрачный; Восновная переписка: без повторения; Текст-альбом: слева; Направление: LTR; }
.ir br {display: none; }
/ * Скрыть как от Screen Readers, так и от браузеров: h5bp.com/u */
.hidden {дисплей: нет! Важно; видимость: скрыта; }
/ * Скрыть только визуально, но имейте его для чтения экрана: h5bp.com/v */
. Визуально -гидденный {граница: 0; клип: rect (0 0 0 0); Высота: 1px; Полевая: -1px; переполнение: скрыто; Заполнение: 0; позиция: абсолютно; Ширина: 1px; }
/ * Распространяет.
.visuallyHidden.focusable: Active, .visuallyHidden.focusable: Focus {clip: Auto; Высота: Авто; поля: 0; переполнение: видимо; позиция: статическая; Ширина: Авто; }
/ * Скрыть визуально и от читателей экрана, но поддерживайте макет */
.invisible {видимость: скрыто; }
/ * Содержат поплавки: h5bp.com/q *//
.clearfix: до, .clearfix: после {content: ""; дисплей: таблица; }
.clearfix: после {clear: оба; }
.clearfix {Zoom: 1; }
/* == | == СМИ запросов ==============================================================================
Заполнительные медиа -запросы для адаптивного дизайна.
Они переопределяют первичные («мобильные первые») стили
Изменить как требуется контент.
=========================================================================
@Media только экран и (мин-ширина: 480px) {
/ * Регулирование стиля для просмотра 480px и зайдите сюда */
}
@media только экран и (мин-ширина: 768px) {
/ * Регулирование стиля для Viewports 768px и зайдите сюда */
}
/* == | == стили печати ===============================================================================================
Стили печати.
Вставлен, чтобы избежать необходимого http -соединения: h5bp.com/r
=========================================================================
@media print {
* {фон: прозрачный! Важно; Цвет: черный! Важно; Текст-тени: нет! Важно; Фильтр: нет! Важно; -ms-Filter: нет! Важно; }/ * Черные отпечатки быстрее: h5bp.com/s */
A, A: посещение {текстовое декорация: подчеркивание; }
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; Пейдж-разрывы внутри: Избегайте; }
Thead {Display: Table-Header-Group; }/ * h5bp.com/t */
tr, img {page-break-indide: избегать; }
img {max-width: 100%! Важно; }
@page {маржа: 0,5 см; }
P, H2, H3 {Сироты: 3; Вдовы: 3; }
H2, H3 {Page-Break-after: избегайте; }
}
#starttimer {
Позиция: наследуя
Ширина: 75px;
Высота: 20px;
Верх: 35px;
Слева: 25px;
Курсор: указатель
}
#stoptimer {
позиция: наследуя;
Ширина: 75px;
Высота: 20px;
Верх: 10px;
Слева: 25px;
Курсор: указатель
}
#countdowncanvas {
граница-радий: 25px;
Box-Shadow: 10px 10px 5px #8888888;
}