一个简易时钟效果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实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
需要发散思维学习PHP
2009/06/29 PHP
PHP网络操作函数汇总
2015/05/18 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python判断数字是否是超级素数幂
2018/09/27 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
python实现经典排序算法的示例代码
2021/02/07 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
毕业生个人求职自荐信
2014/02/26 职场文书
百万英镑观后感
2015/06/09 职场文书
借钱欠条怎么写
2015/07/03 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
理解python中装饰器的作用
2021/07/21 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
Redis Stream类型的使用详解
2021/11/11 Redis
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL
vue 给数组添加新对象并赋值
2022/04/20 Vue.js