html5 clock (canvas 를 이용하지 않는 방식)
로빈아빠
본문
canvas 를 이용하지 않는 방식으로
1. svg 로 이미지를 그리고,
2. css 로 라인을 그린다음
3. css3 rotate 로 회전하는 방식이다.
출처 : 하우코드 로빈아빠..
원 소스 출처는 유투브 참고
https://github.com/yusufshakeel/Web-App/tree/master/analog-clock
같은 방식의 다른 소스코드
https://codepen.io/ergtin/pen/pbLLaB
전체소스
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock</title>
<script type="text/javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="analog-clock">
<svg width="140" height="140">
<circle id="clock-face" cx="70" cy="70" r="65" />
<line id="h-hand" x1="70" y1="70" x2="70" y2="38" />
<line id="m-hand" x1="70" y1="70" x2="70" y2="20" />
<line id="s-hand" x1="70" y1="70" x2="70" y2="12" />
<line id="s-tail" x1="70" y1="70" x2="70" y2="56" />
<text x="62" y="18">12</text>
<text x="126" y="76">3</text>
<text x="66" y="130">6</text>
<text x="7" y="76">9</text>
</svg>
<div class="time-text">
<span id="hr">00</span>
<span>:</span>
<span id="min">00</span>
<span>:</span>
<span id="sec">00</span>
<span id="suffix">--</span>
</div>
</div>
</body>
</html>
<style>
*{
margin:0;
padding:0;
font-family:sans-serif;
font-size:14px;
}
.analog-clock{
width:140px;
height:140px;
}
#clock-face{
stroke:black;
stroke-width:2px;
fill:white;
}
#h-hand, #m-hand, #s-hand, #s-tail{
stroke:black;
stroke-linecap:round;
}
#h-hand{
stroke-width:3px;
}
#m-hand{
stroke-width:2px;
}
#s-hand{
stroke-width:1px;
}
.time-text{
text-align:center;
}
</style>
<script>
function clock(){
//calculate angle
var d, h, m, s;
d = new Date;
h = 30 * ((d.getHours() % 12) + d.getMinutes() / 60);
m = 6 * d.getMinutes();
s = 6 * d.getSeconds();
//move hands
setAttr('h-hand', h);
setAttr('m-hand', m);
setAttr('s-hand', s);
setAttr('s-tail', s+180);
//display time
h = d.getHours();
m = d.getMinutes();
s = d.getSeconds();
if(h >= 12){
setText('suffix', 'PM');
}else{
setText('suffix', 'AM');
}
if(h != 12){
h %= 12;
}
setText('sec', s);
setText('min', m);
setText('hr', h);
//call every second
setTimeout(clock, 1000);
};
function setAttr(id,val){
var v = 'rotate(' + val + ', 70, 70)';
document.getElementById(id).setAttribute('transform', v);
};
function setText(id,val){
if(val < 10){
val = '0' + val;
}
document.getElementById(id).innerHTML = val;
};
window.onload=clock;
</script>
1. svg 로 이미지를 그리고,
2. css 로 라인을 그린다음
3. css3 rotate 로 회전하는 방식이다.
출처 : 하우코드 로빈아빠..
원 소스 출처는 유투브 참고
https://github.com/yusufshakeel/Web-App/tree/master/analog-clock
같은 방식의 다른 소스코드
https://codepen.io/ergtin/pen/pbLLaB
전체소스
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock</title>
<script type="text/javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="analog-clock">
<svg width="140" height="140">
<circle id="clock-face" cx="70" cy="70" r="65" />
<line id="h-hand" x1="70" y1="70" x2="70" y2="38" />
<line id="m-hand" x1="70" y1="70" x2="70" y2="20" />
<line id="s-hand" x1="70" y1="70" x2="70" y2="12" />
<line id="s-tail" x1="70" y1="70" x2="70" y2="56" />
<text x="62" y="18">12</text>
<text x="126" y="76">3</text>
<text x="66" y="130">6</text>
<text x="7" y="76">9</text>
</svg>
<div class="time-text">
<span id="hr">00</span>
<span>:</span>
<span id="min">00</span>
<span>:</span>
<span id="sec">00</span>
<span id="suffix">--</span>
</div>
</div>
</body>
</html>
<style>
*{
margin:0;
padding:0;
font-family:sans-serif;
font-size:14px;
}
.analog-clock{
width:140px;
height:140px;
}
#clock-face{
stroke:black;
stroke-width:2px;
fill:white;
}
#h-hand, #m-hand, #s-hand, #s-tail{
stroke:black;
stroke-linecap:round;
}
#h-hand{
stroke-width:3px;
}
#m-hand{
stroke-width:2px;
}
#s-hand{
stroke-width:1px;
}
.time-text{
text-align:center;
}
</style>
<script>
function clock(){
//calculate angle
var d, h, m, s;
d = new Date;
h = 30 * ((d.getHours() % 12) + d.getMinutes() / 60);
m = 6 * d.getMinutes();
s = 6 * d.getSeconds();
//move hands
setAttr('h-hand', h);
setAttr('m-hand', m);
setAttr('s-hand', s);
setAttr('s-tail', s+180);
//display time
h = d.getHours();
m = d.getMinutes();
s = d.getSeconds();
if(h >= 12){
setText('suffix', 'PM');
}else{
setText('suffix', 'AM');
}
if(h != 12){
h %= 12;
}
setText('sec', s);
setText('min', m);
setText('hr', h);
//call every second
setTimeout(clock, 1000);
};
function setAttr(id,val){
var v = 'rotate(' + val + ', 70, 70)';
document.getElementById(id).setAttribute('transform', v);
};
function setText(id,val){
if(val < 10){
val = '0' + val;
}
document.getElementById(id).innerHTML = val;
};
window.onload=clock;
</script>
첨부파일
- html5clock.html (2.7K) 0회 다운로드 | DATE : 2018-02-17 20:47:52
관련링크
댓글목록
등록된 댓글이 없습니다.