HTML5 timer implementation method-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 timer implementation method

高洛峰

Mar 12, 2017 pm 05:03 PM

After hearing about the timer, you may think that it can only be realized in js. In fact, this idea can still be established if you don’t know that there is html5. The following is for everyone Introduce how to implement timers in html5. Friends who are interested should not miss it

html:

<!DOCTYPE html> 
<html> 
<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> 
<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 ✰ Boilerplate 
* 
* What follows is the result of much research on cross-browser styling. 
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 
* Kroc Camen, and the H5BP dev community and team. 
* 
* Detailed information about this CSS: h5bp.com/css 
* 
* ==|== normalize ========================================================== 
*/ 

/* ============================================================================= 
HTML5 display definitions 
========================================================================== */ 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } 
header {text-shadow: #220000 0px 0px 10px 10px;} 
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } 
audio:not([controls]) { display: none; } 
[hidden] { display: none; } 
/* ============================================================================= 
Base 
========================================================================== */ 
/* 
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units 
* 2. Force vertical scrollbar in non-IE 
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g 
*/ 
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 
body { margin: 0; font-size: 24px; line-height: 1.231;} 
body, button, input, select, textarea {font-family:"Century Gothic"; color:#008000} 
/* 
* Remove text-shadow in selection highlight: h5bp.com/i 
* These selection declarations have to be separate 
* Also: hot pink! (or customize the background color to match your design) 
*/ 
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } 
::selection { background: #fe57a1; color: #fff; text-shadow: none; } 

/* ============================================================================= 
Links 
========================================================================== */ 
a { color: #00e; } 
a:visited { color: #551a8b; } 
a:hover { color: #06e; } 
a:focus { outline: thin dotted; } 
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */ 
a:hover, a:active { outline: 0; } 

/* ============================================================================= 
Typography 
========================================================================== */ 
abbr[title] { border-bottom: 1px dotted; } 
b, strong { font-weight: bold; } 
blockquote { margin: 1em 40px; } 
dfn { font-style: italic; } 
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } 
ins { background: #ff9; color: #000; text-decoration: none; } 
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } 
/* Redeclare monospace font family: h5bp.com/j */ 
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: &#39;courier new&#39;, monospace; font-size: 1em; } 
/* Improve readability of pre-formatted text in all browsers */ 
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } 
q { quotes: none; } 
q:before, q:after { content: ""; content: none; } 
small { font-size: 85%; } 
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */ 
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 
sup { top: -0.5em; } 
sub { bottom: -0.25em; } 

/* ============================================================================= 
Lists 
========================================================================== */ 
ul, ol { margin: 1em 0; padding: 0 0 0 40px; } 
dd { margin: 0 0 0 40px; } 
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } 

/* ============================================================================= 
Embedded content 
========================================================================== */ 
/* 
* 1. Improve image quality when scaled in IE7: h5bp.com/d 
* 2. Remove the gap between images and borders on image containers: h5bp.com/e 
*/ 
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } 
/* 
* Correct overflow not hidden in IE9 
*/ 
svg:not(:root) { overflow: hidden; } 

/* ============================================================================= 
Figures 
========================================================================== */ 
figure { margin: 0; } 

/* ============================================================================= 
Forms 
========================================================================== */ 
form { margin: 0; } 
fieldset { border: 0; margin: 0; padding: 0; } 
/* Indicate that &#39;label&#39; will shift focus to the associated form element */ 
label { cursor: pointer; } 
/* 
* 1. Correct color not inheriting in IE6/7/8/9 
* 2. Correct alignment displayed oddly in IE6/7 
*/ 
legend { border: 0; *margin-left: -7px; padding: 0; } 
/* 
* 1. Correct font-size not inheriting in all browsers 
* 2. Remove margins in FF3/4 S5 Chrome 
* 3. Define consistent vertical alignment display in all browsers 
*/ 
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } 
/* 
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) 
* 2. Correct inner spacing displayed oddly in IE6/7 
*/ 
button, input { line-height: normal; *overflow: visible; } 
/* 
* Reintroduce inner spacing in &#39;table&#39; to avoid overlap and whitespace issues in IE6/7 
*/ 
table button, table input { *overflow: auto; } 
/* 
* 1. Display hand cursor for clickable form elements 
* 2. Allow styling of clickable form elements in iOS 
*/ 
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } 
/* 
* Consistent box sizing and appearance 
*/ 
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } 
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } 
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 
/* 
* Remove inner padding and border in FF3/4: h5bp.com/l 
*/ 
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } 
/* 
* 1. Remove default vertical scrollbar in IE6/7/8/9 
* 2. Allow only vertical resizing 
*/ 
textarea { overflow: auto; vertical-align: top; resize: vertical; } 
/* Colors for form validity */ 
input:valid, textarea:valid { } 
input:invalid, textarea:invalid { background-color: #f0dddd; } 

/* ============================================================================= 
Tables 
========================================================================== */ 
table { border-collapse: collapse; border-spacing: 0; } 
td { vertical-align: top; } 

/* ==|== primary styles ===================================================== 
Author: 
========================================================================== */ 

/* ==|== non-semantic helper classes ======================================== 
Please define your styles before this section. 
========================================================================== */ 
/* For image replacement */ 
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } 
.ir br { display: none; } 
/* Hide from both screenreaders and browsers: h5bp.com/u */ 
.hidden { display: none !important; visibility: hidden; } 
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */ 
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ 
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } 
/* Hide visually and from screenreaders, but maintain layout */ 
.invisible { visibility: hidden; } 
/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 

/* ==|== media queries ====================================================== 
PLACEHOLDER Media Queries for Responsive Design. 
These override the primary (&#39;mobile first&#39;) styles 
Modify as content requires. 
========================================================================== */ 
@media only screen and (min-width: 480px) { 
/* Style adjustments for viewports 480px and over go here */ 
} 
@media only screen and (min-width: 768px) { 
/* Style adjustments for viewports 768px and over go here */ 
} 

/* ==|== 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; 
}

The above is the detailed content of HTML5 timer implementation method. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML5 and H5: Understanding the Common UsageApr 22, 2025 am 12:01 AM

There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.

HTML5: The Building Blocks of the Modern Web (H5)Apr 21, 2025 am 12:05 AM

HTML5 is the latest version of the Hypertext Markup Language, standardized by W3C. HTML5 introduces new semantic tags, multimedia support and form enhancements, improving web structure, user experience and SEO effects. HTML5 introduces new semantic tags, such as, ,, etc., to make the web page structure clearer and the SEO effect better. HTML5 supports multimedia elements and no third-party plug-ins are required, improving user experience and loading speed. HTML5 enhances form functions and introduces new input types such as, etc., which improves user experience and form verification efficiency.

H5 Code: Writing Clean and Efficient HTML5Apr 20, 2025 am 12:06 AM

How to write clean and efficient HTML5 code? The answer is to avoid common mistakes by semanticizing tags, structured code, performance optimization and avoiding common mistakes. 1. Use semantic tags such as, etc. to improve code readability and SEO effect. 2. Keep the code structured and readable, using appropriate indentation and comments. 3. Optimize performance by reducing unnecessary tags, using CDN and compressing code. 4. Avoid common mistakes, such as the tag not closed, and ensure the validity of the code.

H5: How It Enhances User Experience on the WebApr 19, 2025 am 12:08 AM

H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.

Deconstructing H5 Code: Tags, Elements, and AttributesApr 18, 2025 am 12:06 AM

HTML5 code consists of tags, elements and attributes: 1. The tag defines the content type and is surrounded by angle brackets, such as. 2. Elements are composed of start tags, contents and end tags, such as contents. 3. Attributes define key-value pairs in the start tag, enhance functions, such as. These are the basic units for building web structure.

Understanding H5 Code: The Fundamentals of HTML5Apr 17, 2025 am 12:08 AM

HTML5 is a key technology for building modern web pages, providing many new elements and features. 1. HTML5 introduces semantic elements such as, , etc., which enhances web page structure and SEO. 2. Support multimedia elements and embed media without plug-ins. 3. Forms enhance new input types and verification properties, simplifying the verification process. 4. Offer offline and local storage functions to improve web page performance and user experience.

H5 Code: Best Practices for Web DevelopersApr 16, 2025 am 12:14 AM

Best practices for H5 code include: 1. Use correct DOCTYPE declarations and character encoding; 2. Use semantic tags; 3. Reduce HTTP requests; 4. Use asynchronous loading; 5. Optimize images. These practices can improve the efficiency, maintainability and user experience of web pages.

H5: The Evolution of Web Standards and TechnologiesApr 15, 2025 am 12:12 AM

Web standards and technologies have evolved from HTML4, CSS2 and simple JavaScript to date and have undergone significant developments. 1) HTML5 introduces APIs such as Canvas and WebStorage, which enhances the complexity and interactivity of web applications. 2) CSS3 adds animation and transition functions to make the page more effective. 3) JavaScript improves development efficiency and code readability through modern syntax of Node.js and ES6, such as arrow functions and classes. These changes have promoted the development of performance optimization and best practices of web applications.

See all articles