예전에 플래시로 시계를 만들어서 swf 파일을 웹페이지에 올렸지만 2020년 12월 31일 이후 adobe flash player의 웹페이지 지원을 중단하고 있습니다.
그래서 html css javascript를 이용해서 만들어 봤습니다.
index.html 숫자(0~9) 이미지 파일로 구성 되어 있습니다.
index.html 소스 파일은 아래와 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<title>reNzer.net</title>
<style></style>
<meta charset="utf-8" />
<style type="text/css">
<!--
*{ margin:0;padding:0;}
body {
background: #FF;
text-align: center;
}
ul {
list-style:none;
margin:0;
padding:0;
}
li {
margin: 0 0 0 0;
padding: 0 0 0 0;
border : 0;
float: left;
}
#top {
display: block;
margin: 200 auto;
}
#clock_rz {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.colon {color: #222; width:18px; height:75px; line-height: 50px; text-align: center; font-size: 5em;}
.tag { margin: 0 0 0 0;
padding: 0 0 0 0;
border : 0;
float: right;
}
-->
</style>
</head>
<body style="overflow:hidden;">
<div id="clock_rz">
<div>
<ul>
<li><img id="h1"></li><li><img id="h2"></li><li><span class="colon">:</span></li><li><img id="m1"></li><li><img id="m2"></li><li><span class="colon">:</span></li><li><img id="s1"></li><li><img id="s2"></li>
</ul>
<ul>
<li class="tag">renzer.net</li>
</ul>
</div>
</div>
<script>
(function() {
function getTime() {
var date = new Date();
return {
hours: date.getHours(),
minutes: (date.getMinutes() < 10) ? "0" + date.getMinutes() : date.getMinutes(),
seconds: (date.getSeconds() < 10) ? "0" + date.getSeconds() : date.getSeconds()
};
}
function startClock() {
var time = getTime();
tmp_s_digit = time.seconds.toString();
s_digit_A = tmp_s_digit.substring(0,1);
s_digit_B = tmp_s_digit.substring(1,2);
tmp_m_digit = time.minutes.toString();
m_digit_A = tmp_m_digit.substring(0,1);
m_digit_B = tmp_m_digit.substring(1,2);
tmp_h_digit = time.hours.toString();
h_digit_A = tmp_h_digit.substring(0,1);
h_digit_B = tmp_h_digit.substring(1,2);
s1_img_src = 'image'+ s_digit_A + '.png';
s2_img_src = 'image'+ s_digit_B + '.png';
document.getElementById('s1').src=s1_img_src ;
document.getElementById('s2').src=s2_img_src ;
m1_img_src = 'image'+ m_digit_A + '.png';
m2_img_src = 'image'+ m_digit_B + '.png';
document.getElementById('m1').src=m1_img_src ;
document.getElementById('m2').src=m2_img_src ;
h1_img_src = 'image'+ h_digit_A + '.png';
h2_img_src = 'image'+ h_digit_B + '.png';
document.getElementById('h1').src=h1_img_src ;
document.getElementById('h2').src=h2_img_src ;
}
function init(){
setInterval(function() {
startClock();
}, 1000);
}
init();
})();
</script>
</body>
</html>
이미지 파일은 image0.png 부터 image9.png 까지 9개의 파일은 본인의 취향대로 지정할 수 있습니다.
아래 링크를 클릭하면 웹페이지에서 볼수 있습니다.
http://renzer.net/
'정보' 카테고리의 다른 글
| 코로나19 양주 유양 임시선별검사소 (0) | 2021.11.13 |
|---|---|
| QM5 사이드미러 접기 (0) | 2021.10.24 |
| 알리익스프레스 통관 정보 조회 하기 - 유니패스 (0) | 2021.03.06 |
| 아이폰에서 노트북 pc 로 화면 미러링 방법 (0) | 2021.02.22 |
| 알리 익스프레스 가입하기 주문하기 (0) | 2021.02.17 |
