HTML5 타이머 작은 example_html5 튜토리얼 기술

html:

复aze代码

代码如下:

<머리>











<스크립트>
countDownSeconds = 60;
var 핸들 = 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 = "12포인트 세기 고딕";
context.fillStyle = "#008000;";
context.textAlign = "중심";
context.textBaseline = "중간";
context.fillText(canvasText, xPos, yPos);
}
function updateCanvas(theContext, width, height) {
if (countDownSeconds < 0) {
clearInterval(handle);
핸들 = 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 = "24포인트 세기 고딕";
context.fillText(minStr " : " secStr, 너비 / 2, 높이 / 2);
countDownSeconds--;
}
function 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);
}
function startRestCountDown() {
if (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);
}

<헤더>

일과 삶의 균형 타이머

작업 간격을 선택하세요:

분

휴식 간격을 선택하세요:

분



캔버스입니다




열심히 일하세요


휴식을 취하세요

<바닥글>

&복사; 저작권 보유

css3:

코드 복사

코드는 다음과 같습니다.

/*
* HTML5 ✰ 상용구
*
* 다음은 크로스 브라우저 스타일링에 대한 많은 연구의 결과입니다.
* 크레딧은 인라인으로 남겨졌으며 Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, H5BP 개발 커뮤니티 및 팀에 큰 감사를 드립니다.
*
* 이 CSS에 대한 자세한 정보: h5bp.com/css
*
* ==|== 정규화 ================= =========================================
*/

/* ============================================= ===============================
HTML5 디스플레이 정의
========== ================================================= ============== */
기사, 옆, 세부정보, 그림캡션, 그림, 바닥글, 헤더, hgroup, nav, 섹션 { 디스플레이: 블록; }
헤더 {text-shadow: #220000 0px 0px 10px 10px;}
오디오, 캔버스, 비디오 { 디스플레이: 인라인 블록; *디스플레이: 인라인; *줌: 1; }
audio:not([controls]) { 디스플레이: 없음; }
[숨김] { 표시: 없음; }
/* =========================================== =================================
베이스
========== ================================================= ============== */
/*
* 1. 본문 글꼴 크기가 em 단위로 설정된 경우 IE6/7에서 텍스트 크기가 이상하게 조정되는 문제 수정
* 2 . 비 IE
에서 세로 스크롤 막대 강제 적용* 3. 사용자 확대/축소를 비활성화하지 않고 기기 방향 변경 시 iOS 텍스트 크기 조정 방지: h5bp.com/g
*/
html { 글꼴 크기: 100% ; 오버플로-y: 스크롤; -웹킷-텍스트-크기-조정: 100%; -ms-텍스트-크기-조정: 100%; }
body { 여백: 0; 글꼴 크기: 24px; line-height: 1.231;}
body, 버튼, 입력, 선택, 텍스트 영역 {font-family:"Century Gothic"; color:#008000}
/*
* 선택 강조 표시에서 텍스트 그림자 제거: h5bp.com/i
* 이러한 선택 선언은 분리되어야 합니다
* 또한: 핫 핑크! (또는 디자인에 맞게 배경색을 맞춤 설정하세요)
*/
::-moz-selection { background: #fe57a1; 색상: #fff; 텍스트 그림자: 없음; }
::selection { 배경: #fe57a1; 색상: #fff; 텍스트 그림자: 없음; }

/* ======================================= ====================================
링크
======== ================================================= ================= */
a { color: #00e; }
a:visited { 색상: #551a8b; }
a:hover { 색상: #06e; }
a:focus { 윤곽선: 얇은 점선; }
/* 모든 브라우저에서 초점을 맞추고 마우스를 가져갈 때 가독성 향상: h5bp.com/h */
a:hover, a:active { 개요: 0; }

/* ======================================= ====================================
타이포그래피
======= ================================================= ================= */
abbr[제목] { border-bottom: 1px dotted; }
b, 강한 { 글꼴 두께: 굵게; }
blockquote { 여백: 1em 40px; }
dfn { 글꼴 스타일: 기울임꼴; }
시간 { 디스플레이: 블록; 높이: 1px; 테두리: 0; 테두리 상단: 1px 단색 #ccc; 여백: 1em 0; 패딩: 0; }
ins { 배경: #ff9; 색상: #000; 텍스트 장식: 없음; }
마크 { 배경: #ff0; 색상: #000; 글꼴 스타일: 기울임체; 글꼴 두께: 굵게; }
/* 고정 폭 글꼴 모음 다시 선언: h5bp.com/j */
pre, code, kbd, samp { 글꼴 계열: monospace, monospace; _font-family: '신규 택배', 고정 폭; 글꼴 크기: 1em; }
/* 모든 브라우저에서 미리 서식이 지정된 텍스트의 가독성 향상 */
pre { white-space: pre; 공백: 사전 포장; word-wrap: break-word; }
q { 따옴표: 없음; }
q:이전, q:이후 { 내용: ""; 내용: 없음; }
작은 { 글꼴 크기: 85%; }
/* line-height에 영향을 주지 않고 아래 첨자와 위 첨자 내용 위치 지정: h5bp.com/k */
sub, sup {font-size: 75%; 줄 높이: 0; 위치: 상대; 수직 정렬: 기준선; }
sup { top: -0.5em; }
하위 { 하단: -0.25em; }

/* ======================================= ====================================
목록
======= ================================================= ================= */
ul, ol { margin: 1em 0; 패딩: 0 0 0 40px; }
dd { 여백: 0 0 0 40px; }
nav ul, nav ol { 목록 스타일: 없음; 목록 스타일 이미지: 없음; 여백: 0; 패딩: 0; }

/* ======================================= ====================================
삽입된 콘텐츠
====== ================================================= ================== */
/*
* 1. IE7에서 크기를 조정할 때 이미지 품질 개선: h5bp.com/d
* 2. 이미지 컨테이너의 이미지와 테두리 사이의 간격을 제거합니다: h5bp.com/e
*/
img { border: 0; -ms-보간-모드: 쌍입방; 수직 정렬: 중간; }
/*
* IE9에서 숨겨진 올바른 오버플로가 아닙니다.
*/
svg:not(:root) { 오버플로: 숨겨진; }

/* ======================================= ====================================
그림
======= ================================================= ================= */
그림 { 여백: 0; }

/* =============================================== =============================
양식
=============== ================================================= ========== */
form { margin: 0; }
fieldset { 테두리: 0; 여백: 0; 패딩: 0; }
/* 'label'이 관련 양식 요소로 초점을 이동함을 나타냅니다. */
label {cursor: 포인터; }
/*
* 1. IE6/7/8/9에서 상속되지 않는 올바른 색상
* 2. IE6/7에서 이상하게 표시되는 올바른 정렬
*/
legend { border: 0; *왼쪽 여백: -7px; 패딩: 0; }
/*
* 1. 모든 브라우저에서 상속되지 않는 올바른 글꼴 크기
* 2. FF3/4 S5 Chrome에서 여백 제거
* 3. 모든 브라우저에서 일관된 수직 정렬 표시 정의
*/
버튼, 입력, 선택, 텍스트 영역 { 글꼴 크기: 100%; 여백: 0; 수직 정렬: 기준선; *수직 정렬: 중간; }
/*
* 1. FF3/4와 일치하도록 line-height를 일반으로 정의합니다(UA 스타일시트에서 !important를 사용하여 설정)
* 2. IE6/7에서 이상하게 표시되는 내부 간격 수정
*/
버튼, 입력 { line-height: Normal; *오버플로: 표시됨; }
/*
* IE6/7에서 중복 및 공백 문제를 피하기 위해 '테이블'에 내부 공백을 다시 도입합니다.
*/
테이블 버튼, 테이블 입력 { *overflow: auto; }
/*
* 1. 클릭 가능한 양식 요소에 손 모양 커서 표시
* 2. iOS에서 클릭 가능한 양식 요소의 스타일 지정 허용
*/
button, input[type="button" ], 입력[type="reset"], input[type="submit"] { 커서: 포인터; -webkit-appearance: 버튼; }
/*
* 일관된 상자 크기 및 모양
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: 텍스트 필드; -moz-box-sizing: 콘텐츠 상자; -webkit-box-sizing: 콘텐츠 상자; 상자 크기 조정: 콘텐츠 상자; }
입력[type="search"]::-webkit-search-장식 { -webkit-appearance: none; }
/*
* FF3/4에서 내부 패딩과 테두리 제거: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus - 내부 { 테두리: 0; 패딩: 0; }
/*
* 1. IE6/7/8/9에서 기본 세로 스크롤 막대 제거
* 2. 세로 크기 조정만 허용
*/
textarea { Overflow: auto; 수직 정렬: 상단; 크기 조정: 수직; }
/* 양식 유효성을 위한 색상 */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }

/* ======================================= ====================================
테이블
======= ================================================= ================= */
테이블 { border-collapse:collapse; 테두리 간격: 0; }
td { 수직 정렬: 상단; }

/* ==|== 기본 스타일 ================================== ===================
저자:
======================= ================================================= = */

/* ==|== 비의미적 도우미 클래스 ============================= ===========
이 섹션 이전에 스타일을 정의하세요.
============================================= =========================== */
/* 이미지 교체용 */
.ir { 디스플레이: 블록; 테두리: 0; 텍스트 들여쓰기: -999em; 오버플로: 숨김; 배경색: 투명; background-repeat: 반복하지 않음; 텍스트 정렬: 왼쪽; 방향: ltr; }
.ir br { 디스플레이: 없음; }
/* 스크린리더와 브라우저 모두에서 숨기기: h5bp.com/u */
.hidden { 디스플레이: 없음 !important; 가시성: 숨김; }
/* 시각적으로만 숨기고 스크린리더에서는 사용할 수 있도록 합니다: h5bp.com/v */
.visuallyhidden { border: 0; 클립: 직사각형(0 0 0 0); 높이: 1px; 여백: -1px; 오버플로: 숨김; 패딩: 0; 위치: 절대; 너비: 1px; }
/* 키보드를 통해 탐색할 때 요소에 포커스를 둘 수 있도록 .visuallyhidden 클래스를 확장합니다. h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { 클립 : 자동; 높이: 자동; 여백: 0; 오버플로: 표시됨; 위치: 정적; 너비: 자동; }
/* 시각적으로나 스크린리더에서는 숨기지만 레이아웃은 유지합니다. */
.invisible { visible: hide; }
/* 부동 소수점 포함: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; 디스플레이: 테이블; }
.clearfix:after { 지우기: 둘 다; }
.clearfix { 확대/축소: 1; }

/* ==|== 미디어 쿼리 ================================== ====================
반응형 디자인을 위한 자리 표시자 미디어 쿼리.
기본('모바일 우선') 스타일을 재정의합니다.
콘텐츠 요구에 따라 수정하세요.
============================================= =========================== */
@media 전용 화면 및 (최소 너비: 480px) {
/* 480px 이상의 뷰포트에 대한 스타일 조정은 여기로 가세요 */
}
@media only screen and (min-width: 768px) {
/* 768px 이상의 뷰포트에 대한 스타일 조정은 여기로 가세요 */
}

/* ==|== 인쇄 스타일 ================================= =====================
인쇄 스타일.
필수 HTTP 연결을 피하기 위해 인라인됨: h5bp.com/r
=================================== ========================================*/
@media print {
* { 배경: 투명 !중요; 색상: 블랙!중요; 텍스트 그림자: 없음 !중요; 필터:없음!중요; -ms-필터: 없음!중요함; } /* 검정색이 더 빠르게 인쇄됩니다: h5bp.com/s */
a, a:visited { text-꾸밈: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* 이미지 링크 또는 자바스크립트/내부 링크를 표시하지 않음 */
pre, blockquote { border: 1px solid #999; 페이지 나누기 내부: 피하십시오; }
머리 { 디스플레이: 테이블-헤더-그룹; } /* h5bp.com/t */
tr, img { 페이지 나누기 내부: 피하기; }
img { 최대 너비: 100% !important; }
@page { 여백: 0.5cm; }
p, h2, h3 { 고아: 3; 과부: 3; }
h2, h3 { 페이지 나누기: 피하기; }
}
#startTimer{
위치:상속
너비:75px;
높이:20px;
상단:35px;
왼쪽:25px;
커서:포인터
}
#stopTimer{
위치:상속;
너비:75px;
높이:20px;
상단:10px;
왼쪽:25px;
커서:포인터
}
#countdownCanvas{
border-radius:25px;
box-shadow:10px 10px 5px #888888;
}