본문 바로가기
정보창고/블로그 정보

HTML-실시간으로 변하는 시계출력

풍란의 향기 2012. 2. 7. 21:57

<script language="JavaScript">
fCol='000000';//face colour.
sCol='ff0000';//seconds colour.
mCol='000000';//minutes colour.
hCol='000000';//hours colour.
H='....';
H=H.split('');
M='.....';
M=M.split('');
S='......';
S=S.split('');
Ypos=0;
Xpos=0;
Ybase=8;
Xbase=8;
dots=12;
ns=(document.layers)?1:0;
if (ns){
dgts='1 2 3 4 5 6 7 8 9 10 11 12';
dgts=dgts.split(' ')
for (i=0; i < dots; i++){
document.writｅ('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial,Verdana size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
}
for (i=0; i < M.length; i++){
document.writｅ('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < H.length; i++){
document.writｅ('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < S.length; i++){
document.writｅ('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');
}
}
else{
document.writｅ('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=1; i < dots+1; i++){
document.writｅ('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial,Verdana;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.writｅ('</div></div>')
document.writｅ('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++){
document.writｅ('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
}
document.writｅ('</div></div>')
document.writｅ('</div></div>')
document.writｅ('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++){
document.writｅ('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
}
document.writｅ('</div></div>')
document.writｅ('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++){
document.writｅ('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
}
document.writｅ('</div></div>')
}
function clock(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
if (ns){
Ypos=window.pageYOffset+window.innerHeight-60;
Xpos=window.pageXOffset+window.innerWidth-80;
}
else{
Ypos=document.body.scrollTop+window.document.body.clientHeight-60;
Xpos=document.body.scrollLeft+window.document.body.clientWidth-60;
}
if (ns){
for (i=0; i < dots; ++i){
document.layers["nsDigits"+i].top=Ypos-5+40*Math.sin(-0.49+dots+i/1.9);
document.layers["nsDigits"+i].left=Xpos-15+40*Math.cos(-0.49+dots+i/1.9);
}
for (i=0; i < S.length; i++){
document.layers["nx"+i].top=Ypos+i*Ybase*Math.sin(sec);
document.layers["nx"+i].left=Xpos+i*Xbase*Math.cos(sec);
}
for (i=0; i < M.length; i++){
document.layers["ny"+i].top=Ypos+i*Ybase*Math.sin(min);
document.layers["ny"+i].left=Xpos+i*Xbase*Math.cos(min);
}
for (i=0; i < H.length; i++){
document.layers["nz"+i].top=Ypos+i*Ybase*Math.sin(hrs);
document.layers["nz"+i].left=Xpos+i*Xbase*Math.cos(hrs);
}
}
else{
for (i=0; i < dots; ++i){
ieDigits[i].style.pixelTop=Ypos-15+40*Math.sin(-0.49+dots+i/1.9);
ieDigits[i].style.pixelLeft=Xpos-14+40*Math.cos(-0.49+dots+i/1.9);
}
for (i=0; i < S.length; i++){
x[i].style.pixelTop =Ypos+i*Ybase*Math.sin(sec);
x[i].style.pixelLeft=Xpos+i*Xbase*Math.cos(sec);
}
for (i=0; i < M.length; i++){
y[i].style.pixelTop =Ypos+i*Ybase*Math.sin(min);
y[i].style.pixelLeft=Xpos+i*Xbase*Math.cos(min);
}
for (i=0; i < H.length; i++){
z[i].style.pixelTop =Ypos+i*Ybase*Math.sin(hrs);
z[i].style.pixelLeft=Xpos+i*Xbase*Math.cos(hrs);
}
}
setTimeout('clock()',50);
}
if (document.layers || document.all) window.onload=clock;
//-->
</script>


스크립트코드를 <head> 태그 사이에 삽입하세요. 시계의 위치는 항상 브라우저 화면의 오른쪽 하단에 나타납니다.

 

Script Example

<HTML>
<HEAD>

<SCRIPT>
startday = new Date();
clockStart = startday.getTime();
function initStopwatch() {
var myTime = new Date();        
var timeNow = myTime.getTime();          
var timeDiff = timeNow - clockStart;        
this.diffSecs = timeDiff/1000;        
return(this.diffSecs); }
function getSecs() {        
var mySecs = initStopwatch();        
var mySecs1 = ""+mySecs;        
mySecs1= mySecs1.substring(0,mySecs1.indexOf(".")) + " secs.";        
document.forms[0].timespent.value = mySecs1        
window.setTimeout('getSecs()',1000); }
</SCRIPT>

</HEAD>

<BODY onload="window.setTimeout('getSecs()',1)">

<CENTER>
<FORM><FONT size=2>머무른 시간:</FONT>
<INPUT name=timespent size=9></FORM>
</CENTER>

</BODY>
</HTML>


설명
시간이 실시간으로 변하는 것을 알 수 있습니다. form 태그를 이용해서 그 안에 들어갈 내용을 스크립트를 이용해서 뿌려주는 방식입니다.

 

Morning Has Broken

'정보창고 > 블로그 정보' 카테고리의 다른 글

HTML-메뉴 설명  (0) 2012.02.07
HTML-요일마다 바뀌는 배경색  (0) 2012.02.07
HTML-Script Example  (0) 2012.02.07
HTML-마우스 Over&Out 이벤트 처리  (0) 2012.02.07
HTML-마우스클릭 그림Up&Down  (0) 2012.02.07

'정보창고/블로그 정보' Related Articles

티스토리툴바