<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Analog Clock</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
.analog-clock {
position: relative;
margin: 100px auto 0;
width: 200px;
height: 200px;
background-color: aliceblue;
border-radius: 50%;
}
.hand {
position: absolute;
left: 50%;
width: 1px;
height: 100px;
/* 자바스크립트에 의해 덮어써진다. */
/* transform: translate3d(-50%, 0, 0); */
transform-origin: 100% 100%;
}
.hour {
background-color: #f44336;
}
.minute {
background-color: #3f51b5;
}
.second {
background-color: #9e9e9e;
}
.center-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 12px;
height: 12px;
background-color: black;
border-radius: 50%;
}
.digital-clock {
position: absolute;
top: 350px;
left: 50%;
transform: translate3d(-50%, 0, 0);
font-size: 2em;
font-family: 'Source Code Pro', monospace;
}
</style>
</head>
<body>
<div class="clock">
<div class="analog-clock">
<div class="hour hand"></div>
<div class="minute hand"></div>
<div class="second hand"></div>
<div class="center-circle"></div>
</div>
<div class="digital-clock"></div>
</div>
<script>
const $display = document.querySelector('.digital-clock');
const $sec = document.querySelector('.second');
const $min = document.querySelector('.minute');
const $hour = document.querySelector('.hour');
let today = new Date();
let h = today.getHours();
let m = today.getMinutes();
let s = today.getSeconds();
function watch() {
s = s + 1;
if(s===60){
s = 0;
m += 1;
}
if(m===60){
m = 0;
h = h+1;
}
if(h===24){
h = 0;
}
const ch0 = '0' + h;
const ch1 = '0' + m;
const ch2 = '0' + s;
$display.textContent = ch0.slice(-2) + ":" + ch1.slice(-2) + ":" + ch2.slice(-2);
$sec.style.transform = `rotate(${s*6}deg)`;
$min.style.transform = `rotate(${m*6}deg)`;
$hour.style.transform = `rotate(${(h%12)*30}deg)`;
}
setInterval(watch, 1000);
</script>
</body>
</html>반응형
'공부 > TIL-D' 카테고리의 다른 글
| [angular] 템플릿 참조변수, 세이프 내비게이션 연산 (0) | 2019.05.29 |
|---|---|
| deg, clientX, clientY (0) | 2019.05.28 |
| stop-watch (0) | 2019.05.26 |
| counter (0) | 2019.05.25 |
| toggle (0) | 2019.05.23 |