타이머 만들기를 위한 H5 코드 데모-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

타이머 만들기를 위한 H5 코드 데모

Y2J

May 23, 2017 pm 01:59 PM

html5시간제 노동자

타이머에 대해 듣고 나면 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 id="work-life-nbsp-balance-nbsp-timer">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&#39;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; 
}

【相关推荐】

위 내용은 타이머 만들기를 위한 H5 코드 데모의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.