타이머 만들기를 위한 H5 코드 데모
- Y2J원래의
- 2017-05-23 13:59:164978검색
타이머에 대해 듣고 나면 js에서만 구현할 수 있다고 생각할 수도 있습니다. 사실 html5. 다음은 모두를 위한 내용입니다. HTML5에서 타이머를 구현하는 방법을 소개합니다. 관심 있는 친구들은 놓치지 마세요. html:
코드는 다음과 같습니다.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5 Timer for work-relax balance</title>
<meta name="description" content="">
<meta name="author" content="kevin">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
countDownSeconds = 60;
var handle = null;
//window load
function onLoadWindow() {
aCanvas = document.getElementById("countdownCanvas"); context = aCanvas.getContext("2d");
var canvasText = "Press to Start...";
var xPos = aCanvas.width / 2;
var yPos = aCanvas.
height / 2;
context.font = "12pt Century Gothic";
context.fillStyle = "#008000;";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(canvasText, xPos, yPos);
}
function updateCanvas(theContext, width, height) {
if (countDownSeconds < 0) {
clearInterval(handle);
handle = null;
alert("hey, time is up!");
return
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, width, height);
context.font = "24pt Century Gothic";
context.fillText(minStr + " : " + secStr, width / 2, height / 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);
}
</script>
</head>
<body onload="onLoadWindow()">
<p align="center">
<header>
<h1>work-life balance timer</h1>
</header>
Please choose the work interval:
<input name="workIntervalInput" id="workIntervalInput" type="number" value="25" min="15" max="45" step="5"/>
minutes
Please choose the rest interval:
<input name="restIntervalInput" id="restIntervalInput" type="number" value="5" min="3" max="10" step="1"/>
minutes
<canvas id="countdownCanvas" width="
300
" height="50" style="border:2px solid black">
This is a canvas
</canvas>
<button
onclick
="startWorkCountDown()">
Work Hard
</button>
<button onclick="startRestCountDown()">
Take A
Break
</button>
<footer>
<p>
&
copy
; Copyright Reserved
</p>
</footer>
</p>
</body>
</html>css3: 코드는 다음과 같습니다.
/*
* HTML5 ✰ 상용구
*
* 다음은 크로스 브라우저 스타일에 대한 많은 연구의 결과입니다.
* 크레딧 왼쪽 Nicolas G모두agher, 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 및 (min-width: 768px) {
/* 768px 이상의 뷰포트에 대한 스타일 조정은 여기로 이동 */
}
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: 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: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
#startTimer{
position:inherit
width:75px;
height:20px;
top:35px;
left:25px;
cursor:pointer
}
#stopTimer{
position:inherit;
width:75px;
height:20px;
top:10px;
left:25px;
cursor:pointer
}
#countdownCanvas{
border-radius:25px;
box-shadow:10px 10px 5px #888888;
}【相关推荐】
1. HTML5免费视频教程
4. 教你用H5绘图的基础方法
위 내용은 타이머 만들기를 위한 H5 코드 데모의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!