一个简易时钟效果js实现代码


Posted in Javascript onMarch 25, 2020

本文实例为大家分享了js时钟特效 的具体代码,供大家参考,具体内容如下

一个简易时钟效果js实现代码

js代码

var canvas = document.getElementById("clock");
var clock = canvas.getContext("2d");
 
function zhong() {
 clock.save();
 //开始画外层圆
 clock.translate(200, 200);
 clock.strokeStyle = 'black';
 clock.lineWidth = 3;
 clock.beginPath();
 clock.arc(0, 0, 195, 0, 2 * Math.PI);
 clock.stroke();

 //时钟上的数字
 var shuzi = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
 clock.font = "30px Arial";
 clock.textAlign = "center";
 clock.textBaseline = "middle";
 shuzi.forEach(function(number, i) {
 var rad = 2 * Math.PI / 12 * i;
 var x = Math.cos(rad) * 180;
 var y = Math.sin(rad) * 180;
 clock.fillText(number, x, y);
 });

 // 小圆点

 for(j = 0; j < 60; j++) {
 var h = 2 * Math.PI / 60 * j;
 var m = Math.cos(h) * 180;
 var n = Math.sin(h) * 180;
 clock.fillStyle = 'black';
 clock.beginPath();
 if(j % 5 === 0) {
 continue;
 }
 clock.arc(m, n, 3, 0, 2 * Math.PI);
 clock.fill();
 }
}
function drawHour(hour,min) {
 clock.save();
 var rad = 2 * Math.PI / 12 * hour;
 var red = 2 *Math.PI/12/60*min;
 clock.rotate(rad+red);
 clock.lineWidth = 10;
 clock.lineCap = "round";
 clock.beginPath();
 clock.moveTo(0, 5);
 clock.lineTo(0, -100);
 clock.stroke();
 clock.restore();
}

function drawmin(min) {
 clock.save();
 var rad = 2 * Math.PI / 60 * min;
 clock.rotate(rad);
 clock.lineWidth = 5;
 clock.lineCap = "round";
 clock.beginPath();
 clock.moveTo(0, 10);
 clock.lineTo(0, -150);
 clock.stroke();
 clock.restore();
}

function drawsec(sec) {
 clock.save();
 var rad = 2 * Math.PI / 60 * sec;
 clock.rotate(rad);
 clock.lineWidth = 2;
 clock.lineCap = "round";
 clock.strokeStyle = "red";
 clock.beginPath();
 clock.moveTo(0, 10);
 clock.lineTo(0, -180);
 clock.stroke();
 clock.restore();
}

function dian() {
 clock.fillStyle = "white";
 clock.beginPath();
 clock.arc(0, 0, 2, 0, 2 * Math.PI);
 clock.fill();
}

function xuanzhuan() {
 clock.clearRect(0,0,400,400);
 zhong();
 var now = new Date();
 var hour = now.getHours();
 var min = now.getMinutes();
 var sec = now.getSeconds();
 drawHour(hour,min);
 drawmin(min);
 drawsec(sec);
 dian();
 clock.restore();
}
xuanzhuan();

setInterval(xuanzhuan, 1000);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 #Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 #Javascript
微信小程序 动画的简单实例
Oct 12 #Javascript
node通过npm写一个cli命令行工具
Oct 12 #Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 #Javascript
AngularJS实现表单验证功能详解
Oct 12 #Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 #Javascript
You might like
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP扩展开发入门教程
2015/02/26 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python字符串排序方法
2014/08/29 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
python对于requests的封装方法详解
2019/01/03 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Python如何实现的二分查找算法
2020/05/27 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
转预备党员政审材料
2014/02/06 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书