首页 >> JavaScript >> Js脚本特效 >> 13个超酷的js显示时间效果（4）

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

来源:蓝色理想时间:2007-8-30 网友评论条【大中小】

带倒影的时钟

效果图：

<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"; //354 var year2000="30;30;29;29;30;29;29;30;29;30;30;29"; //354 var year2001="30;30;29;30;29;30;29;29;30;29;30;29;30"; //384 var year2002="30;30;29;30;29;30;29;29;30;29;30;29"; //354 var year2003="30;30;29;30;30;29;30;29;29;30;29;30"; //355 var year2004="29;30;29;30;30;29;30;29;30;29;30;29;30"; //384 var year2005="29;30;29;30;29;30;30;29;30;29;30;29"; //354 var 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 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>' : '<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/15 function 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/16 function 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 34

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/javascript/jsmagic/20078/150130_3.htm

站长工具

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

首页 - 关于站点 - 联系站长 - 免责声明 - 版权隐私 - 网站地图 - 友情链接 - 广告服务 - Top

闽ICP备06017341号

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

Aspxhome.com. 中国Asp之家. 版权所有