JSFiddle - React, Tailwind, and code Playground

by secretgspot

JavaScript

window.onload = function() {
  drawClock();        // 盤面の描画
  drawClockHand();    // 針の描画・再描画
};

// 各種変数
var WIDTH  = Math.min(document.documentElement.clientWidth,
                      document.documentElement.clientHeight);     // 盤面のサイズ
var HEIGHT = WIDTH;
var CX = WIDTH / 2;   // 中央の座標
var CY = HEIGHT / 2;
var R  = CX * 0.8;    // 半径

// 針オブジェクト
var HOUR_HAND;
var MIN_HAND;
var SEC_HAND;


// 盤面の描画
function drawClock() {
  // 盤
  Raphael([0, 0, WIDTH, HEIGHT, {
    type: 'circle',
    cx: CX,
    cy: CY,
    r: R,
    fill: '#333',
    stroke: '#666',
    'stroke-width': '4'
  }]);

  // 目盛り
  for (var i = 0; i < 60; i++) {
    var sr = (i%5 === 0)? 2: 1;     // scale's radius
    
    Raphael([0, 0, WIDTH, HEIGHT, {
      type: 'circle',
      cx: R * 0.98 * Math.cos(i / 60 * 2 * Math.PI) + CX,
      cy: R * 0.98 * Math.sin(i / 60 * 2 * Math.PI) + CY,
      r: sr,
      fill: '#f99',
      stroke: 'none'
    }]);
  }

  // 針　※重なりを考慮し，この順に定義
  HOUR_HAND = Raphael([0, 0, WIDTH, HEIGHT, {
    type: 'path',
    stroke: '#ff9',
    'stroke-width': 4
  }]);
  MIN_HAND = Raphael([0, 0, WIDTH, HEIGHT, {
    type: 'path',
    stroke: '#fff',
    'stroke-width': 2
  }]);
  SEC_HAND = Raphael([0, 0, WIDTH, HEIGHT, {
    type: 'path',
    stroke: '#f66',
    'stroke-width': 1
  }]);

  // 秒針についてる丸いやつ
  Raphael([0, 0, WIDTH, HEIGHT, {
    type: 'circle',
    cx: CX,
    cy: CY,
    r: 4,
    fill: '#f66',
    stroke: 'none'
  }]);
}

// 針の描画
function drawClockHand() {
  var date = new Date();
  var msec = date.getMilliseconds();
  var sec  = date.getSeconds();
  var min  = date.getMinutes();
  var hour = date.getHours();
  
  var len = R;                // 針の長さ（使い回し）
  var time = msec / 1000;     // 時間（使い回し）

  // 秒針: 秒 + ミリ秒
  time = (sec + time) / 60;
  len *= 0.95;
  SEC_HAND.attr(  'path', makePath(time, len) );

  // 分針: 分 + （秒 + ミリ秒）
  time = (min + time) / 60;
  len *= 0.95;
  MIN_HAND.attr(  'path', makePath(time, len) );

  // 時針: 時 + （分 + 秒 + ミリ秒）
  time =...