当前位置：模板网首页 > 特效插件 > 日期特效 > HTML5+js绘制的不停走动正文

HTML5+js绘制的不停走动的圆形时钟

作者：网页模板

大小：0MB

点击次数：

发布时间：2014-08-04 11:29

分享到：

特效介绍

HTML5+js绘制的不停走动的圆形时钟，没有用到一张图片。时钟的秒针不像一般的时钟，它是不停的走动(当然，一秒走一次，也可以设置)。每次载入时，表盘颜色都会不同。
运行下面的代码，查看时钟效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5+js绘制的不停走动的圆形时钟_我爱模板 www.5imoban.net</title>   <style> body{margin:0; padding:0;} ul#wimoban_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;} ul#wimoban_nav li{float:left; display:inline; margin:10px;} ul#wimoban_nav li a{display:block; font-size:16px;} ul#wimoban_nav li a,#wimoban_p,#wimoban_p a{color:#000; font-family:"微软雅黑";} ul#wimoban_nav li a:hover,#wimoban_p a:hover{color:red;} #wimoban_p{text-align:center; font-size:14px; clear:both;} </style> </head> <body oncontextmenu='return false' ondragstart='return false'> <ul id="wimoban_nav"> <li><a title="返回网站首页" href="http://www.5imoban.net/">首页</a></li> <li><a title="网页PSD模板下载" href="http://www.5imoban.net/psdmoban/">PSD模板</a></li> <li><a title="网页CSS模板下载" href="http://www.5imoban.net/cssmoban/">CSS模板</a></li> <li><a title="网页特效、网页插件" href="http://www.5imoban.net/texiao/">特效插件</a></li> <li><a title="整站源码下载" href="http://www.5imoban.net/yuanma/">源码下载</a></li> <li><a title="酷站欣赏" href="http://www.5imoban.net/kuzhan/">酷站欣赏</a></li> <li><a title="建站资源" href="http://www.5imoban.net/ziyuan/">建站资源</a></li> <li><a title="建站视频教程、建站教程" href="http://www.5imoban.net/jiaocheng/">建站教程</a></li> <li><a title="建站心得、互联网事、心境之旅" href="http://www.5imoban.net/article/">心境之旅</a></li> </ul>  <div style="width:500px;margin:0 auto;"> <canvas id="clock" width="500" height="500" onClick=resetcolor()> 您的浏览器不支持canvas标签! </canvas> </div> <script> var clock=document.getElementById("clock"); var cxt=clock.getContext("2d"); var colr=(200+Math.floor(Math.random()*55.99)); var colg=(200+Math.floor(Math.random()*55.99)); var colb=(200+Math.floor(Math.random()*55.99)); function resetcolor(){ colr=(200+Math.floor(Math.random()*55.99)); colg=(200+Math.floor(Math.random()*55.99)); colb=(200+Math.floor(Math.random()*55.99)); } function drawClock(){ //获取时间 var now=new Date(); var hou=now.getHours(); var min=now.getMinutes(); var sec=now.getSeconds(); var mec=now.getMilliseconds(); //转换12小时进制 hou=hou>12?hou-12:hou; //清空画布 cxt.clearRect(0,0,500,500); //阴影 cxt.fill(); cxt.fillStyle="gray"; cxt.beginPath(); cxt.arc(270,260,205,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); //表盘 cxt.fill(); cxt.fillStyle="white"; cxt.beginPath(); cxt.arc(250,250,205,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); //蓝色表盘（边框） cxt.strokeStyle="#dddddd" cxt.lineWidth=10; cxt.beginPath(); cxt.arc(250,250,185,0,Math.PI*2,true); cxt.closePath(); cxt.stroke(); cxt.strokeStyle="#"+colr.toString(16)+colg.toString(16)+colb.toString(16); cxt.lineWidth=10; cxt.beginPath(); cxt.arc(250,250,200,0,Math.PI*2,true); cxt.closePath(); cxt.stroke(); cxt.strokeStyle="#"+colr.toString(16)+colg.toString(16)+colb.toString(16); cxt.lineWidth=3; cxt.beginPath(); cxt.arc(250,250,192,0,Math.PI*2,true); cxt.closePath(); cxt.stroke(); cxt.strokeStyle="#"+(colr-100).toString(16)+(colg-100).toString(16)+(colb-100).toString(16); cxt.lineWidth=5; cxt.beginPath(); cxt.arc(250,250,205,0,Math.PI*2,true); cxt.closePath(); cxt.stroke(); //刻度（时分） //时刻度 for(var i=0;i<12;i++){ cxt.save(); cxt.lineWidth=5; cxt.strokeStyle="black"; //设置原点 cxt.translate(250,250); //设置旋转角度; cxt.rotate(30*i/180*Math.PI); cxt.beginPath(); cxt.moveTo(0,180); cxt.lineTo(0,160); cxt.closePath(); cxt.stroke(); cxt.restore(); } //分刻度 for(var i=0;i<60;i++){ if(i%5!=0){ cxt.save(); cxt.lineWidth=2; cxt.strokeStyle="black"; //设置原点 cxt.translate(250,250); //设置旋转角度; cxt.rotate(6*i/180*Math.PI); cxt.beginPath(); cxt.moveTo(0,175); cxt.lineTo(0,165); cxt.closePath(); cxt.stroke(); cxt.restore(); } } //指针（时分秒） //时针 cxt.save(); cxt.lineWidth=12; cxt.strokeStyle="black"; cxt.beginPath(); cxt.translate(250,250); cxt.rotate((hou*30+min*0.5+180)/180*Math.PI); cxt.moveTo(0,0); cxt.lineTo(0,90); cxt.closePath(); cxt.stroke() cxt.restore(); //分针 cxt.save(); cxt.lineWidth=5; cxt.strokeStyle="black"; cxt.beginPath(); cxt.translate(250,250); cxt.rotate((min*6+sec*0.1+180)/180*Math.PI); cxt.moveTo(0,0); cxt.lineTo(0,130); cxt.closePath(); cxt.stroke() cxt.restore(); //秒针 cxt.save(); cxt.lineWidth=2; cxt.strokeStyle="red"; cxt.beginPath(); cxt.translate(250,250); cxt.rotate((sec*6+mec*0.006+180)/180*Math.PI); cxt.moveTo(0,0); cxt.lineTo(0,150); cxt.closePath(); cxt.stroke(); cxt.fillStyle="red"; cxt.beginPath(); cxt.arc(0,148,4,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); cxt.fillStyle="white"; cxt.beginPath(); cxt.arc(0,148,2,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); cxt.restore(); //秒针装饰 cxt.fillStyle="red"; cxt.beginPath(); cxt.arc(250,250,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); cxt.fillStyle="black"; cxt.beginPath(); cxt.arc(250,250,13,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); cxt.fillStyle="white"; cxt.beginPath(); cxt.arc(250,250,10,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); } drawClock(); //使用setInterval(代码,周期(毫秒制))让时钟动起来 setInterval(drawClock,10); </script>  <div id="wimoban_p"> <p>来代码整理：<a href="http://www.5imoban.net/" title="模板网" alt="模板网">我爱模板网</a></p> <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> <p></p> </div> </body> </html>
提示：您可以先修改部分代码再运行

使用方法

1、引入上面运行代码中的“”和“”之间的代码到您的html页面即可。
2、调用代码的参数是时钟的秒针走动的速度，设置为1000，就会每隔一秒走动一次：

setInterval(drawClock,10);

本文标签：
HTML5时钟

HTML5+js绘制的不停走动的圆形时钟效果预览 HTML5+js绘制的不停走动的圆形时钟本地下载

HTML5+js绘制的不停走动的圆形时钟

热门网页特效

热门PSD模板

热门CSS模板

热门网站源码

热门酷站欣赏

热门建站资源

热门建站教程

热门文章