JavaScript implémente un thermomètre avec le temps

Il s'agit d'un code de style d'heure de thermomètre basé sur js. Il est différent de l'affichage de la date que nous avons vu. Il est très créatif. J'aimerais le partager avec tout le monde pour apprendre

<.>Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation. Le code javascript pour implémenter le style d'heure du thermomètre partagé avec vous est le suivant

<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>

Ce ci-dessus est le code javascript pour implémenter le style d'heure du thermomètre partagé avec vous. J'espère qu'il vous plaira.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!