html做计时器代码,html计时器代码
html:复制代码代码如下：
！声明文档类型
html lang=en
头
meta charset=utf-8
！-始终强制最新的工业管理学(Industrial Engineering)渲染引擎（即使在内部网中)铬框架
如果您使用htaccess -
meta http-equiv= X-UA-Compatible content= IE=edge，chrome=1
titleHTML5工作计时器-放松平衡/标题
元名称=描述内容=
元名称=作者内容=凯文
meta name= viewport content= width=device-width；初始比例=1.0
！-替换你的域名根目录中的favicon。ico apple-touch-icon.png，并删除这些引用-
链接版本=快捷图标href=/favicon.ico/
link rel= apple-touch-icon href=/apple-touch-icon。巴布亚新几内亚/
link rel=样式表 type= text/CSS href= CSS/style。 CSS
脚本
countDownSeconds=60
var handle=null
//窗口加载
函数onLoadWindow() {
文件。getelementbyid( countdownCanvas )；
context=acan vas。获取上下文(“2d”)；
var canvasText=按下开始.；
var xPos=acan vas。宽度/2；
var yPos=acan vas。身高/2；
context.font=12pt世纪哥特式；
context.fillStyle= # 008000
context.textAlign= center
context.textBaseline= middle
context.fillText(canvasText，xPos，yPos)；
}
函数更新画布(内容，宽度，高度){
if (countDownSeconds 0) {
间隙(句柄);
句柄=空
警报(嘿，时间到了!);
返回0;
}
minStr=数学。地板(倒计时秒/60)；
secStr=countDownSeconds % 60
如果（部长10) {
minStr= 0 minStr
}
if (secStr 10) {
secStr= 0 secStr
}
context.clearRect(0，0，width，height)；
语境。font= 24pt世纪哥特式；
语境。填充文本(minStr): secStr，width/2，height/2)；
倒计时秒-；
}
函数startWorkCountDown() {
如果（处理！=null) {
间隙(句柄);
}
倒计时秒=文档。getelementbyid( workIntervalInput ).值* 60;
timeDisplayCanvas=文档。getelementbyid( countdownCanvas )；
timedisplaycontext 2d=timedisplaycanvas。获取上下文(“2d”)；
更新画布(timedisplaycontext 2d，timeDisplayCanvas.width，timeDisplayCanvas。身高)；
handle=setInterval(function() {
更新画布(timedisplaycontext 2d，timeDisplayCanvas.width，timeDisplayCanvas。身高)；
}, 1000);
}
函数startRestCountDown() {
如果（处理！=null) {
间隙(句柄);
}
倒计时秒=文档。getelementbyid( restIntervalInput ).值* 60;
timeDisplayCanvas=文档。getelementbyid( countdownCanvas )；
timedisplaycontext 2d=timedisplaycanvas。获取上下文(“2d”)；
更新画布(timedisplaycontext 2d，timeDisplayCanvas.width，timeDisplayCanvas。身高)；
handle=setInterval(function() {
更新画布(timedisplaycontext 2d，timeDisplayCanvas.width，timeDisplayCanvas。身高)；
}, 1000);
}
/脚本
/头
body onload=onLoadWindow()
div align=center
页眉
氕工作生活平衡计时器/h1
/页眉
请选择工作间隔：
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纯黑
这是一块画布
/画布
button onclick= startWorkCountDown()
努力工作
/按钮
button onclick= startrestcount down()
休息一下
/按钮
页脚
p
复制；著作权所有
/p
/页脚
/div
/body
/html
css3:复制代码代码如下：
/*
* HTML5样板文件
*
*以下是对跨浏览器样式的大量研究的结果。
*感谢尼古拉斯加拉格尔、乔纳森尼尔，
* Kroc Camen以及H5BP开发社区和团队。
*
*关于此半铸钢钢性铸铁(Cast Semi-Steel)的详细信息：h5bp.com/css
*
*====normalize=======================================
*/
/*=============================================================================
HTML5显示定义
==========================================================================*/
文章、旁白、详细信息、图片标题、图表、页脚、页眉、组、导航、节{显示：块；}
header { text-shadow:# 220000 0px 0px 10px 10px；}
音频、画布、视频{显示：内嵌块；*显示：内嵌；*缩放：1;}
audio:not([controls]){ display:none；}
[隐藏] {显示：无；}
/*=============================================================================
基础
==========================================================================*/
/*
* 1.修正了第6/7号决定中使用全身长的单位设置字体大小时文本大小调整不正常的问题
* 2.在非工业管理学(Industrial Engineering)中强制垂直滚动条
* 3.防止ios文本大小在设备方向改变时调整，而不禁用用户缩放：h5bp.com/g
*/
html { font-size:100%；溢出-y:滚动；-WebKit-text-size-adjust:100%；-ms-text-size-adjust:100%；}
正文{边距：0;字体大小：24px行高：1.231;}
body，button，input，select，textarea { font-family: Century Gothic ；颜色：#008000}
/*
*删除选区中的文本阴影突出显示：h5bp.com/i
*这些选择声明必须是独立的
*还有：热粉色！（或者自定义背景颜色以匹配您的设计)
*/
:-moz-selection { background:# fe57a 1；颜色：# fff文字-阴影：无；}
*选择{背景：# fe57a1颜色：# fff文字-阴影：无；}
/*=============================================================================
链接
==========================================================================*/
a { color:# 00e；}
答：参观过{ color:# 551 a8b；}
a:hover { color:# 06e；}
答：焦点{轮廓：细点状；}
/*提高在所有浏览器中聚焦和悬停时的可读性：h5bp.com/h */
答：悬停，答：主动{大纲：0;}
/*=============================================================================
排印
==========================================================================*/
abbr[title]{ border-bottom:1px dotted；}
乙、强{ font-weight:bold；}
大宗报价{ margin:1em 40px；}
dfn { font-style:italic；}
hr {显示：阻止高度：1px边框：0;border-top:1px solid # CCC；边距：1em 0；填充：0;}
ins {背景：# ff9颜色：# 000;文字-装饰：无；}
标记{背景：# ff0颜色：# 000;字体样式：斜体；字体粗细：粗体；}
/*重新声明等宽字体系列：h5bp.com/j */
pre，code，kbd，samp { font-family: monospace，monospace；_font-family: courier new ，等宽；字体大小：1em}
/*提高所有浏览器中预格式化文本的可读性*/
前{空白：pre空白：预换行；自动换行：断字；}
问{报价：无；}
q:before，q:after { content: ；内容：无；}
小{ font-size:85%；}
/*在不影响行高的情况下定位下标和上标内容：h5bp.com/k */
sub，sup { font-size:75%；行高：0;位置：相对；垂直对齐：基线；}
sup { top:-0.5 em；}
sub { bottom:-0.25 em；}
/*=============================================================================
列表
==========================================================================*/
ul，ol { margin:1em 0；填充：0 0 0 40px}
DD { margin:0 0 0 40px；}
导航ul，导航ol { list-style:无；列表样式图像：无；边距：0;填充：0;}
/*=============================================================================
嵌入内容
==========================================================================*/
/*
* 1.在IE7:h5bp.com/d中缩放时提高图像质量
* 2.消除图像容器中图像和边框之间的间隙：h5bp.com/e
*/
img { border:0；-女士-插值-模式：双三次；垂直对齐：居中；}
/*
*修正IE9中未隐藏的溢出
*/
SVG:not(:root){ overflow:hidden；}
/*=============================================================================
数字
==========================================================================*/
图{ margin:0；}
/*=============================================================================
形式
==========================================================================*/
表单{ margin:0；}
字段集{ border:0；边距：0;填充：0;}
/*指示"标签"将焦点转移到关联的表单元素*/
label { cursor:pointer；}
/*
* 1.修正了IE6/7/8/9中没有继承的颜色
* 2.正确的对齐在第6/7号决定中显示奇怪
*/
图例{ border:0；*左边距：-7px；填充：0;}
/*
* 1.纠正字体大小在所有浏览器中不继承
* 2.移除FF3/4 S5镀铬中的边距
* 3.在所有浏览器中定义一致的垂直对齐显示
*/
按钮，输入，选择，textarea { font-size:100%；边距：0;垂直对齐：基线；*垂直对齐：居中；}
/*
* 1.将行高定义为正常，以匹配FF3/4(使用！在美国联合航空公司(United Airlines)样式表中很重要)
* 2.正确的内部间距在第6/7号决定中显示奇怪
*/
按钮，输入{行高：正常；*溢出：可见；}
/*
*在"表格"中重新引入内部间距，以避免第6/7号决定中的重叠和空白问题
*/
表格按钮，表格输入{ *溢出：自动；}
/*
* 1.为可点击的表单元素显示手形光标
* 2.允许ios中可点击表单元素的样式
*/
按钮，输入[type=button]，输入[type=reset]，输入[type= submit ]{ cursor:pointer；-网络工具包-外观：按钮；}
/*
*一致的盒子尺寸和外观
*/
输入[type=checkbox]，输入[type= radio ]{框大小：border-box；}
input[type= search ]{-WebKit-appearance:textfield；-moz-box-size:内容盒；-WebKit-box-size:content-box；盒子大小：内容盒；}
input[type= search ]:-WebKit-search-decoration {-WebKit-appearance:none；}
/*
*移除FF3/4中的内部衬垫和边框：h5bp.com/l
*/
按钮：-moz-focus-inner，输入：-moz-focus-inner { border:0；填充：0;}
/*
* 1.删除IE6/7/8/9中的默认垂直滚动条
* 2.仅允许垂直调整大小
*/
textarea { overflow:auto；垂直对齐：顶部；调整大小：垂直；}
/*表单有效性的颜色*/
input:valid，textarea:valid { }
input:invalid，textarea:invalid { background-color:# f 0 dddd；}
/*=============================================================================
桌子
==========================================================================*/
表{ border-collapse:折叠；边框间距：0;}
TD { vertical-align:top；}
/*=====主要样式===========================================
作者：
==========================================================================*/
/*=====非语义帮助类===================================
请在此部分之前定义您的风格。
==========================================================================*/
/*用于图像替换*/。ir {显示器：阻止边框：0;文本缩进：-999 em；溢出：隐藏；背景色：透明；背景-重复：不重复；文本对齐：左对齐；方向：ltr}。ir br {显示：无；}
/*在屏幕阅读器和浏览器中隐藏：h5bp.com/u */。隐藏{显示：无！重要；可见性：隐藏；}
/*仅在视觉上隐藏，但对屏幕阅读器可用：h5bp.com/v */。视觉隐藏{ border:0；clip:rect(0 0 0 0)；高度：1px边距：-1px；溢出：隐藏；填充：0;位置：绝对；宽度：1px}
/*扩展了视觉隐藏类，当通过键盘导航到该元素时，它允许该元素成为焦点：h5bp.com/p */。视觉隐藏。可聚焦：活动，视觉隐藏。可聚焦：聚焦{剪辑：自动；高度：自动；边距：0;溢出：可见；位置：静态；宽度：自动；}
/*在视觉上对屏幕阅读器隐藏，但保持布局*/。不可见{可见性：隐藏；}
/*包含浮动：h5bp.com/q */。清除修复：之前，清除修复：在{内容：""之后；显示：表格；}。清除修复：在{ clear:both；}
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。