JavaScript特效 一、在網頁上顯示當前的時間日期，例如：“2016年3月26日 星期六”。 js源代碼： 1 function getTime() { 2 var today = new Date(); //返回當日的日期和時間。 3 var year = today.getFullYear ...
JavaScript特效
一、在網頁上顯示當前的時間日期，例如：“2016年3月26日 星期六”。
js源代碼：
1 function getTime() { 2 var today = new Date(); //返回當日的日期和時間。 3 var year = today.getFullYear(); //獲得當前的年份 4 var month = today.getMonth() + 1; //獲得當前的月份 5 var day = today.getDate(); //獲得當前的日期 6 var weekday=new Array(7); 7 weekday[0]="星期日"; 8 weekday[1]="星期一"; 9 weekday[2]="星期二"; 10 weekday[3]="星期三"; 11 weekday[4]="星期四"; 12 weekday[5]="星期五"; 13 weekday[6]="星期六"; 14 document.getElementById("_time").value = year+"年"+month+"月"+day+"日"+" "+weekday[today.getDay()]; 15 }View Code
html代碼：
<input id="_time">
當然，為了顯示效果，input的css樣式中應該去掉邊框（border：none；）
eg：
二、實現多張圖片的輪換。
js源代碼：
1 //實現幾張圖片的輪換 2 var num = 0; //顯示的圖片序號，剛開始時是第一張圖片 3 function changeImg1() { 4 var arr = new Array(); 5 arr[0]="../images/hao123/7.jpg"; 6 arr[1]="../images/hao123/8.jpg"; 7 arr[2]="../images/hao123/9.jpg"; 8 var photo = document.getElementById("topPhoto"); 9 if (num == arr.length - 1) num = 0; //如果顯示的是最後一張圖片，則圖片序號變為第一張的序號 10 else num += 1; //圖片序號加一 11 photo.src = arr[num]; 12 } 13 setInterval("changeImg1()",5000); //每隔5000毫秒調用一次changImg1()函數View Code
HTML代碼：
<img src="../images/hao123/7.jpg" id="topPhoto">
在使用的時候最好定義一下圖片的樣式，把圖片的長寬都統一，這樣圖片動態顯示的效果會更好一些。
三、製作導航欄，點擊導航欄元素時下麵的內容會產生相應的變化，並且該元素顯示特殊樣式。
js源代碼：
1 //導航欄單擊變換內容 2 function tabSwitch(_this,num) { 3 var tag = document.getElementById("nav9"); 4 var number = tag.getElementsByTagName("a"); //獲取導航欄元素個數(getElementsByTagName是返回元素素組) 5 var divNum = document.getElementsByClassName("eachDiv"); //獲取導航元素對應的div個數 6 for(var i=0;i<number.length;i++){ //number是一個數組，這裡應該用number.length顯示它的長度5 7 number[i].className = " "; //清除所有導航欄元素的特殊樣式 8 divNum[i].style.display = "none"; //其他所有div都隱藏 9 } 10 _this.className = "l_nav1_no1"; //給當前導航欄元素添加樣式 11 var content = document.getElementById("l_no2_"+num); //當前導航欄元素對應的div 12 content.style.display = "block"; //顯示當前導航欄元素對應的div部分 13 }View Code
HTML代碼：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="../MyJS/hao123.js"></script> 7 <style type="text/css"> 8 .l_nav1 { 9 height: 30px; 10 padding-top: 8px; 11 } 12 .l_nav1 a{ 13 color: #3C3C3C; 14 text-decoration: none; 15 padding: 8px; 16 } 17 .l_nav1 a:hover,#l_nav1 a:active { 18 color: green; 19 text-decoration: underline; 20 } 21 .l_nav1 .l_nav1_no1 { /*“頭條”*/ 22 color: green; 23 text-decoration: none; 24 border-top: solid 1px green; 25 } 26 27 .l_no2 { 28 background-color: #ffffff; 29 border: solid 1px #E0E0E0; 30 height: 282px; 31 width: 276px; 32 overflow: scroll; /*當元素內容太大而超出規定區域時，內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。。*/ 33 } 34 .l_no2 ul{ /*列表部分*/ 35 padding-left: 0px; 36 line-height: 25px; 37 font-size: 14px;; 38 } 39 .l_no2 ul li{ 40 list-style: none; 41 } 42 .l_no2 ul a{ 43 color: #3C3C3C; 44 text-decoration: none; 45 } 46 .l_no2 ul a:active,.l_no2 ul a:hover { 47 color: red; 48 text-decoration: underline; 49 } 50 </style> 51 </head> 52 <body> 53 <nav id="nav9" class="l_nav1"> 54 <a href="#" onclick="tabSwitch(this,1)" class="l_nav1_no1">頭條</a> 55 <a href="#" onclick="tabSwitch(this,2)">社會</a> 56 <a href="#" onclick="tabSwitch(this,3)">娛樂</a> 57 <a href="#" onclick="tabSwitch(this,4)">軍事</a> 58 <a href="#" onclick="tabSwitch(this,5)">體育</a> 59 </nav> 60 <div class="l_no2"> 61 <div id="l_no2_1" class="eachDiv" style="display: block"> <!--預設為該div顯示--> 62 <img src="../images/hao123/25.jpg" width="274px"> 63 <ul> 64 <li><strong style="color: #6C6C6C">·</strong><a href="#">縣領導找不著住建局長 對其通報批評</a></li> 65 <li><strong style="color: #6C6C6C">·</strong><a href="#">科級幹部受賄近億 庭上力保妻子清白</a></li> 66 <li><strong style="color: #6C6C6C">·</strong><a href="#">兒子將老母接回家享福 老人懸繩自盡</a></li> 67 <li><strong style="color: #6C6C6C">·</strong><a href="#">女子親熱感覺"卡" 檢查現"異形"侵體</a></li> 68 <li><strong style="color: #6C6C6C">·</strong><a href="#">大媽被女童玩具小車撞到 叫來救護車</a></li> 69 <li><strong style="color: #6C6C6C">·</strong><a href="#">六旬老人遇老相識 30元發生關係被抓</a></li> 70 </ul> 71 </div> 72 <div id="l_no2_2" class="eachDiv" style="display: none"> 73 <img src="../images/hao123/25.2.jpg" width="274px"> 74 <ul> 75 <li><strong style="color: #6C6C6C">·</strong><a href="#">捐精男與受精女一見鐘情 孩子已1歲</a></li> 76 <li><strong style="color: #6C6C6C">·</strong><a href="#">妻子產子收1200枚雞蛋 丈夫1天賣光</a></li> 77 <li><strong style="color: #6C6C6C">·</strong><a href="#">男子為同房說盡好話仍遭拒 殘忍殺妻</a></li> 78 <li><strong style="color: #6C6C6C">·</strong><a href="#">母豬產下八名男嬰 原因竟然如此凄涼</a></li> 79 <li><strong style="color: #6C6C6C">·</strong><a href="#">小夫妻賓館開房 隔壁大叔全程看直播</a></li> 80 <li><strong style="color: #6C6C6C">·</strong><a href="#">老漢自造房車囚禁兩妙齡女 邊走邊玩</a></li> 81 </ul> 82 </div> 83 <div id="l_no2_3" class="eachDiv" style="display: none"> 84 <img src="../images/hao123/25.3.jpg" width="274px"> 85 <ul> 86 <li><strong style="color: #6C6C6C">·</strong><a href="#">金星追問陳坤兒子生母 他還真招認了</a></li> 87 <li><strong style="color: #6C6C6C">·</strong><a href="#">賈靜雯說“我又懷孕了”真相被曝光</a></li> 88 <li><strong style="color: #6C6C6C">·</strong><a href="#">抽煙喝酒後 成龍17歲私生女變成這樣</a></li> 89 <li><strong style="color: #6C6C6C">·</strong><a href="#">臺灣女星“酒後亂性” 婆婆當場傻眼</a></li> 90 <li><strong style="color: #6C6C6C">·</strong><a href="#">車曉和前夫離婚後 如此評價這段經歷</a></li> 91 <li><strong style="color: #6C6C6C">·</strong><a href="#">南韓賣淫女星身份遭曝光！G.NA在列</a></li> 92 </ul> 93 </div> 94 <div id="l_no2_4" class="eachDiv" style="display: none"> 95 <img src="../images/hao123/25.4.jpg" width="274px"> 96 <ul> 97 <li><strong style="color: #6C6C6C">·</strong><a href="#">北韓憤然擊落美軍偵察機 美為何認慫</a></li> 98 <li><strong style="color: #6C6C6C">·</strong><a href="#">多數人不知道 中國已經買過四艘航母</a></li> 99 <li><strong style="color: #6C6C6C">·</strong><a href="#">還敢逮捕中國漁民?印尼外長開口求饒</a></li> 100 <li><strong style="color: #6C6C6C">·</strong><a href="#">揭秘遼寧艦上首位女軍官 履歷太嚇人</a></li> 101 <li><strong style="color: #6C6C6C">·</strong><a href="#">中國兩棲登陸王牌協同作戰 場面壯觀</a></li> 102 <li><strong style="color: #6C6C6C">·</strong><a href="#">北韓驚人作戰計劃曝光：突襲樸槿惠</a></li> 103 </ul> 104 </div> 105 <div id="l_no2_5" class="eachDiv" style="display: none"> 106 <img src="../images/hao123/25.5.jpg" width="274px"> 107 <ul> 108 <li><strong style="color: #6C6C6C">·</strong><a href="#">末戰勝卡達不夠 國足期待2隊犯錯</a></li> 109 <li><strong style="color: #6C6C6C">·</strong><a href="#">賽中產子屬誤傳 產婦是遼寧女排隊員</a></li> 110 <li><strong style="color: #6C6C6C">·</strong><a href="#">球迷50萬賭國足贏4球以上 血本無歸</a></li> 111 <li><strong style="color: #6C6C6C">·</strong><a href="#">高洪波：國足只能算一般隊 比較命苦</a></li> 112 <li><strong style="color: #6C6C6C">·</strong><a href="#">段江鵬將投北京隊 下賽季聯手馬布里</a></li> 113 <li><strong style="color: #6C6C6C">·</strong><a href="#">白人小伙風騷表演 全程開啟庫里模式</a></li> 114 </ul> 115 </div> 116 </div> 117 </body> 118 </html>View Code
效果圖：
<!--調試筆記：
1.錯誤一：
var number = tag.getElementsByTagName("a").length;
（1）報錯：
（2）解釋及改正：
**getElementsByTagName()就是返回元素素組，如果再取它的長度的話，number就只是一個數字，所以number[i].className = " ";就會報錯。**
改正：
var number = tag.getElementsByTagName("a");
2.錯誤二：
1 for(var i=0;i<number;i++){
