view source

JavaScript

var ns = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(ns, 'svg');
var svgNS = svg.namespaceURI;
svg.style.display = 'block';
svg.style.margin = '0 auto';

var size = Math.min(window.innerWidth, window.innerHeight) || 400;
var w = size;
var h = size;
var cx = w/2;
var cy = h/2;
var l = w*(3/8);
var strokeWidth = 10;

svg.setAttribute('width', w);
svg.setAttribute('height', h);
 
container = document.getElementById('demo');
container.appendChild(svg);


var circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', cx);
circle.setAttribute('cy', cy);
circle.setAttribute('r', l);
circle.setAttribute('fill', 'none');
circle.setAttribute('stroke', '#000');
circle.setAttribute('stroke-width', strokeWidth*4);
svg.appendChild(circle);


var lines = [];
var hands = [
  's',
  'm',
  'h',
];


hands.forEach(function(v){
  lines[v] = document.createElementNS(svgNS, 'path');
  lines[v].setAttribute('fill', 'none');
  lines[v].setAttribute('stroke', '#000');
  lines[v].setAttribute('stroke-linecap', 'round');
  svg.appendChild(lines[v]);
});

var aryPoint12 = new Array(12).fill().map((_, i) => i);
aryPoint12.forEach(function(v, i){
  var dot = document.createElementNS(svgNS, 'circle');
  var deg = i * (360/12)-90;
  var rad = deg * (Math.PI / 180);
  var x = cx+Math.cos(rad)*l*(9/10);
  var y = cy+Math.sin(rad)*l*(9/10);
  console.log(i);
  dot.setAttribute('cx', x);
  dot.setAttribute('cy', y);
  dot.setAttribute('r', strokeWidth);
  dot.setAttribute('fill', '#000');
  svg.appendChild(dot);
});

lines['m'].setAttribute('stroke-width', '10');
lines['h'].setAttribute('stroke-width', '20');

var m = 'M ' + cx + ' ' + cy + ' ';
var p = 'l 200,200 ';
var pTemp = 'l {x},{y} ';
var deg = 0;
 
var getD = function(deg, l){
  var rad = deg * (Math.PI / 180);
  var x = Math.cos(rad)*l;
  var y = Math.sin(rad)*l;
  p = pTemp;
  p = p.replace('{x}', x);
  p = p.replace('{y}', y);
  d = m + p;
  return d;
}

var updateClock = function(){
  var date = new  Date();
  var s = date.getSeconds();
  var m = date.getMinutes();
  var h = date.getHours();

  hands.forEach(function(v){
    var deg;
    var l = w*(3/8);
    if(v === 's'){
      deg = s * (360/60)-90;
      l = w*(3/8);
    } else if(v === 'm'){
      deg = m * (360/60)-90;
      deg += s * (360/60/60);
      l = w*(2/8);
    } else if(v === 'h'){
      deg = h * (360/12)-90;
      deg += m * (360/60/60);
      l = w*(1/8);
    }
    console.log(deg);
    var d = getD(deg, l);
    lines[v].setAttribute('d', d);
  });
}

updateClock();
setInterval(function(){
  updateClock();
}, 1000);

CSS


  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-js/js-date-clock-analog-svg/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。