jsdo.it にGrow!ボタンを設置できるようになりました！

or

Human Clock

Follow

2010-07-07 16:48:26

License: MIT License

Fork: 39

Fav: 9

View: 5746

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; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

Tweet

style

Design view
Code view

code

<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>

QR Code

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
218views

58/3/5
- jam_session1

forked from: Human Clock

0
0
429views

53/3/5

forked from: Human Clock

0
0
391views

53/3/5

Minesweeper Clock

1
9
1597views

224/2/64