温度计式的时间进度(前端样式)

来源：互联网发布：下载word2010软件编辑：程序博客网时间：2024/04/30 13:57
<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 Cancas温度计样式特效</title><link rel="stylesheet" type="text/css" href="css/normalize.css" /><link rel="stylesheet" type="text/css" href="css/default.css"></head><body><title>  温度计式样的时间  </title><SCRIPT  language=javascript>var  cellwidth=10;          //  EACH  "CELL"  WIDTH  IN  PIXELSvar  cellheight=10;           //  EACH  "CELL"  HEIGHT  IN  PIXELSvar  fontsize=11;           //  FONT  SIZE  OF  THE  NUMBERS.  SETTING  THIS  TOO  BIG  CAUSES  UNDESIRED  EFFECTS.var  fontcolor="080080";     //  ENTER  ANY  HTML  OR  RGB  COLOR  CODEvar  fontstyle="bold";       //  ENTER  EITHER  BOLD,  ITALICS,  NONEvar  oncolor="red";          //  COLOR  OF  ACTIVE  CELLSvar  offcolor="lightgrey";//  COLOR  OF  INACTIVE  CELLS//more javascript http://www.alixixi.comvar  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>'  :  '<div  id="hrs'+i+'"  style="position:relative;  width:'+cellwidth+'px;  font-size:1px;  height:'+cellheight+'px;  background-color:'+offcolor+'"></div>';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>'  :  '<div  id="min'+i+'"  style="position:relative;  width:'+cellwidth+'px;  font-size:1px;  height:'+cellheight+'px;  background-color:'+offcolor+'"></div>';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>'  :  '<div  id="sec'+i+'"  style="position:relative;  width:'+cellwidth+'px;  font-size:1px;  height:'+cellheight+'px;  background-color:'+offcolor+'"></div>';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><a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a></body></html>
阅读全文
0 0