首页 > 代码库 > H TML5 之 （4） 小项目一 时钟
H TML5 之 （4） 小项目一 时钟
这里做一个HTML5 入门的练手，一个小时钟项目，可以再上面拓展很多，程序员培养的就是思想
<!DOCTYPE HTML><html><head><title>Click</title><style>#clock{ background:#abcdef;}</style></head><body><canvas id="clock" width="500" height="500" >您的浏览器不支持标签，无法看到时钟</canvas></body><script> var clock = document.getElementById("clock"); var cxt = clock.getContext("2d"); function drawCloclk(){ cxt.clearRect(0,0,500,500); //获取时间对象 var now = new Date(); var sec = now.getSeconds(); var min = now.getMinutes(); var hours = now.getHours(); //小时必须获取浮点类型 hours = hours+min/60; //转换时间 hours = hours >12?hours-12:hours; //表盘 蓝色 cxt.lineWidth = 10; cxt.strokeStyle="blue"; cxt.beginPath(); cxt.arc(250,250,200,0,360,false); cxt.stroke(); cxt.closePath(); //刻度 for(var i=0;i<12;i++){ //开启异次元空间 cxt.save(); cxt.beginPath(); cxt.lineWidth = 10; cxt.strokeStyle="#000"; //设置原点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(i*30*Math.PI/180); //画线 cxt.moveTo(0,-170); cxt.lineTo(0,-190); cxt.stroke(); cxt.closePath(); cxt.restore(); } //分刻度 for(var i=0;i<60;i++){ //开启异次元空间 cxt.save(); cxt.beginPath(); cxt.lineWidth = 5; cxt.strokeStyle="#000"; //设置原点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(i*6*Math.PI/180); //画线 cxt.moveTo(0,-180); cxt.lineTo(0,-190); cxt.stroke(); cxt.closePath(); cxt.restore(); } //时针 //开启异次元空间 cxt.save(); cxt.beginPath(); cxt.lineWidth = 7; cxt.strokeStyle="#000"; //设置原点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(hours*30*Math.PI/180); //画线 cxt.moveTo(0,-140); cxt.lineTo(0,10); cxt.stroke(); cxt.closePath(); cxt.restore(); //分针 //开启异次元空间 cxt.save(); cxt.beginPath(); cxt.lineWidth = 5; cxt.strokeStyle="#000"; //设置原点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(min*6*Math.PI/180); //画线 cxt.moveTo(0,-160); cxt.lineTo(0,15); cxt.stroke(); cxt.closePath(); cxt.restore(); //秒针 //开启异次元空间 cxt.save(); cxt.beginPath(); cxt.lineWidth = 3; cxt.strokeStyle="red"; //设置原点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(sec*6*Math.PI/180); //画线 cxt.moveTo(0,-170); cxt.lineTo(0,20); cxt.closePath(); cxt.stroke(); cxt.beginPath(); //画交叉点 cxt.arc(0,0,5,0,360,false) cxt.closePath(); cxt.fillstyle = "blue"; cxt.fill(); cxt.stroke(); cxt.beginPath(); //画交叉点 cxt.arc(0,-150,5,0,360,false) cxt.closePath(); cxt.fillstyle = "blue"; cxt.fill(); cxt.stroke(); cxt.restore(); } //使用周期循环函数setInternal(代码，时间)，让时钟动起来 drawCloclk; setInterval(drawCloclk,1000); </script></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。