【小玩意】time-passing-by clock

时间：2016-04-27 00:15:17 阅读：257 评论：0 收藏：0 [点我收藏+]

就着youtube上的教程用html和js做了个小时钟。

Code:

clock.html

//clock.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas" width="500" height="500">
    <script type="text/javascript" src="C:\Users\Administrator\Desktop\Clock\clock.js"></script>
  </canvas>
</body>
</html>

clock.js

//clock.js
var canvas = document.getElementById(‘canvas‘);
var ctx = canvas.getContext(‘2d‘);
ctx.strokeStyle = ‘lightblue‘;
ctx.lineWidth = 17;
ctx.lineCap = ‘round‘;
ctx.shadowBlur = 15;
ctx.shadowColor = ‘lightblue‘;

function degToRad(degree) {
  var factor = Math.PI/180;
  return degree*factor;
}


function renderTime() {
  
  var now = new Date();
  var today = now.toDateString();
  var time = now.toLocaleTimeString();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var milliseconds = now.getMilliseconds();
  var newSeconds = seconds+(milliseconds/1000);
  
  
  //Background
  gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
  gradient.addColorStop(0,‘GREY‘);
  gradient.addColorStop(1,‘BLACK‘);
  ctx.fillStyle = gradient;  
  ctx.fillRect(0, 0, 500, 500);
  
  //Hours
  ctx.beginPath();
  ctx.arc(250, 250, 200, degToRad(270), degToRad(hours*15-90));
  ctx.stroke();
  
  //Minutes
  ctx.beginPath();
  ctx.arc(250, 250, 170, degToRad(270), degToRad(minutes*6-90));
  ctx.stroke();
  
  //Seconds
  ctx.beginPath();
  ctx.arc(250, 250, 140, degToRad(270), degToRad(newSeconds*6-90));
  ctx.stroke();
  
  //Date
  ctx.font = "25px Arial";
  ctx.fillStyle = ‘lightblue‘;
  ctx.fillText(today, 175, 250);
  
  //Time
  ctx.font = "25px Arial";
  ctx.fillStyle = ‘lightblue‘;
  ctx.fillText(time, 175, 280);
  
}

setInterval(renderTime, 40);

效果图：我配色是真的无能= - =

【小玩意】time-passing-by clock

原文：http://www.cnblogs.com/liez/p/5437156.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)