分享

JavaScript特效千例

 昵称4790664 2010-12-12

脚本说明:

第一步:把如下代码加入区域中:

  <span id=liveclock style=position:absolute;left:250px;top:122px;; width: 109px; height: 15px>

</span>    (这里可以调整时钟的方位。调用脚本时去掉括号中内容)

<SCRIPT language=javascript>

<!--

 

function show5(){if(!document.layers&&!document.all)

return

var Digital=new Date()

var hours=Digital.getHours()

var minutes=Digital.getMinutes()

var seconds=Digital.getSeconds()

var dn="AM"

if(hours>12){dn="PM"

hours=hours-12

}if(hours==0)

hours=12

if(minutes<=9)

minutes="0"+minutes

if(seconds<=9)

seconds="0"+seconds

//change font size here to your desire

myclock="<font size='5' face='Arial'><b><font size='1'>Current Time:</font></br>"+hours+":"+minutes+":"

+seconds+" "+dn+"</b></font>"

if(document.layers){document.layers.liveclock.document.write(myclock)

document.layers.liveclock.document.close()

}else if(document.all)

liveclock.innerHTML=myclock

setTimeout("show5()",1000)

}

//>

</SCRIPT>

 

第二步:把中的内容改为

 

 

 

 

 

倒计时代码生成器

脚本说明:

第一步:把如下代码加入<head>区域中

<SCRIPT language=javascript>

<!--

function generate(form){for(var q=0;q<12;q++){if(document.me.m.options[document.me.m.selectedIndex].value==q){var m2=q+1

}var txt='<!-- 分三步完成全部脚本:\r\n\r\n'

+' 1. 将第一部分粘贴到HTMLHEAD\r\n'

+' 2. OnLoad事件加入BODY标签内\r\n'

+' 3. 将最后一部分代码加入BODY -->\r\n\r\n'

+'<!-- 第一步: 将如下代码粘贴到HTMLHEAD-->\r\n\r\n'

+'<HEAD>\r\n\r\n<SCRIPT LANGUAGE="JavaScript">\r\n\r\n'

+'<!-- Begin\r\n'

+'var Temp2;\n'

+'var timerID = null;\n'

+'var timerRunning = false;\n'

+'function arry() {\n'

+'this.length = 12;\n'

+'this[0] = 31;\n'

+'this[1] = 28;\n'

+'this[2] = 31;\n'

+'this[3] = 30;\n'

+'this[4] = 31;\n'

+'this[5] = 30;\n'

+'this[6] = 31;\n'

+'this[7] = 31;\n'

+'this[8] = 30;\n'

+'this[9] = 31;\n'

+'this[10] = 30;\n'

+'this[11] = 31;\n'

+'}\n'

+'var date = new arry();\n'

+'\n'

+'function stopclock() {\n'

+'if(timerRunning)\n'

+'clearTimeout(timerID);\n'

+'timerRunning = false;\n'

+'}\n'

+'\n'

+'function startclock() {\n'

+'stopclock();\n'

+'showtime();\n'

+'}\n'

+'\n'

+'function showtime() {\n'

+'now = new Date();\n'

+'var CurMonth = now.getMonth();\n'

+'var CurDate = now.getDate();\n'

+'var CurYear = now.getFullYear();\n'

+'now = null;\n'

+'if ('+document.me.d.options[document.me.d.selectedIndex].value+' < CurDate) {\n'

+'CurDate -= date[CurMonth]; CurMonth++;\n'

+'}\n'

+'if ('+document.me.m.options[document.me.m.selectedIndex].value+' < CurMonth) {\n'

+'CurMonth -= 12; CurYear++;\n'

+'}\n'

+'\n'

+'var Yearleft = '+document.me.y.options[document.me.y.selectedIndex].value+' - CurYear;\n'

+'var Monthleft = '+document.me.m.options[document.me.m.selectedIndex].value+' - CurMonth;\n'

+'var Dateleft = '+document.me.d.options[document.me.d.selectedIndex].value+' - CurDate;\n'

+'\n'

+'document.dateform.a.value = Yearleft;\n'

+'document.dateform.b.value = Monthleft;\n'

+'document.dateform.c.value = Dateleft;\n'

+'\n'

+'timerID = setTimeout("showtime()",1000);\n'

+'timerRunning = true;\n'

+'}\n'

+'/\/ End -->\r\n<\/script>\r\n'

+'<\/H'+'EAD>\r\n\r\n'

+'<!-- 第二步:将OnLoad事件加入BODY标签内 -->\r\n\r\n'

+'<BO'+'DY Onload="startclock()">\r\n\r\n'

+'<!-- 第三步:将最后一部分代码加入BODY -->\r\n\r\n'

+'<form name=dateform>距离'

+m2+'/'+document.me.d.options[document.me.d.selectedIndex].value+'/'

+document.me.y.options[document.me.y.selectedIndex].value

+'还有\n'

+'<input type=text name=a size=2 value="">\n'

+'<input type=text name=b size=2 value="">\n'

+'<input type=text name=c size=2 value="">\n'

+'</fo'+'rm>\r\n\r\n'

+'<'+'!-- 代码长度: 1.95 KB --'+'>'

;}document.mail.source.value=txt;document.mail.source2.value=txt;}

//-->

</SCRIPT>

 

 

 

 

第二步:把如下代码加入区域中:

<center>

<table border=5 bordercolor=black borderlight=green>

<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面框中为脚本显示区</strong></font></td></tr>

<tr><td align=center><form name=me> <p><select name=m size=1> <option value=0>January </option> <option value=1>February </option> <option value=2>March </option> <option value=3>April </option> <option value=4>May </option> <option value=5>June </option> <option value=6>July </option> <option value=7>August </option> <option value=8>September </option> <option value=9>October </option> <option value=10>November </option> <option value=11>December </option> </select> <select name=d size=1> <option value=1>1 </option> <option value=2>2 </option> <option value=3>3 </option> <option value=4>4 </option> <option value=5>5 </option> <option value=6>6 </option> <option value=7>7 </option> <option value=8>8 </option> <option value=9>9 </option> <option value=10>10 </option> <option value=11>11 </option> <option value=12>12 </option> <option value=13>13 </option> <option value=14>14 </option> <option value=15>15 </option> <option value=16>16 </option> <option value=17>17 </option> <option value=18>18 </option> <option value=19>19 </option> <option value=20>20 </option> <option value=21>21 </option> <option value=22>22 </option> <option value=23>23 </option> <option value=24>24 </option> <option value=25>25 </option> <option value=26>26 </option> <option value=27>27 </option> <option value=28>28 </option> <option value=29>29 </option> <option value=30>30 </option> <option value=31>31 </option> </select><select name=y size=1> <option value=1999>1999 </option> <option value=2000>2000 </option> <option value=2001>2001 </option> <option value=2002>2002 </option> <option value=2003>2003 </option> <option value=2004>2004 </option> <option value=2005>2005 </option> <option value=2006>2006 </option> <option value=2007>2007 </option> <option value=2008>2008 </option> <option value=2009>2009 </option> </select><br> <input type=button onclick=generate() value=生成代码 class=yk9><input type=button value=返回 onClick=history.go(-1) name=button class=yk9><p></p></form><form name=mail> <input type=hidden name=scriptname value="Countdown Creator"><input type=hidden name=source2 value><table bgcolor=dedfdf border=1 cellpadding=1 width=396> <tr> <td align=center height=218><textarea name=source rows=12 cols=55 class=yk9></textarea><br> <br> </td> <td> </td> </tr> </table></form></td></tr></table>

八种风格的时间日期

脚本说明:

第一步:把如下代码加入<head>区域中

<SCRIPT language=javascript author=luxiaoqing><!--

function initArray(){for(i=0;i<initArray.arguments.length;i++)

this[i]=initArray.arguments[i];}var isnMonths=new initArray("1","2","3","4","5","6","7","8","9","10","11","12");var isnDays=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");today=new Date();hrs=today.getHours();min=today.getMinutes();sec=today.getSeconds();clckh=""+((hrs>12)?hrs-12:hrs);

clckm=((min<10)?"0":"")+min;clcks=((sec<10)?"0":"")+sec;clck=(hrs>=12)?"下午":"上午";var stnr="";var ns="0123456789";var a="";

 

//-->

 

</SCRIPT>

第二步:把如下代码加入区域中

<SCRIPT language=javascript><!--

function getFullYear(d){//d is a date object

yr=d.getYear();if(yr<1000)

yr+=1900;return yr;}document.write("<table width=486>");//don't delete this line

 

/* 每一段代表一种风格,不需要的删除即可*/

 

document.write("<TR><TD VALIGN=TOP><P>风格一<P></TD><TD VALIGN=TOP>"+isnDays[today.getDay()]

+","+isnMonths[today.getMonth()]+""+today.getDate()+","

+getFullYear(today)+"<P>");document.write("<TR><TD VALIGN=TOP>风格二<P></TD><TD VALIGN=TOP>"+clckh+":"+clckm

+":"+clcks+""+clck+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格三<P></TD><TD VALIGN=TOP>"

+isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""

+today.getDate()+","+getFullYear(today)+" "+clckh+":"+clckm+":"

+clcks+""+clck+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格四<P></TD><TD VALIGN=TOP>"

+(today.getMonth()+1)+"/"+today.getDate()+"/"

+(getFullYear(today)+"").substring(2,4)+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格五:<P></TD><TD VALIGN=TOP>"+hrs+":"+clckm+":"+clcks+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格六:<P></TD><TD>"+today+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格七<P></TD><TD>"+navigator.appName+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格八:<P></TD><TD VALIGN=TOP>"+navigator.appVersion+"<P></TD></TR>");document.write("</table>"); // don't delete this line

//-->

 

</SCRIPT>

显示登陆时间

 

脚本说明:

 

把如下代码加入<body>区域中

 

<form name=forms> <font size=3><CENTER><div align=center><p></font><font color=red size=3>您在本站逗留了</font><font color=#80FF80><br> <input type=text name=input1 size=10></font></p></div></center></font><SCRIPT language=javascript><!--

 

 

 

var sec=0;var min=0;var hou=0;flag=0;idt=window.setTimeout("update();",1000);function update(){sec++;if(sec==60){sec=0;min+=1;}if(min==60){min=0;hou+=1;}if((min>0)&&(flag==0)){window.alert("您刚刚来了1分钟!可别急着走开,还有好多好东东等着您呢!--站长");flag=1;}

 

 

 

document.forms.input1.value=hou+""+min+""+sec+"";idt=window.setTimeout("update();",1000);}

 

//-->

 

 

 

</SCRIPT></form>

日历生成器

脚本说明:

第一步:把如下代码加入<head>区域中:

  <SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var dDate = new Date();

var dCurMonth = dDate.getMonth();

var dCurDayOfMonth = dDate.getDate();

var dCurYear = dDate.getFullYear();

var objPrevElement = new Object();

 

function fToggleColor(myElement) {

var toggleColor = "#ff0000";

if (myElement.id == "calDateText") {

if (myElement.color == toggleColor) {

myElement.color = "";

} else {

myElement.color = toggleColor;

   }

} else if (myElement.id == "calCell") {

for (var i in myElement.children) {

if (myElement.children[i].id == "calDateText") {

if (myElement.children[i].color == toggleColor) {

myElement.children[i].color = "";

} else {

myElement.children[i].color = toggleColor;

            }

         }

      }

   }

}

function fSetSelectedDay(myElement){

if (myElement.id == "calCell") {

if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {

myElement.bgColor = "#c0c0c0";

objPrevElement.bgColor = "";

document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);

objPrevElement = myElement;

      }

   }

}

function fGetDaysInMonth(iMonth, iYear) {

var dPrevDate = new Date(iYear, iMonth, 0);

return dPrevDate.getDate();

}

function fBuildCal(iYear, iMonth, iDayStyle) {

var aMonth = new Array();

aMonth[0] = new Array(7);

aMonth[1] = new Array(7);

aMonth[2] = new Array(7);

aMonth[3] = new Array(7);

aMonth[4] = new Array(7);

aMonth[5] = new Array(7);

aMonth[6] = new Array(7);

var dCalDate = new Date(iYear, iMonth-1, 1);

var iDayOfFirst = dCalDate.getDay();

var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);

var iVarDate = 1;

var i, d, w;

if (iDayStyle == 2) {

aMonth[0][0] = "Sunday";

aMonth[0][1] = "Monday";

aMonth[0][2] = "Tuesday";

aMonth[0][3] = "Wednesday";

aMonth[0][4] = "Thursday";

aMonth[0][5] = "Friday";

aMonth[0][6] = "Saturday";

} else if (iDayStyle == 1) {

aMonth[0][0] = "Sun";

aMonth[0][1] = "Mon";

aMonth[0][2] = "Tue";

aMonth[0][3] = "Wed";

aMonth[0][4] = "Thu";

aMonth[0][5] = "Fri";

aMonth[0][6] = "Sat";

} else {

aMonth[0][0] = "Su";

aMonth[0][1] = "Mo";

aMonth[0][2] = "Tu";

aMonth[0][3] = "We";

aMonth[0][4] = "Th";

aMonth[0][5] = "Fr";

aMonth[0][6] = "Sa";

}

for (d = iDayOfFirst; d < 7; d++) {

aMonth[1][d] = iVarDate;

iVarDate++;

}

for (w = 2; w < 7; w++) {

for (d = 0; d < 7; d++) {

if (iVarDate <= iDaysInMonth) {

aMonth[w][d] = iVarDate;

iVarDate++;

      }

   }

}

return aMonth;

}

function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {

var myMonth;

myMonth = fBuildCal(iYear, iMonth, iDayStyle);

document.write("<table border='1'>")

document.write("<tr>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");

document.write("</tr>");

for (w = 1; w < 7; w++) {

document.write("<tr>")

for (d = 0; d < 7; d++) {

document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>");

if (!isNaN(myMonth[w][d])) {

document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");

} else {

document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)> </font>");

}

document.write("</td>")

}

document.write("</tr>");

}

document.write("</table>")

}

function fUpdateCal(iYear, iMonth) {

myMonth = fBuildCal(iYear, iMonth);

objPrevElement.bgColor = "";

document.all.calSelectedDate.value = "";

for (w = 1; w < 7; w++) {

for (d = 0; d < 7; d++) {

if (!isNaN(myMonth[w][d])) {

calDateText[((7*w)+d)-7].innerText = myMonth[w][d];

} else {

calDateText[((7*w)+d)-7].innerText = " ";

         }

      }

   }

}

// End -->

</script>

 

第二步:把如下代码加入<body>区域中:

<script language="JavaScript" for=window event=onload>

<!-- Begin

var dCurDate = new Date();

frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;

for (i = 0; i < frmCalendarSample.tbSelYear.length; i++)

if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())

frmCalendarSample.tbSelYear.options[i].selected = true;

//  End -->

</script>

 

<form name="frmCalendarSample" method="post" action="">

<input type="hidden" name="calSelectedDate" value="">

 

<table border="1">

<tr>

<td>

<select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>

<option value="1">January</option>

<option value="2">February</option>

<option value="3">March</option>

<option value="4">April</option>

<option value="5">May</option>

<option value="6">June</option>

<option value="7">July</option>

<option value="8">August</option>

<option value="9">September</option>

<option value="10">October</option>

<option value="11">November</option>

<option value="12">December</option>

</select>

 

<select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>

<option value="1998">1998</option>

<option value="1999">1999</option>

<option value="2000">2000</option>

<option value="2001">2001</option>

<option value="2002">2002</option>

<option value="2003">2003</option>

<option value="2004">2004</option>

</select>

</td>

</tr>

<tr>

<td>

<script language="JavaScript">

var dCurDate = new Date();

fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);

</script>

</td>

</tr>

</table>

</form>

退出时显示访问时间

脚本说明:

第一步:把如下代码加入<body>区域中

<SCRIPT LANGUAGE="Javascript">

<!-- Begin

pageOpen = new Date();

 

function bye() {

pageClose = new Date();

minutes = (pageClose.getMinutes() - pageOpen.getMinutes());

seconds = (pageClose.getSeconds() - pageOpen.getSeconds());

time = (seconds + (minutes * 60));

if (time == 1) {

time = (time + " second");

}

else {

time = (time + " seconds");

   }

alert('您在这儿呆了' + time + '.欢迎再来!');

}

// End -->

</SCRIPT>

 

 

第二步:把<body>区域改为

<body  onUnload="bye()">

全中文日期显示

 

脚本说明:

把如下代码加入<body>区域中:

<script language="JavaScript">

function number(index1){

var numberstring="一二三四五六七八九十";

  if(index1 ==0) {document.write("")}

  if(index1 < 10){

    document.write(numberstring.substring(0+(index1-1),index1))}

  else if(index1 < 20 ){

    document.write(""+numberstring.substring(0+(index1-11),(index1-10)))}

  else if(index1 < 30 ){

    document.write("二十"+numberstring.substring(0+(index1-21),(index1-20)))}

  else{

    document.write("三十"+numberstring.substring(0+(index1-31),(index1-30)))}

  }

 

var today1 = new Date()

var month = today1.getMonth()+1

var date = today1.getDate()

var day = today1.getDay()

 

document.write("公元二零零零年")

number(month)

document.write("")

number(date)

document.write("")

</script>

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多