一个简易时钟效果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中的常见排序算法
Mar 27 Javascript
ext 同步和异步示例代码
Sep 18 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP获取服务器端信息的方法
2014/11/28 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
es6函数之严格模式用法实例分析
2020/03/17 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
Python实现二分查找算法实例
2015/05/26 Python
python制作一个桌面便签软件
2015/08/09 Python
python实现简单的文字识别
2018/11/27 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
python三方库之requests的快速上手
2019/03/04 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
财务人员担保书
2014/05/13 职场文书
教师教育心得体会
2016/01/19 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript