js實(shí)現(xiàn)溫度計(jì)時(shí)間樣式代碼分享
這是一款基于js實(shí)現(xiàn)溫度計(jì)時(shí)間樣式代碼,與我們見(jiàn)過(guò)的日期顯示都不一樣,很有創(chuàng)意,分享給大家學(xué)習(xí)學(xué)習(xí)
運(yùn)行效果圖:----------------------查看效果-----------------------
小提示:瀏覽器中如果不能正常運(yùn)行,可以嘗試切換瀏覽模式。
為大家分享的javascript實(shí)現(xiàn)溫度計(jì)時(shí)間樣式代碼如下
<title> 溫度計(jì)式樣的時(shí)間 </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+'">時(shí): </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>
以上就是為大家分享的javascript實(shí)現(xiàn)溫度計(jì)時(shí)間樣式代碼,希望大家可以喜歡。
相關(guān)文章
JavaScript實(shí)現(xiàn)京東購(gòu)物放大鏡和選項(xiàng)卡效果的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)京東購(gòu)物放大鏡和選項(xiàng)卡效果的方法,結(jié)合實(shí)例形式分析了javascript基于事件響應(yīng)、數(shù)值計(jì)算與頁(yè)面元素動(dòng)態(tài)修改實(shí)現(xiàn)圖片放大功能以及tab選項(xiàng)卡切換效果相關(guān)操作技巧,需要的朋友可以參考下2018-07-07JavaScript實(shí)現(xiàn)簡(jiǎn)單打地鼠游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單打地鼠游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10input鏈接頁(yè)面、打開(kāi)新網(wǎng)頁(yè)等等的具體實(shí)現(xiàn)
input可以鏈接到某頁(yè)、返回、打開(kāi)新網(wǎng)頁(yè)、打開(kāi)無(wú)邊框的新窗口等等,本文整理了一些,感興趣的朋友可以參考下2013-12-12巧妙解決Layui.table組件分頁(yè)問(wèn)題示例
這篇文章主要為大家介紹了巧妙解決Layui.table組件分頁(yè)問(wèn)題方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09