JavaScript特效（调试笔记）
JavaScript特效
一、在网页上显示当前的时间日期，例如：“2016年3月26日 星期六”。
js源代码：
function getTime() {
var today = new Date(); //返回当日的日期和时间。
var year = today.getFullYear(); //获得当前的年份
var month = today.getMonth() + 1; //获得当前的月份
var day = today.getDate(); //获得当前的日期
var weekday=new Array(7);
weekday[0]="星期日";
weekday[1]="星期一";
weekday[2]="星期二";
weekday[3]="星期三";
weekday[4]="星期四";
weekday[5]="星期五";
weekday[6]="星期六";
document.getElementById("_time").value = year+"年"+month+"月"+day+"日"+" "+weekday[today.getDay()];
}
html代码：
<input id="_time">
当然，为了显示效果，input的css样式中应该去掉边框（border：none；）
eg：
二、实现多张图片的轮换。
js源代码：
//实现几张图片的轮换
var num = 0; //显示的图片序号，刚开始时是第一张图片
function changeImg1() {
var arr = new Array();
arr[0]="../images/hao123/7.jpg";
arr[1]="../images/hao123/8.jpg";
arr[2]="../images/hao123/9.jpg";
var photo = document.getElementById("topPhoto");
if (num == arr.length - 1) num = 0; //如果显示的是最后一张图片，则图片序号变为第一张的序号
else num += 1; //图片序号加一
photo.src = arr[num];
}
setInterval("changeImg1()",5000); //每隔5000毫秒调用一次changImg1()函数
HTML代码：
<img src="../images/hao123/7.jpg" id="topPhoto">
在使用的时候最好定义一下图片的样式，把图片的长宽都统一，这样图片动态显示的效果会更好一些。
三、制作导航栏，点击导航栏元素时下面的内容会产生相应的变化，并且该元素显示特殊样式。
js源代码：
//导航栏单击变换内容
function tabSwitch(_this,num) {
var tag = document.getElementById("nav9");
var number = tag.getElementsByTagName("a"); //获取导航栏元素个数(getElementsByTagName是返回元素素组)
var divNum = document.getElementsByClassName("eachDiv"); //获取导航元素对应的div个数
for(var i=0;i<number.length;i++){ //number是一个数组，这里应该用number.length显示它的长度5
number[i].className = " "; //清除所有导航栏元素的特殊样式
divNum[i].style.display = "none"; //其他所有div都隐藏
}
_this.className = "l_nav1_no1"; //给当前导航栏元素添加样式
var content = document.getElementById("l_no2_"+num); //当前导航栏元素对应的div
content.style.display = "block"; //显示当前导航栏元素对应的div部分
}
HTML代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../MyJS/hao123.js"></script>
<style type="text/css">
.l_nav1 {
height: 30px;
padding-top: 8px;
}
.l_nav1 a{
color: #3C3C3C;
text-decoration: none;
padding: 8px;
}
.l_nav1 a:hover,#l_nav1 a:active {
color: green;
text-decoration: underline;
}
.l_nav1 .l_nav1_no1 { /*“头条”*/
color: green;
text-decoration: none;
border-top: solid 1px green;
} .l_no2 {
background-color: #ffffff;
border: solid 1px #E0E0E0;
height: 282px;
width: 276px;
overflow: scroll; /*当元素内容太大而超出规定区域时，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。。*/
}
.l_no2 ul{ /*列表部分*/
padding-left: 0px;
line-height: 25px;
font-size: 14px;;
}
.l_no2 ul li{
list-style: none;
}
.l_no2 ul a{
color: #3C3C3C;
text-decoration: none;
}
.l_no2 ul a:active,.l_no2 ul a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<nav id="nav9" class="l_nav1">
<a href="#" onclick="tabSwitch(this,1)" class="l_nav1_no1">头条</a>
<a href="#" onclick="tabSwitch(this,2)">社会</a>
<a href="#" onclick="tabSwitch(this,3)">娱乐</a>
<a href="#" onclick="tabSwitch(this,4)">军事</a>
<a href="#" onclick="tabSwitch(this,5)">体育</a>
</nav>
<div class="l_no2">
<div id="l_no2_1" class="eachDiv" style="display: block"> <!--默认为该div显示-->
<img src="../images/hao123/25.jpg" width="274px">
<ul>
<li><strong style="color: #6C6C6C">·</strong><a href="#">县领导找不着住建局长 对其通报批评</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">科级干部受贿近亿 庭上力保妻子清白</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">儿子将老母接回家享福 老人悬绳自尽</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">女子亲热感觉"卡" 检查现"异形"侵体</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">大妈被女童玩具小车撞到 叫来救护车</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">六旬老人遇老相识 30元发生关系被抓</a></li>
</ul>
</div>
<div id="l_no2_2" class="eachDiv" style="display: none">
<img src="../images/hao123/25.2.jpg" width="274px">
<ul>
<li><strong style="color: #6C6C6C">·</strong><a href="#">捐精男与受精女一见钟情 孩子已1岁</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">妻子产子收1200枚鸡蛋 丈夫1天卖光</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">男子为同房说尽好话仍遭拒 残忍杀妻</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">母猪产下八名男婴 原因竟然如此凄凉</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">小夫妻宾馆开房 隔壁大叔全程看直播</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">老汉自造房车囚禁两妙龄女 边走边玩</a></li>
</ul>
</div>
<div id="l_no2_3" class="eachDiv" style="display: none">
<img src="../images/hao123/25.3.jpg" width="274px">
<ul>
<li><strong style="color: #6C6C6C">·</strong><a href="#">金星追问陈坤儿子生母 他还真招认了</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">贾静雯说“我又怀孕了”真相被曝光</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">抽烟喝酒后 成龙17岁私生女变成这样</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">台湾女星“酒后乱性” 婆婆当场傻眼</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">车晓和前夫离婚后 如此评价这段经历</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">韩国卖淫女星身份遭曝光！G.NA在列</a></li>
</ul>
</div>
<div id="l_no2_4" class="eachDiv" style="display: none">
<img src="../images/hao123/25.4.jpg" width="274px">
<ul>
<li><strong style="color: #6C6C6C">·</strong><a href="#">朝鲜愤然击落美军侦察机 美为何认怂</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">多数人不知道 中国已经买过四艘航母</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">还敢逮捕中国渔民?印尼外长开口求饶</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">揭秘辽宁舰上首位女军官 履历太吓人</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">中国两栖登陆王牌协同作战 场面壮观</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">朝鲜惊人作战计划曝光：突袭朴槿惠</a></li>
</ul>
</div>
<div id="l_no2_5" class="eachDiv" style="display: none">
<img src="../images/hao123/25.5.jpg" width="274px">
<ul>
<li><strong style="color: #6C6C6C">·</strong><a href="#">末战胜卡塔尔不够 国足期待2队犯错</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">赛中产子属误传 产妇是辽宁女排队员</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">球迷50万赌国足赢4球以上 血本无归</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">高洪波：国足只能算一般队 比较命苦</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">段江鹏将投北京队 下赛季联手马布里</a></li>
<li><strong style="color: #6C6C6C">·</strong><a href="#">白人小伙风骚表演 全程开启库里模式</a></li>
</ul>
</div>
</div>
</body>
</html>
效果图：
<!--调试笔记：
1.错误一：
var number = tag.getElementsByTagName("a").length;
（1）报错：
（2）解释及改正：
**getElementsByTagName()就是返回元素素组，如果再取它的长度的话，number就只是一个数字，所以number[i].className = " ";就会报错。**
改正：
var number = tag.getElementsByTagName("a");
2.错误二：
for(var i=0;i<number;i++){
number[i].className = " "; //清除所有导航栏元素的特殊样式
divNum[i].style.display = "none"; //其他所有div都隐藏
}
这里的number应该是一个数字，代表a元素的个数，由错误一可知，获取number的长度，即应该改为：
for(var i=0;i<number.length;i++){ //number是一个数组
number[i].className = " "; //清除所有导航栏元素的特殊样式
divNum[i].style.display = "none"; //其他所有div都隐藏
}
-->
JavaScript特效（调试笔记）的更多相关文章
- Canvas与javaScript特效笔记
第六章 Canvas与javaScript特效笔记 q <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...
- 《编写可维护的javascript》读书笔记（中）——编程实践
上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...
- javascript代码 调试方法
你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...
- Tomcat调试笔记
调试笔记 在使用Tomcat过程中经常碰到问题,导致tomcat启动失败.如下↓ 由于报错太过笼统,我根本无法找出错误.后来我切换到Console视图下,看到了如下错误信息. 根据报错信息,错误原因是 ...
- JavaScript语言精粹笔记
JavaScript语言精粹笔记 掌握语言的每个特性可以让你出风头,但是并不推荐,因为一部分的特性带来的麻烦可能远超本身的价值.正如书中所言,坏的材料并不能雕刻出好的作品,要成为一名更好的程序员,要取 ...
- Javascript的调试利器：Firebug使用详解
转载自:http://blog.csdn.net/tianxiaode/archive/2007/09/02/1769152.aspx 一直在用firebug,可是没有这么精通,今天看到本文章觉得 ...
- USB wifi调试笔记
本文以realtek 8192CU WiFi模块为例,介绍USB wifi在Jelly Bean 4.1的调试笔记. 1.WIFI打不开现象概述 WiFi打不开是指您在UI的settings下选中Wi ...
- javascript的调试
1. 关于javascript的调试,最好将浏览器的脚本通知打开. 2. 最好设置为每次访问页面时检查.
- JavaScript看书笔记01
JavaScript看书笔记... ------------------- JavaScript允许var定义语句出现在函数内部的任意位置.JS中使用Var来显示的给变量声明 JavaScript是一 ...
随机推荐
- 如何查看项目svn路径
1.选择项目根目录---->鼠标右键---->属性---->版本控制(Subversion) 如图:
- zookeeper清除日志文件工具
zookeeper运行时间长了以后,日志会成为一个比较大的问题.比如作者压力测试hbase一周以后,zookeeper日志文件达到了10G的规模.由于zookeeper日志文件不能随意删除,因为一个长 ...
- Java集合框架学习总结
转自:http://www.cnblogs.com/oubo/archive/2012/01/07/2394639.html Oubo的博客 以下介绍经常使用的集合类,这里不介绍集合类的使用方法,只介 ...
- Codeforces Round #249 (Div. 2) A. Black Square
水题 #include <iostream> #include <vector> #include <algorithm> using namespace std; ...
- [小工具]ChemistryHelper
// 此博文为迁移而来,写于2015年3月25日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vuv7.html 前几天 ...
- 10秒钟sublime text 3安装SVN插件
注意:此处我提前已经安装了towerSVN,你可能需要提前安装好 towerSVN,之前安装redis之后我才明白,安装插件时安装软件好像 是一个必要的步骤,也就是说安装插件只是让你能在这里使用你已 ...
- 【BZOJ1051】1051: [HAOI2006]受欢迎的牛 tarjan求强连通分量+缩点
Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也认 ...
- 【bzoj1367】[Baltic2004]sequence
2016-05-31 17:31:26 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1367 题解:http://www.cnblogs.co ...
- iOS 常用英语翻译
1..serve advertisements within the app 服务应用中的广告.如果你的应用中集成了广告的时候,你需要勾选这一项. √2.Attribute this app in ...
- Solr JAVA客户端SolrJ 4.9使用示例教程
http://my.oschina.net/cloudcoder/blog/305024 简介 SolrJ是操作Solr的JAVA客户端,它提供了增加.修改.删除.查询Solr索引的JAVA接口.So ...