当前位置:主页 > javascript教程 > 一个简易时钟效果js实现代码

时钟效果js代码分享

发布:2019-11-12 15:22:53 83


我们帮大家精选了相关的编程文章,网友祖黎明根据主题投稿了本篇教程内容,涉及到js、时钟、一个简易时钟效果js实现代码相关内容,已被232网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

一个简易时钟效果js实现代码

本文实例为大家分享了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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


参考资料

相关文章

  • Node.js使用AngularJS的方法总结

    发布:2019-07-30

    这篇文章主要介绍了Node.js 使用AngularJS的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • C语言 ffmpeg与sdl实现播放视频同时同步时钟详解

    发布:2023-03-02

    使用ffmpeg和sdl实现播放视频后,需要再实现时钟同步才能正常的播放视频,尤其是有音频的情况,我们通常需要将视频同步到音频来确保音画同步


  • node.js中mysql数据库配置及连接知识点分享

    发布:2020-02-04

    本文主要介绍了node.js平台下的mysql数据库配置及连接的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧


  • 详解nodeJS之二进制buffer对象

    发布:2023-02-28

    给网友朋友们带来一篇关于node的教程,本篇文章主要介绍了nodeJS之二进制buffer对象,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 详解JavaScript实现表格滚动分页

    发布:2020-03-10

    这篇文章主要为大家详细介绍了基于JavaScript实现表格滚动分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • 怎样在JS中判断某个字符串是否包含另一个字符串

    发布:2020-03-14

    本文给大家带来JS中判断某个字符串是否包含另一个字符串的五种方法,有string对象的方法,match() 方法,RegExp对象的方法,test() 方法,exec() 方法,具体内容详情大家参考下本文


  • JS查找文章里词频最高的单词

    发布:2020-01-20

    这篇文章主要为大家详细介绍了JS查找英文文章中出现频率最高的单词,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • JS实现线性表的链式表示方法的实例内容

    发布:2020-04-17

    这篇文章主要介绍了JS实现线性表的链式表示方法,简单讲解了线性表链式表示的原理并结合实例形式分析了js针对线性表链式表示的创建、插入、删除等节点操作技巧,需要的朋友可以参考下


网友讨论