复制代码
代码如下：
<！DOCTYPEhtml><htmllang=“zh-CN”><head><metacharset=“utf-8”><！-始终强制使用最新的IE渲染引擎（即使在Intranet中也是如此）和Chrome浏览器内嵌框架如果您使用.htaccess-><metahttp-equiv=“X-UA-Compatible”content=“IE=edge，chrome=1”><title>用于放松工作平衡的HTML5计时器</title><metaname=“description“content=”“><metaname=”author“content=”kevin“><metaname=”viewport“content=”width=device-width;initial-scale=1.0“><！-替换favicon.ico＆apple-touch-icon.png在您域的根目录中，并删除这些引用-><linkrel=“快捷方式图标”href=“/favicon.ico”/><linkrel=“apple-touch-icon”href=“/apple-touch-icon.png”/>
<linkrel=“stylesheet”type=“text/css”href=“css/style.css”><script>countDownSeconds=60;varhandle=null;//窗口加载函数onLoadWindow（）{aCanvas=document.getElementById（“countdownCanvas”）;context=aCanvas.getContext（“2d”）;varcanvasText=“按开始...”;varxPos=aCanvas.width/2;varyPos=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><bodyonload=“onLoadWindow（）”><divalign=“center”><header><h1>工作与生活平衡计时器</h1></header>请选择工作间隔：<inputname=“workIntervalInput”id=“workIntervalInput”type=“number”value=“25”min=“15”max=“45”step=“5”
<inputname=“restIntervalInput”id=“restIntervalInput”type=“number”value=“5”min=“3”max=“10”step=“1”/>分钟<canvasid=“countdownCanvas”width=“300“height=”50“style=”border：2px纯黑色“>这是画布</canvas><buttononclick=”startWorkCountDown（）“>努力工作</button><buttononclick=”startRestCountDown（）“>休息一下</button><footer><p>＆copy;保留版权</p></footer></div></body></html>
css3：
复制代码
代码如下：
/**HTML5oil样板**以下是对跨浏览器样式的大量研究的结果。*感谢NicolasGallagher，JonathanNeal，*KrocCamen以及H5BP开发人员社区和团队，这点值得感谢。**关于此CSS的详细信息：h5bp.com/css**==|==规范化========================================================*//*==============================================================================HTML5显示定义=========================================================================*/条，放在一边，细节，figcaption，人物，页脚，标题，hgroup，导航，部分{display：block;}
标题{text-shadow：＃2200000px0px10px10px;}音频，画布，视频{display：inline-block;*显示：内联；*缩放：1；}audio：not（[controls]）{display：none;}[隐藏]{显示：无；}/*===========================================================================基地===========================================================================*//**1.当使用em单位设置正文字体大小时，在IE6/7中更正文本的大小调整*2.在非IE中强制垂直滚动条*3.防止在设备上调整iOS文本大小方向更改，但不禁用用户缩放：h5bp.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：“CenturyGothic”;color：＃008000}/**删除选择突出显示区域中的文本阴影：h5bp.com/i*这些选择声明必须分开使用*另外：粉色！（或自定义背景颜色以匹配您的设计）*/::-moz-selection{background：＃fe57a1;颜色：#fff;文本阴影：无；}::selection{背景：＃fe57a1;颜色：#fff;文本阴影：无；}/*==========================================================================链接
=========================================================================*/a{color：＃00e;}a：visited{color：＃551a8b;}a：hover{color：＃06e;}a：focus{轮廓：细虚线；}/*当在所有浏览器中集中和悬浮时，提高可读性：h5bp.com/h*/a：hover，a：active{轮廓：0;}/*==========================================================================排版==========================================================================*/abbr[title]{border-bottom：点缀1像素；}b，强{字体粗细：粗体；}blockquote{margin：1em40px;}dfn{font-style：斜体;}
hr{display：block;高度：1px；边界：0;border-top：1px实心#ccc;保证金：1em0;填充：0;}ins{背景：＃ff9;颜色：＃000;文字修饰：无；}标记{背景：＃ff0;颜色：＃000;字体样式：斜体；font-weight：粗体;}/*重新声明等宽字体家族：h5bp.com/j*/pre，code，kbd，samp{font-family：等宽字体，等宽字体；_font-family：“速递”，等宽；字号：1em；}/*提高所有浏览器中预格式化文本的可读性*/pre{空白：pre;空白：预包装；自动换行：断词；}q{引号：无；}q：之前，q：之后{content：“”;内容：无；}小{字体大小：85％；}
/*在不影响行高的情况下放置下标和上标内容：h5bp.com/k*/sub，sup{font-size：75％;行高：0职位：相对垂直对齐：基线；}sup{top：-0.5em;}sub{bottom：-0.25em;}/*===========================================================================列表==========================================================================*/ul，{{margin：1em0;填充：00040px;}dd{margin：00040px;}navul，navol{list-style：none;list-style-image：无；边距：0;填充：0;}/*===========================================================================内嵌内容
=========================================================================*//**1.在IE7中缩放时提高图像质量：h5bp.com/d*2.消除差距在图像和图像容器上的边框之间：h5bp.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/4S5Chrome中删除边距*3.在所有浏览器中定义一致的垂直对齐显示*/
按钮，输入，选择，文本区域{字体大小：100％；边距：0;垂直对齐：基线；*垂直对齐：中间；}/**1.将线高定义为正常值以匹配FF3/4（在UA样式表中使用！important进行设置）*2.纠正IE6/7中奇怪显示的内部间距*/按钮，输入{line-height：normal;*溢出：可见；}/**在'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中的内部填充和边框：h5bp.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;==========================*//*用于图像替换*/.ir{display：block;边界：0;文字缩进：-999em；溢出：隐藏；背景色：透明；背景重复：不重复；文字对齐：左；方向：ltr;}.irbr{display：none;}/*对屏幕阅读器和浏览器都隐藏：h5bp.com/u*/.hidden{display：none！important;可见性：隐藏；}/*仅在视觉上隐藏，但可供屏幕阅读器使用：h5bp.com/v*/
.visuallyhidden{边界：0;剪辑：rect（0000）;高度：1px；边距：-1px;溢出：隐藏；填充：0;位置：绝对；宽度：1px；}/*扩展.visuallyhidden类，以使该元素在通过键盘导航时可聚焦：h5bp.com/p*/.visuallyhidden.focusable：active，.visuallyhidden.focusable：focus{高度：自动；边距：0;溢出：可见；位置：静态；宽度：自动；}/*视觉上和向屏幕阅读器隐藏，但保持布局*/.invisible{可见性：隐藏；}/*包含浮点数：h5bp.com/q*/.clearfix：before，.clearfix：after{content：“”;显示：表；}.clearfix：after{clear：both;}.clearfix{zoom：1;}
/*==|==媒体查询======================================================PLACEHOLDER响应式设计的媒体查询。这些将覆盖主要样式（“移动优先”），并根据需要进行修改。==================================================*/@仅限于媒体屏幕和（最小宽度：480px）{/*视口样式为480px及以上的样式调整请转到此处*/}@mediaonly屏幕和（最小宽度：768px）{/*视口768px及以上的样式调整请转到此处*/}/*==|==打印样式=====================================================打印样式。内联以避免必需的HTTP连接：h5bp.com/r
===================================================/=======================/*/@mediaprint{*{背景：透明！重要！颜色：黑色！重要；文本阴影：无！重要；过滤器：无！重要；-ms-filter：无！重要;}/*黑色打印速度更快：h5bp.com/s*/a，a：已访问{文本修饰：下划线；}a[href]：在{content：“（”attr（href）“）”之后；}abbr[title]：之后{content：“（”attr（title）“）”;}.ira：after，a[href^=“javascript：”]：after，a[href^=“＃”]：after{content：“”;}/*不显示图片链接，也不显示javascript/内部链接*/前置，框引号{border：1pxsolid＃999;page-break-inside：避免；}thead{display：table-header-group;}/*h5bp。
tr，img{page-break-inside：避免;}img{max-width：100％！important;}@page{边距：0.5厘米；}p，h2，h3{孤儿：3；寡妇：3;}h2，h3{page-break-after：避免;}}#startTimer{position：inheritwidth：75px;高度：20px；顶部：35px；左：25px;cursor：pointer}#stopTimer{position：inherit;宽度：75px;高度：20px；顶部：10px;左：25px;cursor：pointer}#countdownCanvas{border-radius：25px;box-shadow：10px10px5px＃888888;}
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60681.shtml
