JSで時間を扱うことはよくあります。
そんなときMoment.jsというライブラリを使うと年月日のフォーマットや時差の扱いなどが簡単にできます。
時間を数値として計算し、角度に変換して回転させるCSSを実装します。
実装サンプルはこちら。
以下解説です。
まず、moment.jsを読み込みます。
詳しくはこちら「Moment.js」をご確認ください。
そしてHTMLはこちら
<div id="clock">
<div id="hour"><div></div></div>
<div id="minute"><div></div></div>
<div id="second"><div></div></div>
</div>
<div id="demo_time"></div>
デザインを調整するためにDIVを多用してますが、特にこうしないといけないわけではないです。
そしたらJSはこちら
function timeRefresh () {
updateClock();
updateText();
setTimeout(timeRefresh, 1000);
//１秒おきに繰り返し実行
}
function updateClock(){
var now = moment();
//秒
var second = now.seconds() * 6;
//60を6倍すると360になるので。
//分
var minute = now.minutes() * 6 + second / 60;
//一回転を60で割ってさらに60で割ると分の針の動きになる。
//時
var hour = ((now.hours() % 12) / 12) * 360 + minute / 12;
//12が０になるように計算し、時の角度に過ぎた分の角度分を足す。
$('#hour').css("transform", "rotate(" + hour + "deg)");
$('#minute').css("transform", "rotate(" + minute + "deg)");
$('#second').css("transform", "rotate(" + second + "deg)");
}
function updateText(){
//今の時間をデジタルで表示
a = moment().format('YYYY/MM/DD, h:mm:ss a');
$("#demo_time").html(a);
}
timeRefresh();
毎秒角度を書き換えて、DIVが回転しています。
CSSはこちら
#clock{
margin:10px auto;
width: 200px;
height:200px;
position: relative;
border-radius: 30px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
border:solid 1px #EEE;
background-color:#CCC;
}
#hour {
width: 1px;
height:200px;
position: absolute;
top:0%;
left:100px;
padding-top:50px;
box-sizing: border-box;
}
#hour div{
height:50px;
position: absolute;
width:8px ;
left:-4px;
border-radius: 4px;
background-color:#EEF;
}
#minute {
width: 1px;
height:200px;
position: absolute;
top:0%;
left:100px;
padding-top:20px;
box-sizing: border-box;
}
#minute div{
height:80px;
width:6px;
left:-3px;
border-radius: 3px;
position:absolute;
background-color:#FEE;
}
#second {
width: 1px;
height:200px;
position: absolute;
top:0%;
left:100px;
padding-top:0px;
box-sizing: border-box;
}
#second div{
height:100px;
width:1px ;
background-color:#900;
}
#demo_time {
margin:10px auto;
width:200px;
background-color:#223;
color:#FFF;
text-align:center;
padding:10px 20px;
}
