一个简易时钟效果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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
JavaScript实例 ODO List分析
Jan 22 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中Smarty模板初体验
2011/08/08 PHP
第六章 php目录与文件操作
2011/12/30 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python内建数据结构详解
2016/02/03 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
员工考核管理制度
2014/02/02 职场文书
工作过失检讨书
2014/02/23 职场文书
企业文化标语口号
2014/06/09 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
2015年药店工作总结
2015/04/20 职场文书
党员进社区活动总结
2015/05/07 职场文书
何玥事迹观后感
2015/06/16 职场文书