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 }
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()函数
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 }
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>
效果图：
<!--调试笔记：
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++){
2 number[i].className = " "; //清除所有导航栏元素的特殊样式
3 divNum[i].style.display = "none"; //其他所有div都隐藏
4 }
这里的number应该是一个数字，代表a元素的个数，由错误一可知，获取number的长度，即应该改为：
1 for(var i=0;i<number.length;i++){ //number是一个数组
2 number[i].className = " "; //清除所有导航栏元素的特殊样式
3 divNum[i].style.display = "none"; //其他所有div都隐藏
4 }
-->
时间： 2024-10-12 19:27:50