一个简易时钟效果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 相关文章推荐
JQuery 常用方法基础教程
Feb 06 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
javaScript封装的各种写法
Aug 14 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
深入理解Node module模块
Mar 26 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 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
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
PHP实现事件机制的方法
2015/07/10 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
Python生成随机密码
2015/03/10 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python创建或生成列表的操作方法
2019/06/19 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
最美家庭活动方案
2014/08/31 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书