用HTML5做个时钟
导读：收集整理的这篇文章主要介绍了html5教程-用HTML5做个时钟，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 心情不好，游戏不想玩，弄个小东西排...
收集整理的这篇文章主要介绍了html5教程-用HTML5做个时钟，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 心情不好，游戏不想玩，弄个小东西排解一下心中的不畅： 本时钟是通过HTML5的Canvas实现的，相关的技术大家可以到这儿去看看： 链接地址
下面就没有什么好所的了，上面的链接中有详细的说明，有图有真相 ～～
@H_304_4@
下面是代码：
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教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 用HTML5做个时钟
本文地址： https://pptw.com/jishu/586587.html