这篇文章主要介绍了HTML5实现计时器的代码怎么写的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML5实现计时器的代码怎么写文章都会有所收获，下面我们一起来看看吧。
代码如下：
<！DOCTYPE html>
<html lang =“ zh-CN”>
<head>
<meta charset =“ utf-8”>
<！-始终强制使用最新的IE渲染引擎（即使在Intranet中也是如此）和Chrome浏览器内嵌框架
如果您使用.htaccess->
<meta http-equiv =“ X-UA-Compatible” content =“ IE = edge，chrome = 1”>
<title>用于放松工作平衡的HTML5计时器</ title>
<meta name =“ description “ content =”“>
<meta name =” author“ content =” kevin“>
<meta name =” viewport“ content =” width = device-width; initial-scale = 1.0“>
<！-替换favicon.ico ＆apple-touch-icon.png在您域的根目录中，并删除这些引用->
<link rel =“快捷方式图标” 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;
//窗口加载
函数onLoadWindow（）{
aCanvas = document.getElementById（“ countdownCanvas”）;
context = aCanvas.getContext（“ 2d”）;
var canvasText =“按开始...”;
var xPos = aCanvas.width / 2;
var yPos = aCanvas.height / 2;
context.font =“ 12pt世纪哥特式”;
context.fillStyle =“＃008000;”;
context.textAlign =“中心”;
context.textBaseline =“中间”;
context.fillText（canvasText，xPos，yPos）;
clearInterval（handle）;
handle = null;
alert（“嘿，时间到了！”）;
返回0;
}
minStr = Math.floor（countDownSeconds / 60）;
secStr = countDownSeconds％60;
如果（minStr <10）{
minStr =“ 0” + minStr;
}
如果（secStr <10）{
secStr =“ 0” + secStr;
}
context.clearRect（0，0，width，height）;
context.font =“ 24pt世纪哥特式”;
context.fillText（minStr +“：” + secStr，宽度/ 2，高度/ 2）;
countDownSeconds--;
}
函数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）;
}
函数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（）”>
<div align =“ center”>
<header>
<h2>工作与生活平衡计时器</ h2>
</ header>
请选择工作间隔：
<input name =“ workIntervalInput” id =“ workIntervalInput” type =“ number” value =“ 25” min =“ 15” max =“ 45” step =“ 5”
<input name =“ restIntervalInput” id =“ restIntervalInput” type =“ number” value =“ 5” min =“ 3” max =“ 10” step =“ 1” />
分钟
<canvas id =“ countdownCanvas” width =“ 300“ height =” 50“ style =” border：2px纯黑色“>
这是画布
</ canvas>
<button onclick =” startWorkCountDown（）“>
努力工作
</ button>
<button onclick =” startRestCountDown（）“ >
休息一下
</ button>
<footer>
<p>
＆copy; 保留版权
</ p>
</ footer>
</ div>
</ body>
</ html>
css3：
复制代码
代码如下：
/ *
* HTML5✰样板
*
*以下是对跨浏览器样式的大量研究的结果。
*感谢Nicolas Gallagher，Jonathan Neal，
* Kroc Camen以及H5BP开发人员社区和团队，对我们的工作给予了极大的感谢。
*
*关于此CSS的详细信息：h6bp.com/css
*
* == | ==规范化============================= ===========================
* /
/ * ================== ================================================== ==========
HTML5显示定义
==================================== ===================================== * /
条，放在一边，细节，figcaption，人物，页脚，，hgroup，导航，部分{display：block; }
{text-shadow：＃220000 0px 0px 10px 10px;}
音频，画布，视频{display：inline-block; *显示：内联；*缩放：1；}
audio：not（[controls]）{display：none; }
[隐藏] {显示：无；}
/ * =============================================== ============================
基地
==================== ================================================== ===== * /
/ *
* 1.当使用em单位设置正文字体大小时，在IE6 / 7中更正文本的大小调整
* 2.在非IE中强制垂直滚动条
* 3.防止在设备上调整iOS文本大小更改方向，但不禁用用户缩放：h6bp.com/g
* /
html {font-size：100％; 溢出-y：滚动；-webkit-text-size-adjust：100％; -ms-text-size-adjust：100％；}
body {margin：0; font-size：24px; 行高：1.231;}
正文，按钮，输入，选择，文本区域{font-family：“ Century Gothic”; color：＃008000}
/ *
*删除选择突出显示区域中的文本阴影：h6bp.com/i
*这些选择声明必须分开使用
*另外：粉色！（或自定义背景颜色以匹配您的设计）
* /
::-moz-selection {background：＃fe57a1; 颜色：#fff; 文本阴影：无；}
:: selection {背景：＃fe57a1; 颜色：#fff; 文本阴影：无；}
/ * =============================================== =============================
链接
================================================== * /
a {color：＃00e; }
a：visited {color：＃551a8b; }
a：hover {color：＃06e; }
a：focus {轮廓：细点缀；}
/ *当在所有浏览器中集中和
悬浮时，提高可读性：h6bp.com/h * / a：hover，a：active {轮廓：0; }
/ * =============================================== ============================
排版
=================== ================================================== ===== * /
abbr [title] {border-bottom：点缀1像素；}
b，强{字体粗细：粗体；}
blockquote {margin：1em 40px; }
dfn {font-style：italic; }
hr {display：block; 高度：1px；边界：0; border-top：1px实心#ccc; 保证金：1em 0; 填充：0; }
ins {背景：＃ff9; 颜色：＃000; 文字修饰：无；}
标记{背景：＃ff0; 颜色：＃000; 字体样式：斜体；font-weight：粗体; }
/ *重新声明等宽字体家族：h6bp.com/j * /
pre，code，kbd，samp { _font-family：“速递”，等宽；字号：1em；}
/ *提高所有浏览器中预格式化文本的可读性* /
pre {空白：pre; 空白：预包装；自动换行：断词；}
q {引号：无；}
q：之前，q：之后{content：“”; 内容：无；}
小{字体大小：85％；}
/ *在不影响行高的情况下定位下标和上标内容：h6bp.com/k * /
sub，sup {font-size：75％; 行高：0 职位：相对 垂直对齐：基线；}
sup {top：-0.5em; }
sub {bottom：-0.25em; }
/ * =============================================== =============================
列表
=================== ================================================== ===== * /
ul，{{margin：1em 0; 填充：0 0 0 40px; }
dd {margin：0 0 0 40px; }
nav ul，nav ol {list-style：none; list-style-image：无；边距：0; 填充：0; }
/ * =============================================== =============================
内嵌内容
================================================== * /
/ *
* 1.在IE7中缩放时提高图像质量：h6bp.com/d
* 2.消除差距在图像和图像容器上的边框之间：h6bp.com/e
* /
img {border：0; -ms-interpolation-mode：双三次；垂直对齐：中间；}
/ *
*纠正未在IE9中隐藏的溢出
* /
svg：not（：root）{ }
/ * =============================================== ============================
数字
=================== ================================================== ===== * /
数字{边距：0; }
/ * =============================================== =============================
形式
================================================= * /
形式{边距：0; }
fieldset {border：0; 边距：0; 填充：0; }
/ *指示“标签”会将焦点转移到关联的表单元素
上。}
/ *
* 1.纠正在IE6 / 7/8/9中不继承的颜色
* 2.纠正在IE6 / 7中奇怪地显示的对齐方式
* /
图例{border：0; *左边距：-7px; 填充：0; }
/ *
* 1.纠正并非在所有浏览器中都继承的字体大小
* 2.删除FF3 / 4 S5 Chrome中的页边距
* 3.在所有浏览器中定义一致的垂直对齐显示
* /
按钮，输入，选择，文本区域{字体大小：100％；边距：0; 垂直对齐：基线；*垂直对齐：中间；}
/ *
* 1.将线高定义为正常值以匹配FF3 / 4（在UA样式表中使用！important进行设置）
* 2.纠正IE6 / 7中奇怪显示的内部间距
* /
按钮，输入{ ; *溢出：可见；}
/ *
*在'table'中重新引入内部间距，以避免IE6 / 7中的重叠和空白问题
* /
table按钮，表输入{* overflow：auto; }
/ *
* 1.显示可点击表单元素的手形光标
* 2.允许在iOS中设置可点击表单元素的样式
* /
按钮，输入[type =“ button”]，输入[type =“ reset”]，输入[type =“ submit”] {光标：指针；-webkit-appearance：按钮；}
/ *
*一致的框大小和外观
* /
input [type =“ checkbox”]，input [type =“ radio”] {box-sizing：border-box; }
input [type =“ search”] {-webkit-appearance：textfield; -moz-box-sizing：内容框；-webkit-box-sizing：内容框；框大小：内容框；}
input [type =“ search”] ::-webkit-search-decoration {-webkit-appearance：none; }
/ *
*删除FF3 / 4中的内部填充和边框：h6bp.com/l
* /
button ::-moz-focus-inner，输入：:-moz-focus-inner {border：0; 填充：0; }
/ *
* 1。
* 2.仅允许垂直调整大小
* /
textarea { 垂直对齐：顶部；调整大小：垂直；}
/ *表单有效性的颜色* /
输入：valid，textarea：valid {}
输入：invalid，textarea：invalid {background-color：＃f0dddd; }
/ * =============================================== =============================
表格
==================== ================================================== ===== * /
表{border-collapse：崩溃; 边框间距：0；}
td {vertical-align：top; }
/ * == | ==主要样式======================================== =============
作者：
==================================== ====================================== /
/ * == | ==非语义助手类===================================== ==
请在本节之前定义您的样式。
================================================== * /
/ *用于图像替换* /
.ir {display：block; 边界：0; 文字缩进：-999em；溢出：隐藏；背景色：透明；背景重复：不重复；文字对齐：左；方向：ltr; }
.ir br {display：none; }
/ *对屏幕阅读器和浏览器都隐藏：h6bp.com/u * / .hidden
{display：none！important; 可见性：隐藏；}
/ *仅在视觉上隐藏，但可供屏幕阅读器使用：h6bp.com/v * /
.visuallyhidden {边界：0; 剪辑：rect（0 0 0 0）; 高度：1px；边距：-1px; 溢出：隐藏；填充：0; 位置：绝对；宽度：1px；}
/ *扩展.visuallyhidden类，以使该元素在通过键盘导航时可聚焦：h6bp.com/p * /
.visuallyhidden.focusable：active，.visuallyhidden.focusable：focus {clip：auto; 高度：自动；边距：0; 溢出：可见；位置：静态；宽度：自动; }
/ *视觉上和向
屏幕阅读器隐藏，但保持布局* / .invisible {可见性：隐藏；}
/ *包含浮点数：h6bp.com/q * /
.clearfix：before，.clearfix：after {content：“”; 显示：表；}
.clearfix：after {clear：both; }
.clearfix {zoom：1; }
/ * == | ==媒体查询========================================== =============
PLACEHOLDER响应式设计的媒体查询。
这些将覆盖主要样式（“移动优先”），并
根据内容需要进行修改。
================================================== * / @
仅限于媒体的屏幕和（最小宽度：480px）{
/ *视口的样式调整为480px及以上* /
}
@media only屏幕和（最小宽度：768px）{
/ *视口768px及以上的样式调整请转到此处* /
}
/ * == | ==打印样式=========== ===========================================
打印样式。
内联以避免必需的HTTP连接：h6bp.com/r
================================================== * /
@media print {
* {background：transparent！important; 颜色：黑色！重要；文本阴影：无！重要；过滤器：无！重要；-ms-filter：无！重要; } / *黑色打印速度更快：h6bp.com/s * /
a，a：已访问{文本修饰：下划线；}
a [href]：在{content：“（” attr（href）“）”之后；}
abbr [title]：之后{content：“（” attr（title）“）”; }
.ir a：after，a [href ^ =“ javascript：”]：after，a [href ^ =“＃”]：after {content：“”; } / *不显示图片链接，或显示javascript /内部链接* /
前置，框引号{border：1px solid＃999; page-break-inside：避免；}
thead {display：table-header-group; } / * h6bp。
tr，img {page-break-inside：避免; }
img {max-width：100％！important; }
@page {边距：0.5厘米；}
p，h3，h4 {孤儿：3；寡妇：3; }
h3，h4 {page-break-after：避免; }
}
#startTimer {
position：inherit
width：75px;
高度：20px；
顶部：35px；
左：25px;
cursor：pointer
}
#stopTimer {
position：inherit;
宽度：75px;
高度：20px；
顶部：10px;
左：25px;
cursor：pointer
}
#countdownCanvas {
border-radius：25px;
box-shadow：10px 10px 5px＃888888;
}
关于“HTML5实现计时器的代码怎么写”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“HTML5实现计时器的代码怎么写”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
