位置：首页>> 网络编程>> JavaScript>> 13个超酷的js显示时间效果（4）

13个超酷的js显示时间效果（4）

　来源：蓝色理想　发布时间：2007-08-30 09:52:00　

标签：js,时间

带倒影的时钟

效果图：

<title> 带有倒影的时间 - asp之家 - http://www.aspxhome.com</title><html><head><style type="text/css"></style><style type="text/css"></style></head><script Language="JavaScript"></script><body onLoad="init()"><div align="center" Id="tim1" Style="position:absolute; width:10; height:10; top:10; left:50"class="time"></div><div Id="tim2"Style="position:absolute; filter:flipv() alpha(opacity=20); font-style:italic"class="time"></div></body><script Language="JavaScript"> </script></html> <div id="Layer551" style="position:absolute; left:585px; top:6px; width:200px; height:52px; z-index:1">

农历时间显示，好

运行效果图：

<title>农历时间显示 - asp之家 - http://www.aspxhome.com</title><script language="JavaScript">var bsYear;var bsDate;var bsWeek;var arrLen=8; //数组长度var sValue=0; //当年的秒数var dayiy=0; //当年第几天var miy=0; //月份的下标var iyear=0; //年份标记var dayim=0; //当月第几天var spd=86400; //每天的秒数var year1999="30;29;29;30;29;29;30;29;30;30;30;29"; //354var year2000="30;30;29;29;30;29;29;30;29;30;30;29"; //354var year2001="30;30;29;30;29;30;29;29;30;29;30;29;30"; //384var year2002="30;30;29;30;29;30;29;29;30;29;30;29"; //354var year2003="30;30;29;30;30;29;30;29;29;30;29;30"; //355var year2004="29;30;29;30;30;29;30;29;30;29;30;29;30"; //384var year2005="29;30;29;30;29;30;30;29;30;29;30;29"; //354var year2006="30;29;30;29;30;30;29;29;30;30;29;29;30";var month1999="正月;二月;三月;四月;五月;六月;七月;八月;九月;十月;十一月;十二月"var month2001="正月;二月;三月;四月;闰四月;五月;六月;七月;八月;九月;十月;十一月;十二月"var month2004="正月;二月;闰二月;三月;四月;五月;六月;七月;八月;九月;十月;十一月;十二月"var month2006="正月;二月;三月;四月;五月;六月;七月;闰七月;八月;九月;十月;十一月;十二月"var Dn="初一;初二;初三;初四;初五;初六;初七;初八;初九;初十;十一;十二;十三;十四;十五;十六;十七;十八;十九;二十;廿一;廿二;廿三;廿四;廿五;廿六;廿七;廿八;廿九;三十";var Ys=new Array(arrLen);Ys[0]=919094400;Ys[1]=949680000;Ys[2]=980265600;Ys[3]=1013443200;Ys[4]=1044028800;Ys[5]=1074700800;Ys[6]=1107878400;Ys[7]=1138464000;var Yn=new Array(arrLen); //农历年的名称Yn[0]="己卯年";Yn[1]="庚辰年";Yn[2]="辛巳年";Yn[3]="壬午年";Yn[4]="癸未年";Yn[5]="甲申年";Yn[6]="乙酉年";Yn[7]="丙戌年";var D=new Date();var yy=D.getYear();var mm=D.getMonth()+1;var dd=D.getDate();var ww=D.getDay();if (ww==0) ww="<font color=RED>星期日</font>";if (ww==1) ww="星期一";if (ww==2) ww="星期二";if (ww==3) ww="星期三";if (ww==4) ww="星期四";if (ww==5) ww="星期五";if (ww==6) ww="<font color=green>星期六</font>";ww=ww;var ss=parseInt(D.getTime() / 1000);if (yy<100) yy="19"+yy;for (i=0;i<arrLen;i++)if (ss>=Ys[i]){iyear=i;sValue=ss-Ys[i]; //当年的秒数}dayiy=parseInt(sValue/spd)+1; //当年的天数var dpm=year1999;if (iyear==1) dpm=year2000;if (iyear==2) dpm=year2001;if (iyear==3) dpm=year2002;if (iyear==4) dpm=year2003;if (iyear==5) dpm=year2004;if (iyear==6) dpm=year2005;if (iyear==7) dpm=year2006;dpm=dpm.split(";");var Mn=month1999;if (iyear==2) Mn=month2001;if (iyear==5) Mn=month2004;if (iyear==7) Mn=month2006;Mn=Mn.split(";");var Dn="初一;初二;初三;初四;初五;初六;初七;初八;初九;初十;十一;十二;十三;十四;十五;十六;十七;十八;十九;二十;廿一;廿二;廿三;廿四;廿五;廿六;廿七;廿八;廿九;三十";Dn=Dn.split(";");dayim=dayiy;var total=new Array(13);total[0]=parseInt(dpm[0]);for (i=1;i<dpm.length-1;i++) total[i]=parseInt(dpm[i])+total[i-1];for (i=dpm.length-1;i>0;i--)if (dayim>total[i-1]){dayim=dayim-total[i-1];miy=i;}bsWeek=ww;bsDate=yy+"年"+mm+"月";bsDate2=dd;bsYear="农历"+Yn[iyear];bsYear2=Mn[miy]+Dn[dayim-1];if (ss>=Ys[7]||ss<Ys[0]) bsYear=Yn[7];function time(){document.write("<table border='0' style='font-size: 8pt; font-family:Tahoma' cellspacing='0' width='90' bordercolor='#cccccc' height='110' cellpadding='0'");document.write("<tr><td align='center' style='border: 1 solid #0099ff;padding-top:4px'><b><font color=#3366cc>"+bsDate+"</font><br><span style='font-family: Arial Black;font-size:18pt;color:#FF0000'>"+bsDate2+"</span><br><br><span style='FONT-SIZE: 10.5pt;color:#000000'>");document.write(bsWeek+"</span><br>"+"<hr width='60' ></b><font color=#666666>");document.write(bsYear+"<br>"+bsYear2+"</td></tr></table>");}</script><script>time()</script>

超强！温度计式样时间

运行效果图：

<title> 温度计式样的时间 - asp之家 - http://www.aspxhome.com</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 CELLSvar 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>

<title>日历 - asp之家 - http://www.aspxhome.com</title><style type="text/css">body { background-color: #D4D0C8;}.m_fieldset { padding: 0,10,5,10; text-align: center; width: 150px;}.m_legend { font-family: Tahoma; font-size: 11px; padding-bottom: 5px;}.m_frameborder { border-left: 2px inset #D4D0C8; border-top: 2px inset #D4D0C8; border-right: 2px inset #FFFFFF; border-bottom: 2px inset #FFFFFF; width: 100px; height: 19px; background-color: #FFFFFF; overflow: hidden; text-align: right; font-family: "Tahoma"; font-size: 10px;}.m_arrow { width: 16px; height: 8px; font-family: "Webdings"; font-size: 7px; line-height: 2px; padding-left: 2px; cursor: default;}.m_input { width: 18px; height: 14px; border: 0px solid black; font-family: "Tahoma"; font-size: 9px; text-align: right; ime-mode:disabled;}</style><script language="javascript">// Written by cloudchen, 2004/03/15function minute(name,fName){ this.name = name; this.fName = fName || "m_input"; this.timer = null; this.fObj = null; this.toString = function() { var objDate = new Date(); var sMinute_Common = "class=\"m_input\" maxlength=\"2\" name=\""+this.fName+"\" onfocus=\""+this.name+".setFocusObj(this)\" onblur=\""+this.name+".setTime(this)\" onkeyup=\""+this.name+".prevent(this)\" onkeypress=\"if (!/[0-9]/.test(String.fromCharCode(event.keyCode)))event.keyCode=0\" onpaste=\"return false\" ondragenter=\"return false\""; var sButton_Common = "class=\"m_arrow\" onfocus=\"this.blur()\" onmouseup=\""+this.name+".controlTime()\" disabled" var str = ""; str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">" str += "<tr>" str += "<td>" str += "<div class=\"m_frameborder\">" str += "<input radix=\"24\" value=\""+this.formatTime(objDate.getHours())+"\" "+sMinute_Common+">:" str += "<input radix=\"60\" value=\""+this.formatTime(objDate.getMinutes())+"\" "+sMinute_Common+">:" str += "<input radix=\"60\" value=\""+this.formatTime(objDate.getSeconds())+"\" "+sMinute_Common+">" str += "</div>" str += "</td>" str += "<td>" str += "<table border=\"0\" cellspacing=\"2\" cellpadding=\"0\">" str += "<tr><td><button id=\""+this.fName+"_up\" "+sButton_Common+">5</button></td></tr>" str += "<tr><td><button id=\""+this.fName+"_down\" "+sButton_Common+">6</button></td></tr>" str += "</table>" str += "</td>" str += "</tr>" str += "</table>" return str; } this.play = function() { this.timer = setInterval(this.name+".playback()",1000); } this.formatTime = function(sTime) { sTime = ("0"+sTime); return sTime.substr(sTime.length-2); } this.playback = function() { var objDate = new Date(); var arrDate = [objDate.getHours(),objDate.getMinutes(),objDate.getSeconds()]; var objMinute = document.getElementsByName(this.fName); for (var i=0;i<objMinute.length;i++) { objMinute[i].value = this.formatTime(arrDate[i]) } } this.prevent = function(obj) { clearInterval(this.timer); this.setFocusObj(obj); var value = parseInt(obj.value,10); var radix = parseInt(obj.radix,10)-1; if (obj.value>radix||obj.value<0) { obj.value = obj.value.substr(0,1); } } this.controlTime = function(cmd) { event.cancelBubble = true; if (!this.fObj) return; clearInterval(this.timer); var cmd = event.srcElement.innerText=="5"?true:false; var i = parseInt(this.fObj.value,10); var radix = parseInt(this.fObj.radix,10)-1; if (i==radix&&cmd) { i = 0; } else if (i==0&&!cmd) { i = radix; } else { cmd?i++:i--; } this.fObj.value = this.formatTime(i); this.fObj.select(); } this.setTime = function(obj) { obj.value = this.formatTime(obj.value); } this.setFocusObj = function(obj) { eval(this.fName+"_up").disabled = eval(this.fName+"_down").disabled = false; this.fObj = obj; } this.getTime = function() { var arrTime = new Array(2); for (var i=0;i<document.getElementsByName(this.fName).length;i++) { arrTime[i] = document.getElementsByName(this.fName)[i].value; } return arrTime.join(":"); }}</script><style type="text/css">body { background-color: #D4D0C8;}.c_fieldset { padding: 0,10,5,10; text-align: center; width: 180px;}.c_legend { font-family: Tahoma; font-size: 11px; padding-bottom: 5px;}.c_frameborder { border-left: 2px inset #D4D0C8; border-top: 2px inset #D4D0C8; border-right: 2px inset #FFFFFF; border-bottom: 2px inset #FFFFFF; background-color: #FFFFFF; overflow: hidden; font-family: "Tahoma"; font-size: 10px; width:160px; height:120px;}.c_frameborder td { width: 23px; height: 16px; font-family: "Tahoma"; font-size: 11px; text-align: center; cursor: default;}.c_frameborder .selected { background-color:#0A246A; width:12px; height:12px; color:white;}.c_frameborder span { width:12px; height:12px;}.c_arrow { width: 16px; height: 8px; font-family: "Webdings"; font-size: 7px; line-height: 2px; padding-left: 2px; cursor: default;}.c_year { font-family: "Tahoma"; font-size: 11px; cursor: default; width:55px; height:19px;}.c_month { width:75px; height:20px; font:11px "Tahoma";}.c_dateHead { background-color:#808080; color:#D4D0C8;}</style><script language="javascript">// Written by cloudchen, 2004/03/16function calendar(name,fName){ this.name = name; this.fName = fName || "calendar"; this.year = new Date().getFullYear(); this.month = new Date().getMonth(); this.date = new Date().getDate(); //private this.toString = function() { var str = ""; str += "<table border=\"0\" cellspacing=\"3\" cellpadding=\"0\" onselectstart=\"return false\">"; str += "<tr>"; str += "<td>"; str += this.drawMonth(); str += "</td>"; str += "<td align=\"right\">"; str += this.drawYear(); str += "</td>"; str += "</tr>"; str += "<tr>"; str += "<td colspan=\"2\">"; str += "<div class=\"c_frameborder\">"; str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"c_dateHead\">"; str += "<tr>"; str += "<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>"; str += "</tr>"; str += "</table>"; str += this.drawDate(); str += "</div>"; str += "</td>"; str += "</tr>"; str += "</table>"; return str; } //private this.drawYear = function() { var str = ""; str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"; str += "<tr>"; str += "<td>"; str += "<input class=\"c_year\" maxlength=\"4\" value=\""+this.year+"\" name=\""+this.fName+"\" id=\""+this.fName+"_year\" readonly>"; //DateField str += "<input type=\"hidden\" name=\""+this.fName+"\" value=\""+this.date+"\" id=\""+this.fName+"_date\">"; str += "</td>"; str += "<td>"; str += "<table cellspacing=\"2\" cellpadding=\"0\" border=\"0\">"; str += "<tr>"; str += "<td><button class=\"c_arrow\" onfocus=\"this.blur()\" onclick=\"event.cancelBubble=true;document.getElementById('"+this.fName+"_year').value++;"+this.name+".redrawDate()\">5</button></td>"; str += "</tr>"; str += "<tr>"; str += "<td><button class=\"c_arrow\" onfocus=\"this.blur()\" onclick=\"event.cancelBubble=true;document.getElementById('"+this.fName+"_year').value--;"+this.name+".redrawDate()\">6</button></td>"; str += "</tr>"; str += "</table>"; str += "</td>"; str += "</tr>"; str += "</table>"; return str; } //priavate this.drawMonth = function() { var aMonthName = ["一","二","三","四","五","六","七","八","九","十","十一","十二"]; var str = ""; str += "<select class=\"c_month\" name=\""+this.fName+"\" id=\""+this.fName+"_month\" onchange=\""+this.name+".redrawDate()\">"; for (var i=0;i<aMonthName.length;i++) { str += "<option value=\""+(i+1)+"\" "+(i==this.month?"selected":"")+">"+aMonthName[i]+"月</option>"; } str += "</select>"; return str; } //private this.drawDate = function() { var str = ""; var fDay = new Date(this.year,this.month,1).getDay(); var fDate = 1-fDay; var lDay = new Date(this.year,this.month+1,0).getDay(); var lDate = new Date(this.year,this.month+1,0).getDate(); str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" id=\""+this.fName+"_dateTable"+"\">"; for (var i=1,j=fDate;i<7;i++) { str += "<tr>"; for (var k=0;k<7;k++) { str += "<td><span"+(j==this.date?" class=\"selected\"":"")+" onclick=\""+this.name+".redrawDate(this.innerText)\">"+(isDate(j++))+"</span></td>"; } str += "</tr>"; } str += "</table>"; return str; function isDate(n) { return (n>=1&&n<=lDate)?n:""; } } //public this.redrawDate = function(d) { this.year = document.getElementById(this.fName+"_year").value; this.month = document.getElementById(this.fName+"_month").value-1; this.date = d || this.date; document.getElementById(this.fName+"_year").value = this.year; document.getElementById(this.fName+"_month").selectedIndex = this.month; document.getElementById(this.fName+"_date").value = this.date; if (this.date>new Date(this.year,this.month+1,0).getDate()) this.date = new Date(this.year,this.month+1,0).getDate(); document.getElementById(this.fName+"_dateTable").outerHTML = this.drawDate(); } //public this.getDate = function(delimiter) { if (!delimiter) delimiter = "/"; var aValue = [this.year,(this.month+1),this.date]; return aValue.join(delimiter); }}</script><table border="0"><tr><td><fieldset class="c_fieldset"><legend class="c_legend">日期(T)</legend><script>var c = new calendar("c");document.write(c);</script></fieldset></td><td valign="top"><fieldset class="m_fieldset"><legend class="m_legend">时间(T)</legend><script>var m = new minute("m");m.play();document.write(m);</script></fieldset></td></tr><tr><td colspan="2"><button onclick="alert(c.getDate())" style="font:8px Webdings;width:15px;height:15px;line-height:6px;">4</button><button style="font:10px Arial;height:15px;height:16px;border:0px;" onfocus="this.blur()">GetDate</button><button onclick="alert(m.getTime())" style="font:8px Webdings;width:15px;height:15px;line-height:6px;">4</button><button style="font:10px Arial;height:15px;height:16px;border:0px;" onfocus="this.blur()">GetTime</button></td></tr></table>

截图：asp之家

第一页上一页 1 2 3

投稿

13个超酷的js显示时间效果（4）

猜你喜欢