JavaScript는 시간에 따라 온도계를 구현합니다.

이것은 js를 기반으로 한 온도계 시간 스타일 코드입니다. 우리가 본 날짜 표시와 다릅니다. 학습용으로 공유하고 싶습니다

팁: 제대로 작동하지 않는 경우. 브라우저에서 시도해 볼 수 있습니다. 탐색 모드를 전환하세요. 공유해드린 온도계 시간 스타일을 구현한 자바스크립트 코드는 다음과 같습니다

<title> 温度计式样的时间 </title>
<SCRIPT language=javascript>
var cellwidth=10; // EACH "CELL" WIDTH IN PIXELS
var cellheight=10; // EACH "CELL" HEIGHT IN PIXELS
var fontsize=11; // FONT SIZE OF THE NUMBERS. SETTING THIS TOO BIG CAUSES UNDESIRED EFFECTS.
var fontcolor="080080"; // ENTER ANY HTML or RGB COLOR CODE
var fontstyle="bold"; // ENTER EITHER BOLD, ITALICS, NONE
var oncolor="red"; // COLOR OF ACTIVE CELLS
var offcolor="lightgrey"; // COLOR OF INACTIVE CELLS
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var binclk, now;
var t="<table cellspacing="1" cellpadding="0" border="0"><tr><td align="center"> </td>";
for(i=0;i<=58;i+=2)t+="<td align="left" colspan="2"><font style="font-size:"+fontsize+"px; font-weight:"+fontstyle+"; color: "+fontcolor+"">"+i+"<br> |</font></td>";
t+="<td> </td></tr><tr><td align="center"><font style="font-size:"+fontsize+"px; font-weight:"+fontstyle+"; color: "+fontcolor+"">时: </font></td>";
for(i=0;i<=23;i++){
t+="<td>";
t+=(NS4)? "<ilayer name="hrs"+i+"" height=""+cellheight+"" width=""+cellwidth+"" bgcolor=""+offcolor+""></ilayer>" : "<p id="hrs"+i+"" style="position:relative; width:"+cellwidth+"px; font-size:1px; height:"+cellheight+"px; background-color:"+offcolor+""></p>";
t+="</td>";
}
t+="<td colspan="36"><td> </td></tr><tr><td align="center"><font style="font-size:"+fontsize+"px; font-weight:"+fontstyle+"; color: "+fontcolor+"">分: </font></td>";
for(i=0;i<=59;i++){
t+="<td>";
t+=(NS4)? "<ilayer name="min"+i+"" width=""+cellwidth+"" height=""+cellheight+"" bgcolor=""+offcolor+""></ilayer>" : "<p id="min"+i+"" style="position:relative; width:"+cellwidth+"px; font-size:1px; height:"+cellheight+"px; background-color:"+offcolor+""></p>";
t+="</td>";
}
t+="<td> </td></tr><tr><td align="center"><font style="font-size:"+fontsize+"px; font-weight:"+fontstyle+"; color: "+fontcolor+"">秒: </font></td>";
for(i=0;i<=59;i++)
{
t+="<td>";
t+=(NS4)? "<ilayer name="sec"+i+"" width=""+cellwidth+"" height=""+cellheight+"" bgcolor=""+offcolor+""></ilayer>" : "<p id="sec"+i+"" style="position:relative; width:"+cellwidth+"px; font-size:1px; height:"+cellheight+"px; background-color:"+offcolor+""></p>";
t+="</td>";
}
t+="<td> </td></tr><tr><td> </td><td> </td>";
for(i=1;i<=59;i+=2)t+="<td align="left" colspan="2"><font style="font-size:"+fontsize+"px; font-weight:"+fontstyle+"; color: "+fontcolor+""> |<br>"+i+"</font></td>";
t+="</tr></table>";
document.write(t);
function init(){
getvals();
for(i=0;i<=now.h;i++)setbgcolor("hrs"+i, oncolor);
for(i=0;i<=now.m;i++)setbgcolor("min"+i, oncolor);
for(i=0;i<=now.s;i++)setbgcolor("sec"+i, oncolor);
setInterval("setclock()", 100);
}
function getvals(){
now=new Date();
now.s=now.getSeconds();
now.h=now.getHours();
now.m=now.getMinutes();
}
function setclock(){
getvals();
if((now.h==0)&&(now.m==0)) for(i=1;i<=23;i++)setbgcolor("hrs"+i, offcolor);
if((now.s==0)&&(now.m==0)) for (i=1;i<=59;i++)setbgcolor("min"+i, offcolor);
if(now.s==0) for(i=1;i<=59;i++)setbgcolor("sec"+i, offcolor);
setbgcolor("hrs"+now.h, oncolor);
setbgcolor("min"+now.m, oncolor);
setbgcolor("sec"+now.s, oncolor);
}
function resize(){
if(NS4)history.go(0);
}
function setbgcolor(idstr, color){
if(IE4)document.all[idstr].style.backgroundColor=color;
if(NS4)document.layers[idstr].bgColor=color;
if(NS6)document.getElementById(idstr).style.backgroundColor=color;
}
window.onload=init;
window.onresize=resize;
</SCRIPT>

위는 공유해드린 온도계 시간 스타일을 구현한 자바스크립트 코드입니다. 마음에 드셨으면 좋겠습니다.

위 내용은 JavaScript는 시간에 따라 온도계를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!