Home  >  Article  >  Web Front-end  >  js implements a simple 24-hour clock

js implements a simple 24-hour clock

php中世界最好的语言
php中世界最好的语言Original
2018-04-17 16:12:084412browse

This time I will bring you js to implement a simple 24-hour clock. What are the precautions to implement a simple 24-hour clock in js? The following is a practical case, let's take a look.

js code

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);
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:



The above is the detailed content of js implements a simple 24-hour clock. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn