댓글 : 타이머를 들으면 JS에서만 구현할 수 있다고 생각할 수 있습니다. 실제로 HTML5가 있다는 것을 모르는 경우이 아이디어는 여전히 유효 할 수 있습니다. 다음은 타이머가 HTML5에서 구현되는 방법에 대한 설명입니다. 관심있는 친구들은 그것을 놓치지 않아야합니다.
HTML :<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<!- 항상 최신 렌더링 엔진 (인트라넷에서도) 및 크롬 프레임을 강제로 강제
.htaccess->를 사용하는 경우이를 제거하십시오
<meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge, chrome = 1">
<title> 작업 릴랙스 밸런스를위한 html5 타이머 </title>
<메타 내용 = "">
<meta content = "Kevin">
<meta content = "width = device-width; 초기 스케일 = 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">
<cript>
카운트 다운seconds = 60;
var 핸들 = null;
// 창로드
함수 onloadwindow () {
acanvas = document.getElementById ( "CountdownCanvas");
컨텍스트 = acanvas.getContext ( "2d");
var canvastext = "시작하기 위해 누르십시오 ...";
var xpos = acanvas.width / 2;
var ypos = acanvas.height / 2;
context.font = "12pt Century Gothic";
Context.FillStyle = "#008000;";
context.textalign = "Center";
context.textBaseline = "중간";
context.fillText (Canvastext, XPOS, YPO);
}
함수 uddateCanvas (theContext, 너비, 높이) {
if (countdownseconds <0) {
ClearInterval (핸들);
핸들 = null;
Alert ( "이봐, 시간이 다가요!");
반환 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, 너비, 높이);
context.font = "24pt Century Gothic";
context.filltext (minstr + ":" + secstr, 너비 / 2, 높이 / 2);
카운트 다운seconds-;
}
함수 startWorkCountDown () {
if (handle! = null) {
ClearInterval (핸들);
}
CountdownSeconds = Document.GetElementById ( "WorkInterValInput"). value * 60;
timedisplaycanvas = document.getElementById ( "CountdownCanvas");
timedisplaycontext2d = timedisplaycanvas.getContext ( "2d");
UpdateCanvas (timedisplaycontext2d, timedisplaycanvas.width, timedisplaycanvas.height);
핸들 = setInterVal (function () {
UpdateCanvas (timedisplaycontext2d, timedisplaycanvas.width, timedisplaycanvas.height);
}, 1000);
}
함수 startrestCountdown () {
if (handle! = null) {
ClearInterval (핸들);
}
CountdownSeconds = Document.GetElementById ( "RestIntervalInput"). value * 60;
timedisplaycanvas = document.getElementById ( "CountdownCanvas");
timedisplaycontext2d = timedisplaycanvas.getContext ( "2d");
UpdateCanvas (timedisplaycontext2d, timedisplaycanvas.width, timedisplaycanvas.height);
핸들 = setInterVal (function () {
UpdateCanvas (timedisplaycontext2d, timedisplaycanvas.width, timedisplaycanvas.height);
}, 1000);
}
</스크립트>
</head>
<body>
<div>
<Header>
<H1> 작업 생활 균형 타이머 </h1>
</헤더>
작업 간격을 선택하십시오 :
<입력 유형 = "번호"value = "25"min = "15"max = "45"step = "5"/>
분
나머지 간격을 선택하십시오 :
<입력 유형 = "숫자"value = "5"min = "3"max = "10"step = "1"/>
분
<canvas>
이것은 캔버스입니다
</캔버스>
<버튼>
열심히 일하십시오
</버튼>
<버튼>
휴식을 취하십시오
</버튼>
<FUTER>
<p>
&복사; 저작권 보유
</p>
</바닥다>
</div>
</body>
</html>
CSS3 :
/*
* html5 m 보일러 플레이트
*
* 다음은 크로스 브라우저 스타일에 대한 많은 연구 결과입니다.
* 신용은 인라인으로 남겨졌고 Nicolas Gallagher, Jonathan Neal에게 감사합니다.
* Kroc Camen 및 H5BP Dev 커뮤니티 및 팀.
*
*이 CSS에 대한 자세한 정보 : h5bp.com/css
*
* == | == normalize =======================================================================================================================================
*/
/* ========================================================================================================================
HTML5 디스플레이 정의
===============================================================================================
기사, 제외, 세부 사항, 그림, 그림, 바닥 글, 헤더, HGROUP, NAV, 섹션 {display : block; }
헤더 {Text-Shadow : #220000 0px 0px 10px 10px 10px;}
오디오, 캔버스, 비디오 {디스플레이 : 인라인 블록; *디스플레이 : 인라인; *줌 : 줌 : 줌 : 줌 : 1; 1; }
오디오 : not ([controls]) {display : none; }
[숨겨진] {디스플레이 : 없음; }
/* ========================================================================================================================
베이스
===============================================================================================
/*
* 1. Body Font-Size가 EM 단위를 사용하여 설정 될 때 IE6/7에서 홀수로 올바른 텍스트 상승
* 2. 비 EI에서 수직 스크롤바를 강제로 강제로합니다
* 3. iOS 텍스트 크기 방지 사용자 Zoom을 비활성화하지 않고 장치 방향 변경에서 조정 : h5bp.com/g
*/
html {font-size : 100%; 오버플로-스크롤; -webkit- 텍스트 크기 조정 : 100%; -ms- 텍스트 크기 조정 : 100%; }
신체 {마진 : 0; 글꼴 크기 : 24px; 라인 높이 : 1.231;}
신체, 버튼, 입력, 선택, textarea {font-family : "Century Gothic"; 색상 :#008000}
/*
* 선택 하이라이트에서 Text-Shadow를 제거하십시오 : H5BP.com/I
*이 선택 선언은 분리되어야합니다
* 또한 : 핫 핑크! (또는 디자인과 일치하도록 배경색을 사용자 정의하십시오)
*/
::-Moz-Seelection {배경 : #fe57a1; 색상 : #ffff; 텍스트 쉐이드 : 없음; }
:: 선택 {배경 : #fe57a1; 색상 : #fff; 텍스트 쉐이드 : 없음; }
/* ========================================================================================================================
모래밭
===============================================================================================
A {색상 : #00e; }
A : 방문 {컬러 : #551A8B; }
A : 호버 {색상 : #06E; }
A : 초점 {개요 : 얇은 점선; }
/ * 모든 브라우저에 집중하고 호버링 될 때 가독성 향상 : h5bp.com/h */
A : 호버, A : Active {개요 : 0; }
/* ========================================================================================================================
타이포그래피
===============================================================================================
abbr [title] {Border-Bottom : 1px 점선; }
b, 강한 {font-weight : bold; }
Blockquote {마진 : 1em 40px; }
DFN {글꼴 스타일 : 이탤릭체; }
HR {디스플레이 : 블록; 높이 : 1px; 국경 : 0; 테두리 : 1px 고체 #ccc; 여백 : 1em 0; 패딩 : 0; }
INS {배경 : 색상 : #000; 텍스트 결정 : 없음; }
Mark {배경 : #ff0; 색상 : #000; 글꼴 스타일 : 이탈리아; 글꼴 중량 : 대담한; }
/ * Redeclare Monospace Font 가족 : h5bp.com/j */
사전, 코드, KBD, SAMP {Font-Family : Monospace, Monospace; _font-family : 'Courier New', Monospace; 글꼴 크기 : 1EM; }
/ * 모든 브라우저에서 사전 형식화 된 텍스트의 가독성 향상 */
pre {흰색 공간 : pre; 흰색 공간 : 사전 랩; Word-Wrap : 브레이크 워드; }
Q {인용문 : 없음; }
Q : 전, Q : {content : ""이후; 내용 : 없음; }
작은 {글꼴 크기 : 85%; }
/ * Line-Height에 영향을 미치지 않고 위치 위시 및 슈퍼 스크립트 내용 : h5bp.com/k */
서브, SUP {font-size : 75%; 라인 높이 : 0; 위치 : 상대; 수직 정상 : 기준선; }
sup {상단 : -0.5em; }
sub {하단 : -0.25EM; }
/* ========================================================================================================================
기울기
===============================================================================================
ul, ol {마진 : 1em 0; 패딩 : 0 0 40px; }
DD {마진 : 0 0 40px; }
Nav ul, Nav ol {목록 스타일 : 없음; 목록 스타일 이미지 : 없음; 여백 : 0; 패딩 : 0; }
/* ========================================================================================================================
임베디드 콘텐츠
===============================================================================================
/*
* 1. IE7에서 스케일링 될 때 이미지 품질 향상 : h5bp.com/d
* 2. 이미지 컨테이너의 이미지와 경계 사이의 간격을 제거하십시오 : h5bp.com/e
*/
img {국경 : 0; -ms-interpolation-mode : bicubic; 수직 정상 : 중간; }
/*
* IE9에 숨겨져 있지 않은 오버플로를 올바르게합니다
*/
svg : not (: root) {오버플로 : 숨겨; }
/* ========================================================================================================================
인물
===============================================================================================
그림 {마진 : 0; }
/* ========================================================================================================================
형태
===============================================================================================
양식 {마진 : 0; }
fieldset {border : 0; 여백 : 0; 패딩 : 0; }
/ * '레이블'이 관련 양식 요소로 초점을 바꿀 것임을 나타냅니다 */
레이블 {커서 : 포인터; }
/*
* 1. IE6/7/8/9에 상속되지 않음
* 2. IE6/7에 올바른 정렬이 이상하게 표시됩니다
*/
전설 {국경 : 0; *마진 왼쪽 : -7px; 패딩 : 0; }
/*
* 1. 모든 브라우저에서 우수한 글꼴 크기가 상속되지 않습니다
* 2. FF3/4 S5 크롬에서 마진을 제거하십시오
* 3. 모든 브라우저에서 일관된 수직 정렬 표시 정의
*/
버튼, 입력, 선택, TextArea {font-size : 100%; 여백 : 0; 수직 정상 : 기준선; *수직 정상 : 중간; }
/*
* 1. FF3/4와 일치하도록 라인 높이를 평소처럼 정의합니다 (UA 스타일에서 중요합니다!
* 2. IE6/7에서 올바른 내부 간격이 이상하게 표시됩니다
*/
버튼, 입력 {line-height : normal; *오버플로 : 가시; }
/*
* '테이블'에서 내부 간격을 다시 소개하여 IE6/7의 중첩 및 공백 문제를 피하십시오.
*/
테이블 버튼, 테이블 입력 { *오버플로 : 자동; }
/*
* 1. 클릭 가능한 양식 요소에 대한 핸드 커서 표시
* 2. iOS에서 클릭 가능한 양식 요소의 스타일링 허용
*/
버튼, 입력 [type = "button"], input [type = "reset"], input [type = "제출"] {커서 : 포인터; -webkit-appearance : 버튼; }
/*
* 일관된 상자 크기 및 외관
*/
입력 [type = "checkbox"], 입력 [type = "radio"] {box-sizing : border-box; }
입력 [type = "search"] {-webkit -Appearance : Textfield; -Moz- 박스 크기 : 컨텐츠 박스; -webkit- 박스 크기 : 컨텐츠 박스; 박스 사이징 : 컨텐츠 박스; }
입력 [type = "search"] ::-webkit-search-decoration {-webkit-appearance : none; }
/*
* FF3/4 : H5BP.com/L에서 내부 패딩 및 테두리를 제거하십시오
*/
버튼 ::- Moz-focus-inner, 입력 ::-Moz-focus-inner {border : 0; 패딩 : 0; }
/*
* 1. IE6/7/8/9에서 기본 수직 스크롤 바를 제거하십시오
* 2. 수직 크기 조정 만 허용합니다
*/
Textarea {오버플로 : 자동; 수직 정상 : 상단; 크기 조정 : 수직; }
/ * 형태의 유효성에 대한 색상 */
입력 : 유효, TextArea : 유효한 {}
입력 : 유효하지 않은, TextRea : invalid {background-color : #f0dddd; }
/* ========================================================================================================================
테이블
===============================================================================================
표 {Border-Collapse : 붕괴; 국경 간격 : 0; }
TD {수직-정상 : 상단; }
/* == | == 1 차 스타일 ==================================================================================================================================
작가:
===============================================================================================
/* == | = 비 미용 도우미 클래스 =================================================================================================
이 섹션 앞에 스타일을 정의하십시오.
===============================================================================================
/ * 이미지 교체 용 */
.ir {display : 블록; 국경 : 0; 텍스트 안정 : -999EM; 오버플로 : 숨겨진; 배경색 : 투명; 배경 반복 : 비 반복; 텍스트 정렬 : 왼쪽; 방향 : ltr; }
.ir br {디스플레이 : 없음; }
/ * 스크린 리더와 브라우저 모두에서 숨겨져 있습니다 : h5bp.com/u */
.hidden {display : 없음! 중요; 가시성 : 숨겨진; }
/ * 시각적으로 만 숨기지 만 ScreenReaders에서 사용할 수 있습니다 : h5bp.com/v */
.visallyHidden {Border : 0; 클립 : rect (0 0 0 0); 높이 : 1px; 마진 : -1px; 오버플로 : 숨겨진; 패딩 : 0; 위치 : 절대; 너비 : 1px; }
/ * 키보드를 통해 탐색 할 때 요소가 집중할 수 있도록 .visallyHidden 클래스를 확장합니다. h5bp.com/p */
.visallyHidden.focusable : Active, .visallyHidden.focusable : Focus {Clip : Auto; 높이 : 자동; 여백 : 0; 오버플로 : 가시; 위치 : 정적; 너비 : 자동; }
/ * ScreenReaders에서 시각적으로 숨겨져 있지만 레이아웃을 유지하십시오 */
.Invisible {가시성 : 숨겨진; }
/ * 플로트 포함 : h5bp.com/q */
.ClearFix : 전, .clearFix : {content : ""이후; 디스플레이 : 테이블; }
.ClearFix : {Clear : 둘 다; }
.ClearFix {Zoom : 1; }
/* == | == 미디어 쿼리 =====================================================================================================
반응 형 디자인을위한 자리 표시 자 미디어 쿼리.
이들은 기본 ( 'Mobile First') 스타일을 무시합니다
컨텐츠가 요구하는대로 수정하십시오.
===============================================================================================
@Media 전용 화면 및 (Min-Width : 480px) {
/ * 뷰포트에 대한 스타일 조정 480px 이상 여기로 이동 */
}
@Media 전용 화면 및 (Min-Width : 768px) {
/ * Viewports 768px 및 Over Here에 대한 스타일 조정 */
}
/* == | == 인쇄 스타일 =================================================================================================================================
인쇄 스타일.
필요한 http 연결을 피하기 위해 내려 가기 : h5bp.com/r
===============================================================================================
@Media print {
* {배경 : 투명! 중요; 색상 : 검은 색! 중요; Text-Shadow : 없음! 중요; 필터 : 없음! 중요; -ms-filter : 없음! 중요; }/ * 검은 색 인쇄가 더 빠릅니다 : h5bp.com/s */
a, a : 방문 {텍스트 결정 : 밑줄; }
a [href] : {content : "("attr (href) ")"; }
abbr [title] : {content : "("attr (title) ")"; }
.ir a : 이후에, [href^= "javaScript :"] : 후, [href^= "#"] : {content : ""; }/ * 이미지 또는 JavaScript/내부 링크에 대한 링크를 표시하지 마십시오 */
pre, blockquote {테두리 : 1px solid #999; 페이지 브레이크 인 사이드 : 피; }
thead {디스플레이 : 테이블 헤더 그룹; }/ * h5bp.com/t */
tr, img {page-break-inside : 피; }
IMG {Max-Width : 100%! 중요; }
@Page {마진 : 0.5cm; }
P, H2, H3 {Orphans : 3; 과부 : 3; }
H2, H3 {Page-Break-Fafter : 피; }
}
#StartTimer {
위치 : 상속
너비 : 75px;
높이 : 20px;
상단 : 35px;
왼쪽 : 25px;
커서 : 포인터
}
#StopTimer {
위치 : 상속;
너비 : 75px;
높이 : 20px;
상단 : 10px;
왼쪽 : 25px;
커서 : 포인터
}
#countdowncanvas {
Border-Radius : 25px;
Box-Shadow : 10px 10px 5px #888888;
}