一个简易时钟效果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 相关文章推荐
JavaScript 数组循环引起的思考
Jan 01 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
Javascript 数组排序详解
Oct 22 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
微信小程序实现页面跳转传值的方法
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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
python和flask中返回JSON数据的方法
2018/03/26 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
Django 用户认证组件使用详解
2019/07/23 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
阳光体育活动方案
2014/02/16 职场文书
先进个人总结范文
2015/02/15 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis