찾다
웹 프론트엔드H5 튜토리얼타이머 만들기를 위한 H5 코드 데모

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

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; 
}

【相关推荐】

1. HTML5免费视频教程

2. 通过H5实现拍照功能的实例详解

3. H5制作一个注册页面的代码实例

4. 教你用H5绘图的基础方法

5. 详解H5和HTML4的区别

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다Apr 14, 2025 am 12:05 AM

H5는 HTML5의 약어 일뿐 만 아니라 더 넓은 현대 웹 개발 기술 생태계를 나타냅니다. 1. H5는 HTML5, CSS3, JavaScript 및 관련 API 및 기술을 포함합니다. 2. 그것은 더 풍부하고 대화식이며 부드러운 사용자 경험을 제공하며 여러 장치에서 원활하게 실행할 수 있습니다. 3. H5 기술 스택을 사용하여 반응 형 웹 페이지와 복잡한 대화식 기능을 만들 수 있습니다.

H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어Apr 13, 2025 am 12:01 AM

H5 및 HTML5는 동일한 것을, 즉 html5를 나타냅니다. HTML5는 HTML의 다섯 번째 버전으로 시맨틱 태그, 멀티미디어 지원, 캔버스 및 그래픽, 오프라인 스토리지 및 로컬 스토리지와 같은 새로운 기능을 제공하여 웹 페이지의 표현성 및 상호 작용성을 향상시킵니다.

H5는 무엇을 언급합니까? 맥락 탐색H5는 무엇을 언급합니까? 맥락 탐색Apr 12, 2025 am 12:03 AM

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

H5 : 도구, 프레임 워크 및 모범 사례H5 : 도구, 프레임 워크 및 모범 사례Apr 11, 2025 am 12:11 AM

H5 개발에서 마스터 해야하는 도구 및 프레임 워크에는 vue.js, React 및 Webpack이 포함됩니다. 1.vue.js는 사용자 인터페이스를 구축하고 구성 요소 개발을 지원하는 데 적합합니다. 2. 복잡한 응용 프로그램에 적합한 가상 DOM을 통해 페이지 렌더링을 최적화합니다. 3. Webpack은 모듈 포장에 사용되며 리소스로드를 최적화합니다.

HTML5의 유산 : 현재 H5 이해HTML5의 유산 : 현재 H5 이해Apr 10, 2025 am 09:28 AM

html5hassignificallytransformedwebdevelopmentbyintranticalticlementements, 향상 Multimediasupport 및 Improvingperformance.1) itmadewebsitessmoreaccessibleadseo 친환경적 인 요소, 및 .2) Html5intagnatee

H5 코드 : 접근성 및 시맨틱 HTMLH5 코드 : 접근성 및 시맨틱 HTMLApr 09, 2025 am 12:05 AM

H5는 시맨틱 요소 및 ARIA 속성을 통해 웹 페이지 접근성 및 SEO 효과를 향상시킵니다. 1. 컨텐츠 구조를 구성하고 SEO를 개선하기 위해 사용합니다. 2. Aria-Label과 같은 ARIA 속성은 접근성을 향상시키고 보조 기술 사용자는 웹 페이지를 원활하게 사용할 수 있습니다.

H5는 html5와 동일합니까?H5는 html5와 동일합니까?Apr 08, 2025 am 12:16 AM

"H5"와 "HTML5"는 대부분의 경우 동일하지만 특정 시나리오에서는 다른 의미를 가질 수 있습니다. "HTML5"는 새로운 태그와 API를 포함하는 W3C 정의 표준입니다. "H5"는 일반적으로 HTML5의 약어이지만 모바일 개발에서는 HTML5를 기반으로 한 프레임 워크를 참조 할 수 있습니다. 이러한 차이를 이해하면 프로젝트 에서이 용어를 정확하게 사용하는 데 도움이됩니다.

H5의 기능은 무엇입니까?H5의 기능은 무엇입니까?Apr 07, 2025 am 12:10 AM

H5 또는 HTML5는 HTML의 다섯 번째 버전입니다. 개발자에게 더 강력한 도구 세트를 제공하여 복잡한 웹 애플리케이션을보다 쉽게 ​​만들 수 있습니다. H5의 핵심 기능에는 다음이 포함됩니다. 1) 웹 페이지에 그래픽 및 애니메이션을 그리는 요소; 2) 웹 페이지 구조를 SEO 최적화에 명확하고 도움이되는 시맨틱 태그 등; 3) GeolocationApi 지원 위치 기반 서비스와 같은 새로운 API; 4) 호환성 테스트 및 폴리 필 라이브러리를 통해 크로스 브라우저 호환성을 보장해야합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는