网页设计课程----------------javascript特效举例

你的名字 2022-08-24 00:51 191阅读 0赞

<table> 
 <tbody> 
 <tr> 
 <td></td> 
 <td style="FONT-SIZE: 7pt"> 
 <table> 
 <tbody> 
 <tr> 
 <td colspan="3"></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td align="middle"></td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td colspan="3"></td> 
 </tr> 
 </tbody> 
 </table></td> 
 <td></td> 
 <td align="middle"> 一 、日期星期的显示: &nbsp; 下面这段程序放在&lt;body&gt;与&lt;/body&gt;之间 &lt;SCRIPT language=javascript&gt; &lt;!-- todayDate = new Date(); date = todayDate.getDate(); month= todayDate.getMonth() +1; year= todayDate.getYear(); document.write("今天是") document.write("&lt;br&gt;") if(navigator.appName == "Netscape") { &nbsp;document.write(1900+year); &nbsp;document.write("年"); &nbsp;document.write(month); &nbsp;document.write("月"); &nbsp;document.write(date); &nbsp;document.write("日"); &nbsp;document.write("&lt;br&gt;") } if(navigator.appVersion.indexOf("MSIE") != -1) { document.write(year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日"); document.write("&lt;br&gt;")&nbsp; //表示换行 } if (todayDate.getDay() == 5) document.write("星期五") if (todayDate.getDay() == 6) document.write("星期六") if (todayDate.getDay() == 0) document.write("星期日") if (todayDate.getDay() == 1) document.write("星期一") if (todayDate.getDay() == 2) document.write("星期二") if (todayDate.getDay() == 3) document.write("星期三") if (todayDate.getDay() == 4) document.write("星期四") //--&gt; &lt;/SCRIPT&gt; &nbsp; 源程序讲解：更多请参考：<a href="http://www.hongen.com/pc/index.htm" rel="nofollow">http://www.hongen.com/pc/index.htm</a> 
 <table> 
 <tbody> 
 <tr> 
 <td>todayDate = new Date(); </td> 
 <td>当定义一个新的对象时，通常使用“new”操作符。在这里，就是创建了日期对象。</td> 
 </tr> 
 <tr> 
 <td>date = todayDate.getDate(); </td> 
 <td>getDate()是Date对象的一种方法，其功能是获得当前的日期。</td> 
 </tr> 
 <tr> 
 <td>month= todayDate.getMonth() + 1 ; ; </td> 
 <td>getMonth()是Date对象的一种方法，其功能是获得当前的日期，由于月份是从0开始的，所以这里要“+1”。</td> 
 </tr> 
 <tr> 
 <td>year= todayDate.getYear()</td> 
 <td>getYear()是Date对象的一种方法，其功能是获得当前的年份。</td> 
 </tr> 
 <tr> 
 <td>document.write("今天是") document.write("&lt;br&gt;")</td> 
 <td>输出“今天是”</td> 
 </tr> 
 <tr> 
 <td>if(navigator.appName == "Netscape") { document.write(1900+year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日"); document.write("&lt;br&gt; ") } </td> 
 <td>如果浏览器是Netscape，输出今天是“year”+“年”+“month”+“月”+“date”+“日”，其中年要加1900。</td> 
 </tr> 
 <tr> 
 <td>if(navigator.appVersion.indexOf("MSIE") != -1) { document.write(year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日"); document.write("&lt;br&gt; ") }</td> 
 <td>如果浏览器是IE，直接输出今天是“year”+“年”+“month”+“月”+“date”+“日”。</td> 
 </tr> 
 <tr> 
 <td>document.write("") ；</td> 
 <td>在“日期”与“星期”之间输入一个空格。</td> 
 </tr> 
 <tr> 
 <td>if (todayDate.getDay() == 5) document.write("星期五")； if (todayDate.getDay() == 6) document.write("星期六")； if (todayDate.getDay() == 0) document.write("星期日")； if (todayDate.getDay() == 1) document.write("星期一")； if (todayDate.getDay() == 2) document.write("星期二")； if (todayDate.getDay() == 3) document.write("星期三")； if (todayDate.getDay() == 4) document.write("星期四")</td> 
 <td>getDay()是Date对象的一种方法，其功能是获得当前是星期几。document.write输出今天是“星期几”。</td> 
 </tr> 
 </tbody> 
 </table> &nbsp; 二、表单验证代码： &nbsp; &lt;form&nbsp;&nbsp; name="form1"&nbsp; &nbsp;method="post"&nbsp;&nbsp; action=""&nbsp; onSubmit="javascript: return CheckForm();"&gt; &nbsp;&lt;script language="javascript"&gt; &nbsp;function CheckForm(){ if(document.form1.name.value=="")&nbsp;&nbsp;&nbsp; //测试姓名是否为空 &nbsp; { &nbsp;&nbsp;&nbsp; alert("请输入姓名！");&nbsp; //弹出警告提示框 &nbsp;document.form1.name.focus();&nbsp; //将光标定位到该文本框中 &nbsp;&nbsp;&nbsp; return false; &nbsp; } if(document.form1.key1.value=="")&nbsp;&nbsp;&nbsp; //测试密码是否为空 &nbsp; { &nbsp;&nbsp;&nbsp; alert("请输入密码！"); &nbsp;document.form1.key1.focus(); &nbsp;&nbsp;&nbsp; return false; &nbsp; } &nbsp; if((form1.key2.value=="" )|(form1.key1.value!=form1.key2.value))&nbsp; //测试两次密码输入是否一致 { alert("您两次输入的密码不一样！请重新输入."); form1.password1.focus(); return false; } return true; } &nbsp; function cr(){ //捕获触发事件的对象，并设置为以下语句的默认对象 //当前事件的源，也就是用它可以获得正在触发事件的对像 //就像document.getElementById(”")这样的功能，例如(event.srcElement.styl.borderColor="Red";) with(event.srcElement) //如果当前值为默认值，则清空 if(value==defaultValue) value="" } &nbsp;&lt;/script&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width="11%"&gt;用户名：&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width="23%"&gt;&lt;label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input name="name" type="text" id="name" size="15" value="填写您的用户名"&nbsp; onFocus="cr()" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width="8%"&gt;密码：&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width="24%"&gt;&lt;input name="key1"&nbsp; type="text" id="key1" size="15"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width="8%"&gt;确认密码：&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width="24%"&gt;&lt;input name="key2"&nbsp; type="text" id="key2" size="15"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td width="34%"&gt;&lt;label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="submit" name="Submit" value="提交"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="reset" name="Submit2" value="重置"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/table&gt; &nbsp; &nbsp; &lt;/form&gt; &nbsp; 三、教材p196页代码： &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title&gt;教材p196页代码&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &nbsp; &lt;script language="JavaScript"&gt; &lt;!-- var date=new Date(); var year=date.getYear(); var month=date.getMonth(); var day=date.getDate(); document.write("电脑艺术商城二周岁生日是2008年12月27日","&lt;br&gt;&lt;br&gt;今天是","&lt;font color=FF0000&gt;&lt;strong&gt;",year,"年",month+1,"月",day,"日&lt;/strong&gt;&lt;/font&gt;") //--&gt; var urodz=new Date("12/27/2008"); var now=new Date(); var ile=urodz.getTime()-now.getTime(); var dni=Math.floor(ile/(1000*60*60*24)); if(dni&gt;1) document.write("飞翔手机商城二周岁生日还有&lt;font color=FF0000&gt;&lt;strong&gt;",dni,"&lt;/strong&gt;&lt;/font&gt;天！为感谢广大支持我们的用户，在此特举办抽奖送礼活动，欢迎参加！") else if(dni==1) document.write("&nbsp;&nbsp;&nbsp; 只有2天啦!") else if(dni==0) document.write("&nbsp;&nbsp;&nbsp;&nbsp; 只有1天啦!") else if(dni==-1) document.write("&nbsp;&nbsp;&nbsp; 祝飞翔生日快乐!") else document.write("&nbsp;&nbsp;&nbsp;&nbsp; 好像已经过了哦!"); &nbsp; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; &nbsp; 四、大家可以到百度上去搜索javascript特效，网上有大把例子的。 &nbsp; 下面是其它时间特效例子 &nbsp; 
 <table> 
 <tbody> 
 <tr> 
 <td colspan="2"> &nbsp; &nbsp;◆数字化的时钟<a rel="nofollow"></a></td> 
 </tr> 
 <tr> 
 <td align="middle">说 明</td> 
 <td>数字化的时钟</td> 
 </tr> 
 <tr> 
 <td align="middle">代 码</td> 
 <td>&lt;span id="liveclock" style"=width: 109px; height: 15px"&gt;&lt;/span&gt; &lt;SCRIPT language=javascript&gt; function www_helpor_net() { var Digital=new Date() var hours=Digital.getHours() var minutes=Digital.getMinutes() var seconds=Digital.getSeconds() if(minutes&lt;=9) minutes="0"+minutes if(seconds&lt;=9) seconds="0"+seconds myclock="现在时刻：&lt;font size='5' face='Arial black'&gt;"+hours+":"+minutes+":"+seconds+"&lt;/font&gt;" if(document.layers){document.layers.liveclock.document.write(myclock) document.layers.liveclock.document.close() }else if(document.all) liveclock.innerHTML=myclock setTimeout("www_helpor_net()",1000) } www_helpor_net(); //--&gt; &lt;/SCRIPT&gt; </td> 
 </tr> 
 </tbody> 
 </table> 
 <table> 
 <tbody> 
 <tr> 
 <td colspan="2">&nbsp;◆六种风格的时间<a rel="nofollow"></a></td> 
 </tr> 
 <tr> 
 <td align="middle">说 明</td> 
 <td>六种风格时间显示,一定有你喜欢的！</td> 
 </tr> 
 <tr> 
 <td align="middle">代 码</td> 
 <td>&lt;SCRIPT language="javascript"&gt; &lt;!-- function initArray() { for(i=0;i&lt;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&gt;12)?hrs-12:hrs); clckm=((min&lt;10)?"0":"")+min;clcks=((sec&lt;10)?"0":"")+sec; clck=(hrs&gt;=12)?"下午":"上午"; var stnr=""; var ns="0123456789"; var a=""; function getFullYear(d) { yr=d.getYear();if(yr&lt;1000) yr+=1900;return yr;} document.write("&lt;table&gt;"); //下面各行分别是一种风格，把不需要的删掉即可 document.write("&lt;TR&gt;&lt;TD&gt;风格一:&lt;/TD&gt;&lt;TD&gt;"+isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""+today.getDate()+"日,"+getFullYear(today)+"年"); document.write("&lt;TR&gt;&lt;TD&gt;风格二:&lt;/TD&gt;&lt;TD&gt;"+clckh+":"+clckm+":"+clcks+""+clck+"&lt;/TD&gt;&lt;/TR&gt;"); document.write("&lt;TR&gt;&lt;TD&gt;风格三:&lt;/TD&gt;&lt;TD&gt;"+isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""+today.getDate()+"日,"+getFullYear(today)+"年 "+clckh+":"+clckm+":"+clcks+""+clck+"&lt;/TD&gt;&lt;/TR&gt;"); document.write("&lt;TR&gt;&lt;TD&gt;风格四:&lt;/TD&gt;&lt;TD&gt;"+ (today.getMonth()+1)+"/"+today.getDate()+"/"+ (getFullYear(today)+"").substring(2,4)+"&lt;/TD&gt;&lt;/TR&gt;"); document.write("&lt;TR&gt;&lt;TD&gt;风格五:&lt;/TD&gt;&lt;TD&gt;"+hrs+":"+clckm+":"+clcks+"&lt;/TD&gt;&lt;/TR&gt;"); document.write("&lt;TR&gt;&lt;TD VALIGN=TOP&gt;风格六:&lt;/TD&gt;&lt;TD&gt;"+today+"&lt;/TD&gt;&lt;/TR&gt;"); document.write("&lt;/table&gt;"); //--&gt; &lt;/SCRIPT&gt;</td> 
 </tr> 
 </tbody> 
 </table> 
 <table> 
 <tbody> 
 <tr> 
 <td colspan="2">&nbsp;◆显示停留的时间<a rel="nofollow"></a></td> 
 </tr> 
 <tr> 
 <td align="middle">说 明</td> 
 <td>显示他人在页面停留的时间，而且可以作出提醒</td> 
 </tr> 
 <tr> 
 <td align="middle">代 码</td> 
 <td>您在本站逗留了&lt;input type="text" name="helpor_net" size="15" style="border: 0 "&gt; &lt;SCRIPT language="javascript"&gt; &lt;!-- var sec=0; var min=0; var hou=0; flag=0; idt=window.setTimeout("www_helpor_net();",1000); function www_helpor_net() { sec++; if(sec==60){sec=0;min+=1;} if(min==60){min=0;hou+=1;} if((min&gt;0)&amp;&amp;(flag==0)) { window.alert("您刚刚来了1分钟!可别急着走开，还有好多好东东等着您呢!--站长"); flag=1; } helpor_net.value=hou+"小时"+min+"分"+sec+"秒"; idt=window.setTimeout("www_helpor_net();",1000); } //--&gt; &lt;/SCRIPT&gt;</td> 
 </tr> 
 </tbody> 
 </table> 
 <table> 
 <tbody> 
 <tr> 
 <td colspan="2">&nbsp;◆有影子的数字时钟<a rel="nofollow"></a></td> 
 </tr> 
 <tr> 
 <td align="middle">说 明</td> 
 <td>这个时钟是有影子的，而且还在不停地走着呢</td> 
 </tr> 
 <tr> 
 <td align="middle">代 码</td> 
 <td>&lt;div id="bgclockshade" style="position:absolute;visibility:visible;font-family:'Arial black';color:#cccccc;font-size:20px;top:50px;left:173px"&gt;&lt;/div&gt; &lt;div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:'Arial black';color:#000000;font-size:20px;top:48px;left:170px"&gt;&lt;/div&gt; &lt;div id="mainbody" style="position:absolute; visibility:visible"&gt; &lt;/div&gt; &lt;script language=javaScript&gt; &lt;!-- function www_helpor_net() { thistime= new Date() var hours=thistime.getHours() var minutes=thistime.getMinutes() var seconds=thistime.getSeconds() if (eval(hours) &lt;10) {hours="0"+hours} if (eval(minutes) &lt; 10) {minutes="0"+minutes} if (seconds &lt; 10) {seconds="0"+seconds} thistime = hours+":"+minutes+":"+seconds if(document.all) { bgclocknoshade.innerHTML=thistime bgclockshade.innerHTML=thistime } if(document.layers) { document.bgclockshade.document.write('&lt;div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:20px;top:10px;left:152px"&gt;'+thistime+'&lt;/div&gt;') document.bgclocknoshade.document.write('&lt;div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:20px;top:8px;left:150px"&gt;'+thistime+'&lt;/div&gt;') document.close() } var timer=setTimeout("www_helpor_net()",200) } www_helpor_net(); //--&gt; &lt;/script&gt;</td> 
 </tr> 
 </tbody> 
 </table> 
 <table> 
 <tbody> 
 <tr> 
 <td colspan="2">&nbsp;◆全中文日期显示<a rel="nofollow"></a></td> 
 </tr> 
 <tr> 
 <td align="middle">说 明</td> 
 <td>年月日都是用全中文显示。 </td> 
 </tr> 
 <tr> 
 <td align="middle">代 码</td> 
 <td>&lt;script language="JavaScript"&gt; &lt;!-- function number(index1){ var numberstring="一二三四五六七八九十"; if(index1 ==0) {document.write("十")} if(index1 &lt; 10){ document.write(numberstring.substring(0+(index1-1),index1))} else if(index1 &lt; 20 ){ document.write("十"+numberstring.substring(0+(index1-11),(index1-10)))} else if(index1 &lt; 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("日") //--&gt; &lt;/script&gt;</td> 
 </tr> 
 </tbody> 
 </table> 请参考：<a href="http://wytd.66169.com/index.php" rel="nofollow">http://wytd.66169.com/index.php</a> &nbsp;</td> 
 <td></td> 
 </tr> 
 </tbody> 
</table>