一个简易时钟效果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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
详解Vue源码学习之双向绑定
Apr 10 Javascript
详解JavaScript 作用域
Jul 14 Javascript
如何利用vue实现波谱拟合详解
Nov 05 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
Python采用Django开发自己的博客系统
2020/09/29 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
高中军训感言800字
2014/03/05 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
电子商务专业求职信
2014/07/10 职场文书
委托证明范本
2014/11/25 职场文书
大学生党员个人总结
2015/02/13 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL