HTML5实现动态时钟

代码：

<!doctype html>
<html><head></head><body><canvas id="clock" width="500" height="500">您的浏览器不支持canvas标签，无法看到时钟</canvas><script>var clock=document.getElementById('clock');var cxt=clock.getContext('2d');function drawClock(){//清除画布cxt.clearRect(0,0,500,500);var now =new Date();var sec=now.getSeconds();var min=now.getMinutes();var hour=now.getHours();//小时必须获取浮点类型(小时+分数转化成的小时)hour=hour+min/60;//问题 19:23:30//将24小时进制转换为12小时hour=hour>12?hour-12:hour;//表盘(蓝色)cxt.lineWidth=10;cxt.strokeStyle="blue";cxt.beginPath();cxt.arc(250,250,200,0,360,false);cxt.closePath();cxt.stroke();//刻度//时刻度for(var i=0;i<12;i++){cxt.save();//设置时针的粗细cxt.lineWidth=7;//设置时针的颜色cxt.strokeStyle="#000";//先设置0,0点cxt.translate(250,250);//再设置旋转角度cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度cxt.beginPath();cxt.moveTo(0,-170);cxt.lineTo(0,-190);cxt.closePath();cxt.stroke();cxt.restore();}//分刻度for(var i=0;i<60;i++){cxt.save();//设置分刻度的粗细cxt.lineWidth=5;//设置颜色(使用时刻度的颜色)cxt.strokeStyle="#000";//设置或者重置画布的0，0点cxt.translate(250,250);//设置旋转角度cxt.rotate(i*6*Math.PI/180);//画分针刻度cxt.beginPath();cxt.moveTo(0,-180);cxt.lineTo(0,-190);cxt.closePath();cxt.stroke();cxt.restore();}//时针cxt.save();//设置时针风格cxt.lineWidth=7;//设置时针的颜色cxt.strokeStyle="#000";//设置异次元空间的0，0点cxt.translate(250,250);//设置旋转角度cxt.rotate(hour*30*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-140);cxt.lineTo(0,10);cxt.closePath();cxt.stroke();cxt.restore();//分针cxt.save();//设置分针的风格cxt.lineWidth=5;cxt.strokeStyle="#000";//设置异次元空间分针画布的圆心cxt.translate(250,250);//设置旋转角度cxt.rotate(min*6*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-160);cxt.lineTo(0,15);cxt.closePath();cxt.stroke();cxt.restore();//秒针cxt.save();//设置秒针的风格//颜色红色cxt.strokeStyle="red";//粗细 3像素cxt.lineWidth=3;//重置0，0点cxt.translate(250,250);//设置旋转角度cxt.rotate(sec*6*Math.PI/180);//画图cxt.beginPath();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="gray";cxt.fill();//设置笔触样式(秒针已设置)cxt.stroke();//设置秒针前段的小圆点cxt.beginPath();cxt.arc(0,-150,5,0,360,false);cxt.closePath();//设置填充样式cxt.fillStyle="gray";cxt.fill();//设置笔触样式(秒针已设置)cxt.stroke();cxt.restore();}//使用setInterval(代码,毫秒时间)  让时钟动起来drawClock();setInterval(drawClock,1000);</script></body>
</html>

效果图：

备注：将文档后缀改成 .html ，建议用谷歌浏览器查看。

HTML5实现动态时钟相关推荐

Html5代码实现动态时钟
以下是一个简单的HTML5动态时钟的示例: <!DOCTYPE html> <html> <head><title>HTML5动态时钟</titl ...
Html5基于Canvas画一个动态时钟
文章目录前言一.前期准备二.绘制刻度 1.流程 2.效果图三.绘制文字 1.流程 2.效果图四.绘制指针 1.取得当前时间 2.绘制秒针 3.绘制分针 4.绘制时针 5.效果图五.绘制圆心 ...
canvas简单实现动态时钟
使用到的知识: 1. 获取系统时间 2. 画图形,空心图形,实心图形,以及一些属性 3. for循环准备工作:添加一块画布1000*1000(随意),引用canvas.js ...
html中的时钟如何自动,HTML实现网页动态时钟
本文通过实例代码给大家介绍了HTML写一个网页动态时钟效果,需要的的朋友参考下吧用html写一个动态网页时钟,代码如下所示: 时钟特效 function disptime(){ var today= ...
炫酷动态时钟——canvas
今天分享一下用canvas做的动态时钟,原理和代码都很简单,不过还是可以做出很炫酷的效果,想学习canvas的小伙伴可以看一下. 效果图 HTML5的canvas的知识点看源代码前先看一下canva ...
javascript 计算器、动态时钟、表格复选框全选（扩展）、轮播图、36选7、随机数...
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
python动态时钟代码_python实现简易动态时钟
本文实例为大家分享了python实现简易动态时钟的具体代码,供大家参考,具体内容如下 from turtle import * from datetime import * #移动到指定位置 def ...
HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果: http://hovertree.com/t ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...

HTML5实现动态时钟

HTML5实现动态时钟相关推荐

最新文章

热门文章