一个简易时钟效果js实现代码
程序员文章站
2022-06-24 17:21:24
本文实例为大家分享了js时钟特效 的具体代码,供大家参考,具体内容如下
js代码
var canvas = document.getelemen...
本文实例为大家分享了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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 封装运动框架实战左右与上下滑动的焦点轮播图(实例)
下一篇: JS实现的简单表单验证功能完整实例