Overcome your weaknesses through the HTML5 Coding Assessment Test! Surpass your rivals starting next school term!

or

SPEC 審査結果発表!

Human Clock

Follow

2010-07-07 16:48:26

License: MIT License

Fork: 39

Fav: 9

View: 5017

Play
Stop
Reload

Smart Phone

Readme
JavaScript 52 lines
HTML 3 lines
CSS 5 lines

Human Clock
Raphael 1.4.3 - JavaScript Vector Library

window.onload = function () {
  var r = Raphael('raphael_canvas', 465, 465);
  var center = 465 >> 1;
  var updateView = (function() {
    var sec;
    return function () {
      var now = new Date, now_sec = now.getSeconds();
      if (now_sec == sec) return;
      var hour = now.getHours(), min = now.getMinutes();
      
      _updateView(hour, min, sec = now_sec);
    }
  })();
  
  for (var i = 0; i < 12; ++i)
    drawTrapezium(4, 16, 2, 0, center, center + 180 -16).rotate(i * 30, center , center);
    
  var hour = drawTrapezium(6, -90, 10, 5, center, center, 0xdc143c),
      min = drawTrapezium(5, -130, 8, 5, center, center, 0x228b22),
      sec = drawTrapezium(3, -150, 5, 5, center, center, 0xeb6101);
    
  updateView();
  setInterval(updateView, 100);
  
  function drawTrapezium(right, top, left, bottom, centerX, centerY, color) {
    var commands = ['M', 'L', 'L', 'L', 'L'];
    var coordinates = [
      left, bottom, -left, bottom, -right, top, right, top, left, bottom
    ];
    var data = [];
    for (var i = 0; i < 5; ++i) {
      data.push(commands[i]);
      data.push(centerX + coordinates[2 * i], ",", centerY + coordinates[2 * i + 1]);
    }
    color = color ? color.toString(16) : "000000";
    while (color.length < 6) color = "0" + color;
    color = "#" + color;
    return r.path(data.join('')).attr({fill:color, stroke:"none"});
  }
  
  function _updateView(h, m, s) {
    setRotation(hour, (h % 12) * 30 + m / 2, center, center); 
    setRotation(min, m * 6, center, center);
    setRotation(sec, s * 6, center, center);
  }
  
  function setRotation(node, angle, centerX, centerY) {
    node.attr({rotation : angle + " " + centerX + " " + centerY});
  }
}

Human Clock

window.onload = function () { var r = Raphael('raphael_canvas', 465, 465); var center = 465 >> 1; var updateView = (function() { var sec; return function () { var now = new Date, now_sec = now.getSeconds(); if (now_sec == sec) return; var hour = now.getHours(), min = now.getMinutes(); _updateView(hour, min, sec = now_sec); } })(); for (var i = 0; i < 12; ++i) drawTrapezium(4, 16, 2, 0, center, center + 180 -16).rotate(i * 30, center , center); var hour = drawTrapezium(6, -90, 10, 5, center, center, 0xdc143c), min = drawTrapezium(5, -130, 8, 5, center, center, 0x228b22), sec = drawTrapezium(3, -150, 5, 5, center, center, 0xeb6101); updateView(); setInterval(updateView, 100); function drawTrapezium(right, top, left, bottom, centerX, centerY, color) { var commands = ['M', 'L', 'L', 'L', 'L']; var coordinates = [ left, bottom, -left, bottom, -right, top, right, top, left, bottom ]; var data = []; for (var i = 0; i < 5; ++i) { data.push(commands[i]); data.push(centerX + coordinates[2 * i], ",", centerY + coordinates[2 * i + 1]); } color = color ? color.toString(16) : "000000"; while (color.length < 6) color = "0" + color; color = "#" + color; return r.path(data.join('')).attr({fill:color, stroke:"none"}); } function _updateView(h, m, s) { setRotation(hour, (h % 12) * 30 + m / 2, center, center); setRotation(min, m * 6, center, center); setRotation(sec, s * 6, center, center); } function setRotation(node, angle, centerX, centerY) { node.attr({rotation : angle + " " + centerX + " " + centerY}); } } <div id="raphael_canvas"></div> html,body { margin:0px; padding:0px; background : #ffffff; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/nsX5/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/Event/jam_session1" title="Human Clock">Human Clock - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

Tags

Favorite by

kuroarizuka

jinhai_orz

reloj

xxxYukihirox..:

event jam jam_session1

eventJAM ～ HTML5 and Flash ～ Session 1

Forked

sort

forked from: Human Clock

0
0
201views

58/3/5
- jam_session1

forked from: Human Clock

0
0
403views

53/3/5

forked from: Human Clock

0
0
374views

53/3/5

Minesweeper Clock

1
9
1442views

224/2/64