html5
html5教程-用HTML5做个时钟
发布时间：2018-12-18 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-用HTML5做个时钟，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
心情不好，游戏不想玩，弄个小东西排解一下心中的不畅：
本时钟是通过HTML5的Canvas实现的，相关的技术大家可以到这儿去看看： 链接地址
下面就没有什么好所的了，上面的链接中有详细的说明，有图有真相 ～～
下面是代码：
001 <html>
002 <head>
003 <title>HTML5 Test</title>
004 <script type="application/x-javascript">
005 var panel, ctx, img;
006 var pw, ph, ox, oy;
007 function init(){
008 panel = document.getElementById("panel");
009 pw = panel.width;
010 ph = panel.height;
011 ox = pw/2;
012 oy = ph/2;
013 if(panel.getContext){
014 ctx = panel.getContext('2d');
015 }else{
016 alert('Your browser is not support Canvas tag!');
017 }
018
019 ctx.translate(ox, oy);
020
021 img = new Image();
022 img.onload = function(){
023 setInterval('draw()',1000);
024 }
025 img.src = 'bg.jpg';
026 }
027
028
029 function drawSecond(){
030 ctx.save();
031 ctx.rotate(Math.PI/180*currTime().s*6);
032 ctx.strokeStyle = "#09f";
033 ctx.lineWidth = 2;
034 ctx.lineCap = 'round'
035 ctx.beginPath();
036 ctx.moveTo(0,0);
037 ctx.lineTo(0,-140);
038 ctx.stroke();
039 ctx.restore();
040 }
041
042 function drawMinute(){
043 ctx.save();
044 ctx.rotate(Math.PI/180*currTime().m*6);
045 ctx.strokeStyle = "#f90";
046 ctx.lineWidth = 6;
047 ctx.lineCap = 'round'
048 ctx.beginPath();
049 ctx.moveTo(0,0);
050 ctx.lineTo(0,-100);
051 ctx.stroke();
052 ctx.restore();
053 }
054
055 function drawHour(){
056 ctx.save();
057 ctx.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/
058 2);
059 ctx.strokeStyle = "#999";
060 ctx.lineWidth = 10;
061 ctx.lineCap = 'round'
062 ctx.beginPath();
063 ctx.moveTo(0,0);
064 ctx.lineTo(0,-60);
065 ctx.stroke();
066 ctx.restore();
067 }
068 function draw(){
069 ctx.clearRect(-pw/2,-ph/2,pw,ph);
070 drawBackground();
071 drawSecond();
072 drawMinute();
073 drawHour();
074 document.getElementById('time').innerHTML=currTimeStr();
075 }
076
077 function drawBackground(){
078 ctx.save();
079 ctx.translate(0, 0);
080 ctx.drawImage(img,-250,-250,500,500);
081 ctx.restore();
082 }
083
084 function currTimeStr(){
085 var d = new Date();
086 var h = d.getHours();
087 var m = d.getMinutes();
088 var s = d.getSeconds();
089 return h+':'+m+':'+s
090 }
091
092 function currTime(){
093 var d = new Date();
094 var h = d.getHours();
095 var m = d.getMinutes();
096 var s = d.getSeconds();
097 if(h>12){
098 h = h-12;
099 }
100 return {"h":h,"m":m,"s":s};
101 }
102 </script>
103 </head>
104 <body onload="init()">
105 <canvas style="border:1px solid #000" id="panel" width="500" height="500
106 ">
107 Your browser is not support Canvas tag!
108 </canvas>
109 <br/>
110 <span id="time"></span>
111 </body>
112 </html>
==============================================================
刚才有个哥们说没有表盘背景，现补上：
作者 yanglion
心情不好，游戏不想玩，弄个小东西排解一下心中的不畅： 本时钟是通过HTML5的Canvas实现的，相关的技术大家可以到这儿去看看： 链接地址
下面就没有什么好所的了，上面的链接中有详细的说明，有图有真相 ～～
下面是代码：
001 <html>
002 <head>
003 <title>HTML5 Test</title>
004 <script type="application/x-javascript">
005 var panel, ctx, img;
006 var pw, ph, ox, oy;
007 function init(){
008 panel = document.getElementById("panel");
009 pw = panel.width;
010 ph = panel.height;
011 ox = pw/2;
012 oy = ph/2;
013 if(panel.getContext){
014 ctx = panel.getContext('2d');
015 }else{
016 alert('Your browser is not support Canvas tag!');
017 }
018
019 ctx.translate(ox, oy);
020
021 img = new Image();
022 img.onload = function(){
023 setInterval('draw()',1000);
024 }
025 img.src = 'bg.jpg';
026 }
027
028
029 function drawSecond(){
030 ctx.save();
031 ctx.rotate(Math.PI/180*currTime().s*6);
032 ctx.strokeStyle = "#09f";
033 ctx.lineWidth = 2;
034 ctx.lineCap = 'round'
035 ctx.beginPath();
036 ctx.moveTo(0,0);
037 ctx.lineTo(0,-140);
038 ctx.stroke();
039 ctx.restore();
040 }
041
042 function drawMinute(){
043 ctx.save();
044 ctx.rotate(Math.PI/180*currTime().m*6);
045 ctx.strokeStyle = "#f90";
046 ctx.lineWidth = 6;
047 ctx.lineCap = 'round'
048 ctx.beginPath();
049 ctx.moveTo(0,0);
050 ctx.lineTo(0,-100);
051 ctx.stroke();
052 ctx.restore();
053 }
054
055 function drawHour(){
056 ctx.save();
057 ctx.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/
058 2);
059 ctx.strokeStyle = "#999";
060 ctx.lineWidth = 10;
061 ctx.lineCap = 'round'
062 ctx.beginPath();
063 ctx.moveTo(0,0);
064 ctx.lineTo(0,-60);
065 ctx.stroke();
066 ctx.restore();
067 }
068 function draw(){
069 ctx.clearRect(-pw/2,-ph/2,pw,ph);
070 drawBackground();
071 drawSecond();
072 drawMinute();
073 drawHour();
074 document.getElementById('time').innerHTML=currTimeStr();
075 }
076
077 function drawBackground(){
078 ctx.save();
079 ctx.translate(0, 0);
080 ctx.drawImage(img,-250,-250,500,500);
081 ctx.restore();
082 }
083
084 function currTimeStr(){
085 var d = new Date();
086 var h = d.getHours();
087 var m = d.getMinutes();
088 var s = d.getSeconds();
089 return h+':'+m+':'+s
090 }
091
092 function currTime(){
093 var d = new Date();
094 var h = d.getHours();
095 var m = d.getMinutes();
096 var s = d.getSeconds();
097 if(h>12){
098 h = h-12;
099 }
100 return {"h":h,"m":m,"s":s};
101 }
102 </script>
103 </head>
104 <body onload="init()">
105 <canvas style="border:1px solid #000" id="panel" width="500" height="500
106 ">
107 Your browser is not support Canvas tag!
108 </canvas>
109 <br/>
110 <span id="time"></span>
111 </body>
112 </html>
==============================================================
刚才有个哥们说没有表盘背景，现补上：
作者 yanglion
本时钟是通过HTML5的Canvas实现的，相关的技术大家可以到这儿去看看： 链接地址
下面就没有什么好所的了，上面的链接中有详细的说明，有图有真相 ～～
下面是代码：
001 <html>
002 <head>
003 <title>HTML5 Test</title>
004 <script type="application/x-javascript">
005 var panel, ctx, img;
006 var pw, ph, ox, oy;
007 function init(){
008 panel = document.getElementById("panel");
009 pw = panel.width;
010 ph = panel.height;
011 ox = pw/2;
012 oy = ph/2;
013 if(panel.getContext){
014 ctx = panel.getContext('2d');
015 }else{
016 alert('Your browser is not support Canvas tag!');
017 }
018
019 ctx.translate(ox, oy);
020
021 img = new Image();
022 img.onload = function(){
023 setInterval('draw()',1000);
024 }
025 img.src = 'bg.jpg';
026 }
027
028
029 function drawSecond(){
030 ctx.save();
031 ctx.rotate(Math.PI/180*currTime().s*6);
032 ctx.strokeStyle = "#09f";
033 ctx.lineWidth = 2;
034 ctx.lineCap = 'round'
035 ctx.beginPath();
036 ctx.moveTo(0,0);
037 ctx.lineTo(0,-140);
038 ctx.stroke();
039 ctx.restore();
040 }
041
042 function drawMinute(){
043 ctx.save();
044 ctx.rotate(Math.PI/180*currTime().m*6);
045 ctx.strokeStyle = "#f90";
046 ctx.lineWidth = 6;
047 ctx.lineCap = 'round'
048 ctx.beginPath();
049 ctx.moveTo(0,0);
050 ctx.lineTo(0,-100);
051 ctx.stroke();
052 ctx.restore();
053 }
054
055 function drawHour(){
056 ctx.save();
057 ctx.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/
058 2);
059 ctx.strokeStyle = "#999";
060 ctx.lineWidth = 10;
061 ctx.lineCap = 'round'
062 ctx.beginPath();
063 ctx.moveTo(0,0);
064 ctx.lineTo(0,-60);
065 ctx.stroke();
066 ctx.restore();
067 }
068 function draw(){
069 ctx.clearRect(-pw/2,-ph/2,pw,ph);
070 drawBackground();
071 drawSecond();
072 drawMinute();
073 drawHour();
074 document.getElementById('time').innerHTML=currTimeStr();
075 }
076
077 function drawBackground(){
078 ctx.save();
079 ctx.translate(0, 0);
080 ctx.drawImage(img,-250,-250,500,500);
081 ctx.restore();
082 }
083
084 function currTimeStr(){
085 var d = new Date();
086 var h = d.getHours();
087 var m = d.getMinutes();
088 var s = d.getSeconds();
089 return h+':'+m+':'+s
090 }
091
092 function currTime(){
093 var d = new Date();
094 var h = d.getHours();
095 var m = d.getMinutes();
096 var s = d.getSeconds();
097 if(h>12){
098 h = h-12;
099 }
100 return {"h":h,"m":m,"s":s};
101 }
102 </script>
103 </head>
104 <body onload="init()">
105 <canvas style="border:1px solid #000" id="panel" width="500" height="500
106 ">
107 Your browser is not support Canvas tag!
108 </canvas>
109 <br/>
110 <span id="time"></span>
111 </body>
112 </html>
==============================================================
刚才有个哥们说没有表盘背景，现补上：
作者 yanglion
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-用HTML5做个时钟全部内容，希望文章能够帮你解决html5教程-用HTML5做个时钟所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的html5相关文章
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程