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

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

带倒影的时钟

效果图：

<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

标签：js,时间

投稿

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

猜你喜欢

行转列之SQL SERVER PIVOT与用法详解

golang 函数以及函数和方法的详解及区别

oracle 常见等待事件及处理方法

Python函数中的可变长参数详解

Python数据挖掘Pandas详解

onmousewheel event 缩放图片效果

golang之JWT实现的示例代码

keras绘制acc和loss曲线图实例

javascript 缓冲效果实现代码推荐

Go语言的Channel遍历方法详解

SQLServer2005 没有服务器名称的两种解决方法

PHP基于非递归算法实现先序、中序及后序遍历二叉树操作示例

pygame游戏之旅添加碰撞效果的方法

sqlserver 2000 远程连接服务器的解决方案

jquery ajax 局部无刷新更新数据的实现案例

python实习总结(yeild,async,azwait和协程)

javascript面向对象技术基础(二)

Instr函数与InstrRev函数的区别

python使用正则表达式提取网页URL的方法

SQL Server中数据行批量插入脚本的存储实现

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

猜你喜欢

行转列之SQL SERVER PIVOT与用法详解

golang 函数以及函数和方法的详解及区别

oracle 常见等待事件及处理方法

Python函数中的可变长参数详解

Python数据挖掘Pandas详解

onmousewheel event 缩放图片效果

golang之JWT实现的示例代码

keras绘制acc和loss曲线图实例

javascript 缓冲效果实现代码 推荐

Go语言的Channel遍历方法详解

SQLServer2005 没有服务器名称的两种解决方法

PHP基于非递归算法实现先序、中序及后序遍历二叉树操作示例

pygame游戏之旅 添加碰撞效果的方法

sqlserver 2000 远程连接 服务器的解决方案

jquery ajax 局部无刷新更新数据的实现案例

python实习总结(yeild,async,azwait和协程)

javascript面向对象技术基础(二)

Instr函数与InstrRev函数的区别

python使用正则表达式提取网页URL的方法

SQL Server中数据行批量插入脚本的存储实现

javascript 缓冲效果实现代码推荐

pygame游戏之旅添加碰撞效果的方法

sqlserver 2000 远程连接服务器的解决方案