源码如下:

<!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>

H5实现的时钟的更多相关文章

  1. h5实现实时时钟

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta nam ...

  2. h5 html5 模拟时钟 页面

    <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...

  3. H5 canvas圆形的时钟

    今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...

  4. 通过H5的新标签canvas做出一个时钟的全过程,希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  5. 用H5的canvas做时钟

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>D ...

  6. JavaScript之“创意时钟”项目

    “时钟展示项目”说明文档(文档尾部附有相应代码) 一.最终效果展示: 二.项目亮点 1.代码结构清晰明了 2.可以实时动态显示当前时间与当前日期 3.界面简洁.美观.大方 4.提高浏览器兼容性 三.知 ...

  7. 1分钟快速制作漂亮的H5本地记事本

    大家好,以前给大家分享过一个五步骤制作精美的HTML5时钟的文章,点击回顾<五步教你制作漂亮精致的HTML时钟>,还有<一分钟教你如何实现唯美的文字描边>:今天给大家分享一个用 ...

  8. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  9. 【H5动画】谈谈canvas动画的闪烁问题

    一般来说,在H5开发中,使用canvas往往只是为了展示一些简单的图表或者简单短小的动画,很少考虑到有闪烁的问题. 最近,在手机QQ魔法表情的项目中,就遇到了奇葩的闪烁问题. 这里说的闪烁,是指动画刚 ...

随机推荐

  1. SSIS 发送邮件

    在SSIS中Send Mail的方法主要有三种,使用Send Mail Task,使用Script Task和使用存储过程msdb.dbo.sp_send_dbmail. 一,使用Send Mail ...

  2. Macaca环境搭建全教程

    首先想要会Macaca,还得先会用github,不然你得死……因为各种例子都在git上,官网也一样,蛋疼的很…… #基础环境 1.JDK:jdk1.8-配置变量 2.Android SDK:sdk   ...

  3. 「专题训练」游走(BZOJ-3143)

    题意与分析 定义走到每条边的期望为\(e_i\),一开始的想法是给定一个\(\large\sum_{i=1}^n e_i a_i\),求一个a的排列使得这个和最小.问题在于这样等于没对题目作分析,而且 ...

  4. ubuntu HackRF One相关环境搭建

    本文内容.开发板及配件仅限用于学校或科研院所开展科研实验! 淘宝店铺名称:开源SDR实验室 HackRF链接:https://item.taobao.com/item.htm?spm=a1z10.1- ...

  5. ofo容器pass架构分享

    一.我们先要了解一下,为什么企业需要一个paas平台?或者可以说paas到底能做什么? 1.1 我们先来了解一下paas到底是什么? PaaS是Platform-as-a-Service的缩写,意思是 ...

  6. 高可用OpenStack(Queen版)集群-12.Cinder计算节点

    参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...

  7. PPIO去中心化存储的了解和记录

    目录 介绍 FileCoin P2P技术给去中心化云存储的好处 剩余资源的再次使用 市场竞争会激发民间的智慧 PPIO的2种冗余模式 全副本模式 纠删副本模式 为什么PPIO要设计支付代理节点? 一些 ...

  8. podSpec文件相关知识整理

    上一篇文章整理了我用SVN创建私有库的过程,本文将整理一下有关podSpec文件的相关知识. podSpec中spec的全称是“Specification”,说明书的意思.顾名思义,这是用来描述你这个 ...

  9. R语言安装R package的2种方法

    http://www.cnblogs.com/emanlee/archive/2012/12/05/2803606.html

  10. 分享一个查找linux命令的网站

    http://man.linuxde.net/ 不用每次都找度娘浪费时间了