├── 1.1.html
├── 1.2-图片切换.html
├── 10.1-只能输入数字.html
├── 10.2-加密.html
├── 10.3-indexOf和lastindexOf.html
├── 10.4-实例展开收缩文本.html
├── 10.5-彩色文字.html
├── 10.6-查找.html
├── 10.7-查找-替换.html
├── 11.1-循环遍历对象属性.html
├── 11.2-数组去重.html
├── 11.3-随机图片滚动.html
├── 11.4-图片随机切换.html
├── 2.1-10行换行.html
├── 2.2-10行换行2.html
├── 2.4-W效果.html
├── 2.5-鼠标划过.html
├── 2.6-新闻实例.html
├── 2.7-自动生成10个li.html
├── 2.8-自动生成10个v字.html
├── 2.9-自动生成100个div.html
├── 3.1-带缩略图的图片切换效果.html
├── 3.2-控制多组图片切换.html
├── 4.1-找到合适的qq号码.html
├── 4.2-找到合适的值 (1).html
├── 5.1-商品列表计算器与统计.html
├── 5.2-搜狐视频纪录片列表展示.html
├── 5.3-修改文本框的值.html
├── 5.4-选项卡里套选项卡.html
├── 6.1-反选.html
├── 6.2-百度文库评分.html
├── 6.3-百度音乐全选操作.html
├── 7.1-替换背景.html
├── 7.2-简单的轮播图.html
├── 7.3-qq延时菜单实例.html
├── 7.4-延迟消失的菜单.html
├── 7.5-按钮控制商品上下滚动.html
├── 7.6-自动轮换选项卡.html
├── 7.7-淘宝商品广告效果.html
├── 7.8-点击滑动图片(leo的做法).html
├── 7.8-点击滑动图片.html
├── 8.1-定时器应用.html
├── 8.2-定时器应用2.html
├── 8.3-添加回调函数.html
├── 8.4-往下掉div.html
├── 8.5-上下滚动.html
├── 8.6-抖动.html
├── 8.6-抖动的修复.html
├── 8.7-点击往下掉再返回.html
├── 8.8-点击加分效果.html
├── 8.9-图片自动切换(自己改).html
├── 8.9-图片自动切换.html
├── 9.1-图片时间.html
├── 9.2-倒计时.html
├── 9.3-倒计时实例.html
├── 9.4-图片时间升级版.html
├── 9.5-倒计时抢购商品.html
├── README.md
├── css
    └── base.css
├── img
    ├── 1.jpg
    ├── 1.png
    ├── 11.4-bg1.jpg
    ├── 11.4-bg2.jpg
    ├── 11.4-bg3.jpg
    ├── 11.4-bg4.jpg
    ├── 11.4-bg5.jpg
    ├── 11.4-bg6.jpg
    ├── 11.4-bg7.jpg
    ├── 11.4-bg8.jpg
    ├── 2.jpg
    ├── 2.png
    ├── 2_bg1.png
    ├── 2_bg2.png
    ├── 3.jpg
    ├── 3.png
    ├── 4.jpg
    ├── 4.png
    ├── 5.2_bg1.png
    ├── 5.2_bg2.png
    ├── 5.2_bg3.png
    ├── 5.3_bg1.png
    ├── 5.3_bg3.png
    ├── 5.4_right11.png
    ├── 5.4_right12.png
    ├── 5.4_right13.png
    ├── 5.4_right21.png
    ├── 5.4_right22.png
    ├── 5.4_right23.png
    ├── 5.4_right24.png
    ├── 5.4_right31.png
    ├── 5.4_right32.png
    ├── 5.4_right33.png
    ├── 5.4_right34.png
    ├── 5.4_right35.png
    ├── 5.4_right41.png
    ├── 5.4_right42.png
    ├── 5.4_right43.png
    ├── 5.4_right44.png
    ├── 5.4_side1.png
    ├── 5.4_side2.png
    ├── 5.4_side21.png
    ├── 5.4_side22.png
    ├── 5.4_side23.png
    ├── 5.4_side24.png
    ├── 5.4_side3.png
    ├── 5.4_side4.png
    ├── 6.2_astar.png
    ├── 6.2_bstar.png
    ├── 6.2_right.png
    ├── 6.2_star.png
    ├── 6.3_bottom.png
    ├── 7.4_bottom1.png
    ├── 7.4_bottom2.png
    ├── 7.4_bottom3.png
    ├── 7.4_bottom4.png
    ├── 7.4_bottommid.png
    ├── 7.4_navbg.png
    ├── 7.4_navmid.png
    ├── 7.5_bg1.png
    ├── 7.5_bg2.png
    ├── 7.5_bg3.png
    ├── 7.5_footerbg.png
    ├── 7.5_headerbg.png
    ├── 7.5_topbg.png
    ├── 7.6_bg11.jpg
    ├── 7.6_bg12.jpg
    ├── 7.6_bg13.jpg
    ├── 7.6_bg14.jpg
    ├── 7.6_bg21.jpg
    ├── 7.6_bg22.jpg
    ├── 7.6_bg23.jpg
    ├── 7.6_bg24.jpg
    ├── 7.7_bg1.png
    ├── 7.7_bg10.png
    ├── 7.7_bg11.png
    ├── 7.7_bg12.png
    ├── 7.7_bg13.png
    ├── 7.7_bg14.png
    ├── 7.7_bg2.png
    ├── 7.7_bg3.png
    ├── 7.7_bg4.png
    ├── 7.7_bg5.png
    ├── 7.7_bg6.png
    ├── 7.7_bg7.png
    ├── 7.7_bg8.png
    ├── 7.7_bg9.png
    ├── 7.8_bg1.jpg
    ├── 7.8_bg2.jpg
    ├── 7.8_bg3.jpg
    ├── 7.8_bg4.jpg
    ├── 7.8_bg5.jpg
    ├── 8.9_bg1.gif
    ├── 8.9_bg2.gif
    ├── 8.9_bg3.gif
    ├── 8.9_bg4.gif
    ├── 8.9_bg5.gif
    ├── 9.5-bg1.png
    ├── 9.5-bg2.png
    ├── 9.5-bg3.png
    ├── 9.5-bg4.png
    ├── bg.png
    ├── bg1.png
    ├── bg2.png
    ├── down.png
    └── loader_ico.gif
├── img2
    ├── 0.JPG
    ├── 1.JPG
    ├── 1.png
    ├── 2.JPG
    ├── 2.png
    ├── 3.2_1.jpg
    ├── 3.2_2.jpg
    ├── 3.2_3.jpg
    ├── 3.JPG
    ├── 3.png
    ├── 4.JPG
    ├── 4.png
    ├── 5.JPG
    ├── 6.JPG
    ├── 7.JPG
    ├── 8.JPG
    ├── 9.JPG
    ├── active.png
    ├── colon.JPG
    ├── ico1.gif
    ├── ico2.gif
    ├── loader_ico.gif
    ├── next.png
    ├── normal.png
    └── prev.png
├── js
    ├── jquery-2.1.4.js
    ├── xg.js
    └── 作业的思路.js
├── y-属性读写操作，HTML小实例.html
├── y-改变属性.html
├── y-数组.html
├── y-文字的放大放小.html
├── 图片切换综合实例1.html
├── 展开收缩.html
└── 带缩略图的轮播图.html


/1.1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>作业</title>
  6 | </head>
  7 | <style type="text/css">
  8 | *{margin:0px;padding:0px;border:0px;}
  9 | #wrap{}
 10 | h2{display:block;float:left;margin-left: 30px;margin-top: 30px;}
 11 | #box1{float:left;width:100px;height:30px;background:red;text-align: center;line-height: 30px;margin:30px 0 0 30px;cursor: pointer; }
 12 | #box2{clear:both;width:150px;height:150px;margin-left:30px;margin-top: 30px;border:2px solid black;}
 13 | #box3{position:absolute;top:0;left:0;width:100%; height:100%; display:none;background:#000; opacity:0.5;
 14 | 	}
 15 | #box4{display:none;border:5px solid #9C949C;width:300px;height:140px;position: absolute;left:450px;top:300px;padding:40px;line-height: 40px; background:#fff;}
 16 | .list{width:50px;height:30px;display: inline-block;background:#EFEFEF;text-align: center;border:1px solid #C0C0C0; cursor: pointer;}
 17 | .list:hover{
 18 | 	background:#EF9400;
 19 | }
 20 | #bgs1{margin-left: 10px;background:#9CCE00;}
 21 | #bgs2{background:#EFBD00;}
 22 | #bgs3{background:#5A94EF;}
 23 | #recover, #ok{width:60px; height:30px;margin-top:10px;background:#002952;text-align: center;line-height: 30px;float:left;color:#fff;}
 24 | #recover{ margin-left:70px;cursor: pointer;}
 25 | #ok{ margin-left:5px;cursor: pointer;}
 26 | </style>
 27 | <script type="text/javascript">
 28 | window.onload = function(){
 29 | 	xg.app.toShow();
 30 | 	xg.app.toChange();
 31 | 	xg.app.toCover();
 32 | }
 33 | var xg = {};	//命名空间
 34 | 
 35 | xg.tools = {}; //底层库
 36 | 
 37 | xg.tools.getByClass = function(oParent,sClass){
 38 | 	var aEle = oParent.getElementsByTagName('*');
 39 | 	var arr = [];
 40 | 	for(var i=0; i<aEle.length;i++)
 41 | 		if(aEle[i].className == sClass){
 42 | 			arr.push(aEle[i]);
 43 | 		}
 44 | 		return arr;
 45 | }
 46 | 
 47 | xg.ui = {};	//组件
 48 | 
 49 | xg.app = {};	//应用
 50 | 
 51 | xg.app.toShow = function(){
 52 | 	var oBox1 = document.getElementById('box1');
 53 | 	var oBox2 = document.getElementById('box2');
 54 | 	var oBox3 = document.getElementById('box3');
 55 | 	var oBox4 = document.getElementById('box4');
 56 | 
 57 | 	oBox1.onclick = function(){
 58 | 		oBox4.style.display = 'block';
 59 | 		oBox3.style.display = 'block';
 60 | 	};
 61 | 
 62 | };
 63 | 
 64 | xg.app.toChange = function(){
 65 | 	var oBox2 = document.getElementById('box2');
 66 | 	var oBgs1 = document.getElementById('bgs1');
 67 | 	var oBgs2 = document.getElementById('bgs2');
 68 | 	var oBgs3 = document.getElementById('bgs3');
 69 | 	var oWd1 = document.getElementById('wd1');
 70 | 	var oWd2 = document.getElementById('wd2');
 71 | 	var oWd3 = document.getElementById('wd3');
 72 | 	var oHd1 = document.getElementById('hd1');
 73 | 	var oHd2 = document.getElementById('hd2');
 74 | 	var oHd3 = document.getElementById('hd3');
 75 |   
 76 | 	oBgs1.onclick = function(){
 77 | 		oBgs1.style.background = 'red';
 78 | 		oBox2.style.background = 'red';
 79 | 	};
 80 | 	oBgs2.onclick = function(){
 81 | 		oBgs2.style.background = 'yellow';
 82 | 		oBox2.style.background = 'yellow';
 83 | 	};
 84 | 	oBgs3.onclick = function(){
 85 | 		oBgs3.style.background = 'blue';
 86 | 		oBox2.style.background = 'blue';
 87 | 	};
 88 | 	oWd1.onclick = function(){
 89 | 		oBox2.style.width = '200px';
 90 | 	};
 91 | 	oWd2.onclick = function(){
 92 | 		oBox2.style.width = '300px';
 93 | 	};
 94 | 	oWd3.onclick = function(){
 95 | 		oBox2.style.width = '400px';
 96 | 	};
 97 | 	oHd1.onclick = function(){
 98 | 		oBox2.style.height = '200px';
 99 | 	};
100 | 	oHd2.onclick = function(){
101 | 		oBox2.style.height = '300px';
102 | 	};
103 | 	oHd3.onclick = function(){
104 | 		oBox2.style.height = '400px';
105 | 	};
106 | }
107 | 
108 | xg.app.toCover = function(){
109 | 	var oRecover = document.getElementById('recover');
110 | 	var oOk = document.getElementById('ok');
111 | 	var oBox3 = document.getElementById('box3');
112 | 	var oBox4 = document.getElementById('box4');
113 | 	var oBox2 = document.getElementById('box2');
114 | 	oRecover.onclick = function(){
115 | 		oBox2.style.height = '150px';
116 | 		oBox2.style.width = '150px';
117 | 		oBox2.style.background = '#fff';
118 | 		oBox4.style.display = 'none';
119 | 		oBox3.style.display = 'none';
120 | 	};
121 | 	oOk.onclick = function(){
122 | 		oBox4.style.display = 'none';
123 | 		oBox3.style.display = 'none';
124 | 	};
125 | }
126 | </script>
127 | <body>
128 | 	<div id="wrap">
129 | 		<h2>请为下面的div设置样式</h2>
130 | 		<div id="box1">点击设置</div>
131 | 		<div id="box2"></div>
132 | 	<div id="box3"></div>
133 | 	<div id="box4">
134 | 		请选择背景色:
135 | 		<div id="bgs1" class="list">红</div>
136 | 		<div id="bgs2" class="list">黄</div>
137 | 		<div id="bgs3" class="list">蓝</div>
138 | 		</br>
139 | 		请选择宽度(px):
140 | 		<div id="wd1" class="list">200</div>
141 | 		<div id="wd2" class="list">300</div>
142 | 		<div id="wd3" class="list">400</div>
143 | 		</br>
144 | 		请选择高度(px):
145 | 		<div id="hd1" class="list">200</div>
146 | 		<div id="hd2" class="list">300</div>
147 | 		<div id="hd3" class="list">400</div>
148 | 		</br>
149 | 		<div id="recover">恢复</div>
150 | 		<div id="ok">确定</div>
151 | 	</div>
152 | 	</div>
153 | </body>
154 | </html>


--------------------------------------------------------------------------------
/1.2-图片切换.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>图片轮播的两种方式</title>
 6 | <style>
 7 | #controls {width:400px; margin: auto; text-align: center; }
 8 | #container {width: 400px; height:400px; border: 10px solid #eee; position: relative; background: gray; margin: 10px auto 0; }
 9 | #prev, #next {position: absolute; background: black; filter:alpha(opacity:40); opacity: 0.4; font-size: 20px; color: white; width: 40px; height: 40px; border: 2px solid white; line-height: 40px; text-align: center; top: 180px; pointer: cursor; text-decoration: none; }
10 | #prev:hover, #next:hover {filter:alpha(opacity:80); opacity: 0.8; }
11 | #order, #info {position: absolute; width:100%; height: 30px; line-height: 30px; text-align: center; background: black; filter:alpha(opacity:60); opacity: 0.6; font-size: 20px; color: white; }
12 | #prev {left: 0; }
13 | #next {right: 0; }
14 | #picture {height: 400px; width: 400px; }
15 | #order {top: 0; }
16 | 	#info {bottom: 0; }
17 | </style>
18 | <script>
19 | window.onload = function(){
20 | 	var oRod = document.getElementById('round'),
21 | 		oSig = document.getElementById('single'),
22 | 		oPrev = document.getElementById('prev'),
23 | 		oNext = document.getElementById('next'),
24 | 		oOrder = document.getElementById('order'),
25 | 		oInfo = document.getElementById('info'),
26 | 		oPicture = document.getElementById('picture'),
27 | 		arrPic = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"],
28 | 		arrtext = ["图片一", "图片二", "图片三", "图片四"],
29 | 		flag = true,	//定义一个开关
30 | 		i = 0;
31 | 
32 | 	oRod.onclick = function(){
33 | 		flag = true;	//如果是循环模式，开关开启
34 | 	}
35 | 	oSig.onclick = function(){
36 | 		flag = false;	//如果是顺序模式，开关关闭
37 | 	}
38 | 
39 | 	function changeTab() {
40 | 		oOrder.innerHTML = i + 1 + ' / ' + arrPic.length;	//上方随着图片改变
41 | 		oInfo.innerHTML = arrtext[i];	//下方字体随着图片的改变改变
42 | 		oPicture.src = arrPic[i];	//图片的路径随着切换而改变
43 | 	}
44 | 	changeTab();
45 | 
46 | 	// 向后翻页
47 | 	oNext.onclick = function(){
48 | 		i++;
49 | 		if(i>3 && flag) {
50 | 			i = 0;		//如果开关开启，并且走到了最后，则跳转到第一个
51 | 		} else if(i>3 && !flag) {
52 | 			i = 3;		//如果开关开启，并且走到了第一个，则跳转到最后一个
53 | 			alert("已经是最后一页啦！");
54 | 		};
55 | 		changeTab();	//判断完毕，执行函数
56 | 	}
57 | 	// 向前翻页
58 | 	oPrev.onclick = function(){
59 | 		i--;
60 | 		if(i<0 && flag) {
61 | 			i = arrPic.length - 1;
62 | 		} else if(i<0 && !flag) {
63 | 			i = 0;
64 | 			alert("已经是第一页啦！");
65 | 		};
66 | 		changeTab();
67 | 	}
68 | }
69 | </script>
70 | </head>
71 | <body>
72 | 	<div id="controls">
73 | 		<input id="round" type="button" value = "循环播放">
74 | 		<input id="single" type="button" value = "顺序播放">
75 | 	</div>
76 | 	<div id="container">
77 |         <a href='javascript:' id="prev">&lt;</a>
78 |         <a href='javascript:' id="next">&gt;</a>
79 |         <div id="order">图片加载中……</div>
80 |         <div id="info">图片加载中……</div>
81 |         <img id="picture">
82 | 	</div>
83 | </body>
84 | </html>


--------------------------------------------------------------------------------
/10.1-只能输入数字.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>只能输入数字</title>
 6 | </head>
 7 | <body>
 8 | 	<input type="text" />
 9 | 	<input type="button" value="检测" />
10 | <script type="text/javascript">
11 | var oInp = document.getElementsByTagName('input');
12 | oInp[1].onclick = function(){
13 | 	var val = oInp[0].value;
14 | 	console.log(detectNum(val));
15 | 	if(detectNum(val)){
16 | 		alert('恭喜，'+val+'全是数字');
17 | 	}else{
18 | 		alert('输入有误');
19 | 	}
20 | }
21 | function detectNum(str){
22 | 	for(var i=0;i<str.length;i++){
23 | 		var n = 0;
24 | 		n = str.charCodeAt(i);
25 | 		if(n<48 || n>57){
26 | 			return false;
27 | 		}
28 | 	}
29 | 	return true;
30 | }
31 | </script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/10.2-加密.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>加密</title>
 6 | </head>
 7 | <body>
 8 | 	<input type="text" />
 9 | 	<input type="button" value="加密" />
10 | 	<div id="div1">加密...</div>
11 | <script type="text/javascript">
12 | var oInp = document.getElementsByTagName('input');
13 | var oDiv = document.getElementById('div1');
14 | oInp[1].onclick = function(){
15 | 	var str = oInp[0].value;
16 | 	var str1 = '';
17 | 	//str.charCodeAt(0);
18 | 	for(var i=0;i<str.length;i++){
19 | 		str1 += String.fromCharCode((str.charCodeAt(i)-100));
20 | 	}
21 | 	oDiv.innerHTML = str1;
22 | }
23 | </script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/10.3-indexOf和lastindexOf.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>indexOf</title>
 6 | </head>
 7 | <body>
 8 | 	
 9 | </body>
10 | <script type="text/javascript">
11 | 	var str = '妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！';
12 | 
13 | 	var s = '妙';
14 | 	var i=0;
15 | 	/*for(;str.indexOf(s,i) !=-1;){
16 | 		alert(str.indexOf(s,i));
17 | 		i = str.indexOf(s,i) + s.length;
18 | 	}*/
19 | 	while(str.indexOf(s,i) !=-1){
20 | 		alert(str.indexOf(s,i));
21 | 		i = str.indexOf(s,i) + s.length;
22 | 	}
23 | 
24 | </script>
25 | </html>


--------------------------------------------------------------------------------
/10.4-实例展开收缩文本.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>展开收缩</title>
 6 | <link rel="stylesheet" type="text/css" href="css/base.css">
 7 | <style type="text/css">
 8 | p{width:400px;margin: 50px auto;border:1px solid gray;}
 9 | </style>
10 | </head>
11 | <body>
12 | 	<p><span>这是一个看脸的社会,除了人,车也一样需要看脸。一款卖相还算不错的新车,除了价格、配置和动力以外,外观是诸多消费者关心的重要条件之一。在本期中,我们将给大家带来2015年上半年上市的进口车,这些车型都无一例外的玩起了个性,其中涵盖了2015年上市的主流车型,包括了全新奥迪TT、雷诺卡缤、丰田新一代埃尔法、大众up!等</span>......<a href="javascript:;">>>收缩</a>
13 | 	</p>
14 | <script type="text/javascript">
15 | var oP = document.getElementsByTagName('p')[0];
16 | var oSpan = oP.getElementsByTagName('span')[0];
17 | var oA = oP.getElementsByTagName('a')[0];
18 | var str = oSpan.innerHTML;
19 | var onOff = true;
20 | 
21 | oA.onclick = function(){
22 | 	if(onOff){
23 | 		oSpan.innerHTML = str.substring(0,20);
24 | 		oA.innerHTML = '>>展开';
25 | 	}else{
26 | 		oSpan.innerHTML = str;
27 | 		oA.innerHTML = '>>收缩';
28 | 	}
29 | 	onOff = !onOff;
30 | };
31 | </script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/10.5-彩色文字.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 | <title>无标题文档</title>
 6 | <style>
 7 | div { width:300px; height:200px; border:1px solid #333; background:#fff; padding:20px; line-height:40px; }
 8 | span { padding:5px 15px; font-family:微软雅黑; }
 9 | </style>
10 | </head>
11 | 
12 | <body>
13 | 
14 | <div id="div1">
15 | 	<!--
16 | 	<span style="background:#FFC;">文</span><span style="background:#CC3;">字</span><span style="background:#6FC;">内</span><span style="background:#9C9;">容</span>
17 |   -->
18 | </div>
19 | 
20 | <input type="text" />
21 | <input type="button" value="按钮" />
22 | 
23 | <script>
24 | var oDiv = document.getElementById('div1');
25 | var aInp = document.getElementsByTagName('input');
26 | var arrColor = [ '#FFC', '#CC3', '#6FC', '#9C9' ];
27 | 
28 | aInp[1].onclick = function () {
29 | 	var str = aInp[0].value;				// '妙味课堂'
30 | 	var arr = str.split('');							// [ '妙', '味', '课', '堂' ]
31 | 	
32 | 	for ( var i=0; i<arr.length; i++ ) {
33 | 		arr[i] = '<span style="background:' + arrColor[i%arrColor.length] + ';">' + arr[i] + '</span>';
34 | 	}
35 | 	
36 | 	oDiv.innerHTML += arr.join('');
37 | };
38 | 
39 | </script>
40 | 
41 | 
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/10.6-查找.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 | <title>无标题文档</title>
 6 | <style>
 7 | p { border:10px solid #ccc; background:#FFC; width:400px; padding:20px; font-size:16px; font-family:微软雅黑; }
 8 | span { background:yellow; }
 9 | </style>
10 | 
11 | </head>
12 | 
13 | <body>
14 | 
15 | <input type="text" />
16 | <input type="text" />
17 | <input type="button" value="替换" />
18 | 
19 | <p>妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！<br />
20 | 2013年底，妙味课堂最新推出"远程培训"服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升……</p>
21 | 
22 | <script>
23 | var aInp = document.getElementsByTagName('input');
24 | var oP = document.getElementsByTagName('p')[0];
25 | 
26 | aInp[2].onclick = function () {
27 | 	var str = aInp[0].value;			// '妙味'
28 | 	var newStr = aInp[1].value;
29 | 	
30 | 	if (!str)return;
31 | 	
32 | 	oP.innerHTML = oP.innerHTML.split(str).join('<span>'+newStr+'</span>');
33 | };
34 | 
35 | </script>
36 | 
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/10.7-查找-替换.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <meta charset="UTF-8">
  5 | <title>查找，替换</title>
  6 | <link rel="stylesheet" type="text/css" href="css/base.css">
  7 | <style type="text/css">
  8 | html{background: #EFEFE7;}
  9 | #wrap{width:600px;height:300px;background:#fff;margin:50px auto;}
 10 | p{width:400px;height:250px;margin:40px;float: left;margin-bottom: 0;}
 11 | #bar{float:right;height:150px;margin-right: 60px;margin-top: 40px;cursor:pointer;}
 12 | .subar{height:40px;width:60px;background:#c0c0c0;margin-top: 5px;text-align: center;line-height: 40px;float: left;}
 13 | #list-down{height:100px;width:60px;display: none;}
 14 | #bottom{width:590px;height:100px;clear: both;margin: 0 auto;border:5px solid #E71063;background: #E7E7B5;display: none;}
 15 | #close{float:right;width:60px;height:40;border-radius:4px;background: #996363;margin-right: 40px;text-align: center;line-height: 30px;color:#fff;cursor:pointer;}
 16 | ul{width:590px;height:30px;margin-top: 10px;border-bottom: 2px solid red;}
 17 | ul li{float: left;margin-left: 20px;width:50px;height:30px;text-align: center;line-height: 30px;cursor:pointer;}
 18 | #searched{margin-left: 20px;margin-top: 15px;}
 19 | #replaced{margin-left: 20px;margin-top: 15px;display: none;}
 20 | .clor1{background:#E76308;}
 21 | </style>
 22 | <script type="text/javascript" src="js/xg.js"></script>
 23 | <script type="text/javascript">
 24 | /*
 25 | 10-7-查找，替换
 26 | 思路：
 27 | 	需要实现的功能：
 28 | 	1、展开，实现下拉列表功能，查询，替换，
 29 | 	2、点击查询，出现查询框，点击替换，出现替换框
 30 | 	3、输入数据，查找到需要查找的字符串，显示高亮
 31 | 	如果输入的数据不是文本内的文字，弹出未查找到。
 32 | 	4、输入数据，如果有替换，如果没有找到弹出未找到，如果替换的是空字符串，提示是否需要删除文字。
 33 | 分析：
 34 | 	1、下拉列表采用onmouseover事件显示，
 35 | 	2、点击查询显示隐藏的查询框，点击替换，出现替换框
 36 | 	3、输入数据，点击查找，如果str.indexOf()返回-1显示未查找到，如果有，利用str.indexOf()返回字符串。
 37 | 	4、输入数据，如如果str.indexOf()返回-1，未找到，如果有新定义一个变量，将处理过的字符串赋给文本框的innerHTML，
 38 | */
 39 | 
 40 | window.onload = function(){
 41 | 
 42 | 	var oP = document.getElementsByTagName('p')[0];
 43 | 	var oList = $('list');
 44 | 	var oBar = $('bar');
 45 | 	var oList_down = $('list-down');
 46 | 	var oSrch = $('search');
 47 | 	var oRpce = $('replace');
 48 | 	var oBtm = $('bottom');
 49 | 	var oUl = oBtm.getElementsByTagName('ul')[0];
 50 | 	var oLi = oUl.getElementsByTagName('li');
 51 | 	var oSrched = $('searched');
 52 | 	var oRpced = $('replaced');
 53 | 	var oIput = oSrched.getElementsByTagName('input'); 
 54 | 	var aIput = oRpced.getElementsByTagName('input'); 
 55 | 	var oClose = $('close');	
 56 | 
 57 | 	oList.onmouseenter = function(){
 58 | 		oList_down.style.display = 'block';
 59 | 	}
 60 | 	oList_down.onmouseleave = function(){
 61 | 		this.style.display = 'none';
 62 | 	}
 63 | 	In(oSrch,'#E76308');
 64 | 	Out(oSrch,'#c0c0c0');
 65 | 	In(oRpce,'#E76308');
 66 | 	Out(oRpce,'#c0c0c0');
 67 | 	In(oLi[0],'#c0c0c0');
 68 | 	Out(oLi[0],'');
 69 | 	In(oLi[1],'#c0c0c0');
 70 | 	Out(oLi[1],'');
 71 | 
 72 | 	oLi[0].onclick = function(){
 73 | 		oRpced.style.display = 'none';
 74 | 		oSrched.style.display = 'block';
 75 | 	}
 76 | 	oLi[1].onclick = function(){
 77 | 		oSrched.style.display = 'none';
 78 | 		oRpced.style.display = 'block';
 79 | 	}
 80 | 	
 81 | 	oSrch.onclick = function(){
 82 | 		oBtm.style.display = 'block';
 83 | 		oRpced.style.display = 'none';
 84 | 		oSrched.style.display = 'block';
 85 | 	}
 86 | 
 87 | 	oRpce.onclick = function(){
 88 | 		oBtm.style.display = 'block';
 89 | 		oSrched.style.display = 'none';
 90 | 		oRpced.style.display = 'block';
 91 | 	}
 92 | 
 93 | 	oClose.onclick = function(){
 94 | 		oBtm.style.display = 'none';
 95 | 	}
 96 | 
 97 | 	oIput[1].onclick = function(){
 98 | 		search();
 99 | 	}
100 | 	aIput[2].onclick = function(){
101 | 		replace();
102 | 	}
103 | 
104 | 	function In(obj,color){
105 | 		obj.onmouseover = function(){
106 | 			this.style.background = color;
107 | 		};
108 | 	}
109 | 	function Out(obj,color){
110 | 		obj.onmouseout = function(){
111 | 			this.style.background = color;
112 | 		};
113 | 	}
114 | 	
115 | 	function search(){
116 | 		var str = '';
117 | 		str = oP.innerHTML;
118 | 		var str1 = oIput[0].value;
119 | 		if(!str1){
120 | 			alert('请输入要查找的内容')
121 | 		}else{
122 | 			if(str.indexOf(str1) == -1){
123 | 				alert('对不起，没有找您输入的【'+str1+'】');
124 | 				oP.innerHTML = str;
125 | 				oIput[0].value = '';
126 | 			}else{
127 | 				oP.innerHTML = str;
128 | 				var arr = str.split(str1);
129 | 				oP.innerHTML = arr.join('<span style="background:yellow;">'+str1+'</span>');
130 | 				oIput[0].value = '';
131 | 			}
132 | 		}
133 | 
134 | 	}
135 | 
136 | 	function replace(){
137 | 		var str = ''
138 | 		str = oP.innerHTML;
139 | 		var str1 = aIput[0].value;
140 | 		var str2 = aIput[1].value;
141 | 		if(!str1){
142 | 			alert('请输入要替换的内容');
143 | 		}else{
144 | 			if(str.indexOf(str1) == -1){
145 | 				alert('对不起，没有找您输入的【'+str1+'】');
146 | 			}else{
147 | 				if(!str2){
148 | 					var r = comfirm('确定要删除所选的文字吗?');
149 | 					if(r){
150 | 						aIput[0].value = '';
151 | 						return;
152 | 					}
153 | 				}
154 | 				var arr = str.split(str1);
155 | 				oP.innerHTML = arr.join(str2);
156 | 				str = oP.innerHTML;
157 | 				aIput[0].value = '';
158 | 				aIput[1].value = '';
159 | 			}
160 | 		}
161 | 	}
162 | 
163 | }
164 | </script>
165 | </head>
166 | <body>
167 | 	<div id="wrap">
168 | 		<p>“新华视点”记者采访了解到,由于我国南北温差较大,对于高温津贴发放的标准、对象、方式并未做全国统一性规定,均以各地人社等部门发放的文件规定为准,因此各地情况差异较大。<br/>有的省市在相关规定中,还将高温津贴发放范围在国家规定的基础上有所扩大。比如,山东省将高温津贴分为从事室外作业和高温作业人员、非高温作业人员两类,明确企业在岗且提供正常劳动的职工列入发放范围。据山东省劳动部门工作人员介绍,这项关于夏季防暑降温费的规定,是针对所有在岗职工的,无论从事何种工种,均可按标准享受津贴。</p>
169 | 		<div id="bar">
170 | 			<div id="list" style="background: #94948C;"class="subar">展开</div>
171 | 			<div id='list-down'>
172 | 				<div id="search" class="subar">查找</div>
173 | 				<div id="replace"class="subar">替换</div>
174 | 			</div>
175 | 		</div>
176 | 	</div>
177 | 	<div id="bottom">
178 | 			<ul>
179 | 				<li>查找</li>
180 | 				<li>替换</li>
181 | 				<div id="close">关闭</div>
182 | 			</ul>
183 | 			<div id="searched">
184 | 				<input type="text" />
185 | 				<input type="button" value="查找" />
186 | 			</div>
187 | 			<div id="replaced">
188 | 				<input type="text" />
189 | 				<input type="text" />
190 | 				<input type="button" value="替换" />
191 | 			</div>
192 | 		</div>
193 | </body>
194 | </html>


--------------------------------------------------------------------------------
/11.1-循环遍历对象属性.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>循环遍历对象属性</title>
 6 | </head>
 7 | <body>
 8 | 	
 9 | </body>
10 | <script type="text/javascript">
11 | var str = '';
12 | var num = 0;
13 | for(var attr in window){
14 | 	str += num + '、' +attr +':'+ document[attr] + '<br/>';
15 | 	num ++;
16 | }
17 | document.body.innerHTML = str;
18 | </script>
19 | </html>


--------------------------------------------------------------------------------
/11.2-数组去重.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>数组去重</title>
 6 | </head>
 7 | <body>
 8 | <script type="text/javascript">
 9 | var arr = [1,2,2,4,2];
10 | 
11 | for(var i=0;i<arr.length;i++){
12 | 	for(var j=i+1;j<arr.length;j++){
13 | 		if(arr[i] == arr[j]){
14 | 			arr.splice(j,1);
15 | 			j--;
16 | 		}
17 | 	}
18 | }
19 | 
20 | alert(arr);
21 | 
22 | 
23 | </script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/11.3-随机图片滚动.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>随机图片滚动</title>
 6 | <style>
 7 | html, body, ul {margin: 0; padding: 0; }
 8 | li {list-style: none; }
 9 | ul {width: 220px; margin: 50px auto; }
10 | li {display: inline-block; width: 100px; height: 50px; font-size: 0; overflow: hidden; position: relative; }
11 | div {position: absolute; top: 0px; left: 0; }
12 | </style>
13 | <script src="js/xg.js"></script>
14 | <script type="text/javascript">
15 | window.onload = function(){
16 | 	var aLi = document.getElementsByTagName('li'),
17 | 		flag = 0;
18 | 
19 | 	for(var i=0;i<aLi.length;i++){
20 | 		fnSlide(aLi[i]);
21 | 	}
22 | 
23 | function fnSlide(li){
24 | 	var oDiv = li.getElementsByTagName('div')[0];
25 | 	fnSlideOnce();
26 | 	function fnSlideOnce(){
27 | 	setTimeout(function(){
28 | 		flag = flag == 0 ? -50 : 0;
29 | 		doMove(oDiv,'top',10,flag,fnSlideOnce);
30 | 	},
31 | 		Math.round(Math.random()*2000+1000)
32 | 	);
33 | }
34 | }
35 | 
36 | 
37 | }
38 | 
39 | </script>
40 | </head>
41 | <body>
42 | 	<ul>
43 | 		<li>
44 | 			<div>
45 | 				<img src="img/7.7_bg1.png">
46 | 				<img src="img/7.7_bg2.png">
47 | 			</div>
48 | 		</li>
49 | 		<li>
50 | 			<div>
51 | 				<img src="img/7.7_bg3.png">
52 | 				<img src="img/7.7_bg4.png">
53 | 			</div>
54 | 		</li>
55 | 		<li>
56 | 			<div>
57 | 				<img src="img/7.7_bg5.png">
58 | 				<img src="img/7.7_bg6.png">
59 | 			</div>
60 | 		</li>
61 | 		<li>
62 | 			<div>
63 | 				<img src="img/7.7_bg7.png">
64 | 				<img src="img/7.7_bg8.png">
65 | 			</div>
66 | 		</li>
67 | 		<li>
68 | 			<div>
69 | 				<img src="img/7.7_bg9.png">
70 | 				<img src="img/7.7_bg10.png">
71 | 			</div>
72 | 		</li>
73 | 		<li>
74 | 			<div>
75 | 				<img src="img/7.7_bg11.png">
76 | 				<img src="img/7.7_bg12.png">
77 | 			</div>
78 | 		</li>
79 | 	</ul>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/11.4-图片随机切换.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <meta charset="UTF-8">
  5 | <title>图片排序</title>
  6 | <style>
  7 | #btn {width: 1008px; height: 60px; background: #F1F1F1; margin: 0 auto; text-align: center; }
  8 | #btn li {display: inline-block; background: #009999; color: #fff; padding: 8px 20px; font-size: 14px; font-weight: bold; font-family: '微软雅黑'; margin-top: 12px; cursor: pointer; }
  9 | #btn li:hover {opacity: 0.5; }
 10 | #showbox {width: 988px; margin: 0 auto; background: #f1f1f1; overflow: hidden; padding: 10px; }
 11 | #showbox li {float: left; padding: 10px; background: #fff; border: 1px solid #f1f1f1; }
 12 | h2 {font-family: '微软雅黑'; font-size: 16px; font-weight: bold; color: #00518D; text-align: center; background: #f1f1f1; padding-top: 5px; padding-bottom: 5px; }
 13 | </style>
 14 | <script>
 15 | window.onload = function(){
 16 | 	var aBtn = document.getElementById('btn').getElementsByTagName('li'),
 17 | 		oShowbox = document.getElementById('showbox'),
 18 | 		aLi = oShowbox.getElementsByTagName('li'),
 19 | 		flag = true,
 20 | 		arr = [],
 21 | 		str = '';
 22 | 
 23 | 	for(var i=0; i<aLi.length; i++){
 24 | 		arr.push(aLi[i]);
 25 | 	}
 26 | 
 27 | 	aBtn[0].onclick = function(){
 28 | 		
 29 | 		arr.reverse();			
 30 | 		
 31 | 		str = '';
 32 | 		for(var i=0; i<arr.length; i++){
 33 | 			
 34 | 			str += '<li>' + arr[i].innerHTML + '</li>';
 35 | 		}
 36 | 		oShowbox.innerHTML = str;
 37 | 
 38 | 		this.innerHTML = flag ? '从小到大' : '从大到小';
 39 | 		flag = !flag;
 40 | 	}
 41 | 
 42 | 	aBtn[1].onclick = function(){
 43 | 		var arr2 = [];
 44 | 		for(var i=0; i<aLi.length; i++){
 45 | 			arr2.push(aLi[i]);
 46 | 		}
 47 | 		arr2.sort(function(a, b){
 48 | 			return Math.random() - 0.5;
 49 | 		})
 50 | 		
 51 | 		str = '';
 52 | 		for(var i=0; i<arr2.length; i++){
 53 | 			
 54 | 			str += '<li>' + arr2[i].innerHTML + '</li>';
 55 | 		}
 56 | 		oShowbox.innerHTML = str;
 57 | 	}	
 58 | }
 59 | </script>
 60 | </head>
 61 | <body>
 62 | 	<ul id="btn">
 63 | 		<li>从大到小</li>
 64 | 		<li>打乱顺序</li>
 65 | 	</ul>
 66 | 	<ul id="showbox">
 67 | 		<li>
 68 | 			<img src="img/11.4-bg1.jpg">
 69 | 			<h2>1-温馨办公</h2>
 70 | 		</li>
 71 | 		<li>
 72 | 			<img src="img/11.4-bg2.jpg">
 73 | 			<h2>2-游戏桌面</h2>
 74 | 		</li>
 75 | 		<li>
 76 | 			<img src="img/11.4-bg3.jpg">
 77 | 			<h2>3-汽车摇滚</h2>
 78 | 		</li>
 79 | 		<li>
 80 | 			<img src="img/11.4-bg4.jpg">
 81 | 			<h2>4-狭路相逢</h2>
 82 | 		</li>
 83 | 		<li>
 84 | 			<img src="img/11.4-bg5.jpg">
 85 | 			<h2>5-棒球小子</h2>
 86 | 		</li>
 87 | 		<li>
 88 | 			<img src="img/11.4-bg6.jpg">
 89 | 			<h2>6-球鞋动力</h2>
 90 | 		</li>
 91 | 		<li>
 92 | 			<img src="img/11.4-bg7.jpg">
 93 | 			<h2>7-游戏官网</h2>
 94 | 		</li>
 95 | 		<li>
 96 | 			<img src="img/11.4-bg8.jpg">
 97 | 			<h2>8-指尖社区</h2>
 98 | 		</li>
 99 | 	</ul>
100 | </body>
101 | </html>


--------------------------------------------------------------------------------
/2.1-10行换行.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>test</title>
 6 | <style type="text/css">
 7 | div{width:50px; height:50px; background:red;position:absolute;top:0;left:0;font-size: 30px; text-align: center; line-height: 50px; color:orange;}
 8 | </style>
 9 | <script type="text/javascript">
10 | window.onload = function(){
11 | 	var oDiv = document.getElementsByTagName('div');
12 | 	for(var i=0;i<=99;i++){
13 | 		document.body.innerHTML += '<div>'+i+'</div>';
14 | 
15 | };
16 | 	for(var i=0;i<=99;i++){
17 | 		var j = Math.floor(i/10);
18 | 		var k = i%10;
19 | 		oDiv[i].style.left = k*60 +'px';
20 | 		oDiv[i].style.top = j*60 +'px';
21 | 	}
22 | 
23 | 
24 | }
25 | </script>
26 | </head>
27 | <body>
28 | 
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/2.2-10行换行2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>test</title>
 6 | <style type="text/css">
 7 | div{width:50px; height:50px; background:red;position:absolute;top:0;left:0;font-size: 30px; text-align: center; line-height: 50px; color:orange;}
 8 | </style>
 9 | <script type="text/javascript">
10 | window.onload = function(){
11 | 	var oDiv = document.getElementsByTagName('div');
12 | 	var o = 7;
13 | 	for(var i=0;i<o;i++){
14 | 		for(var j=0;j<o;j++){
15 | 			var k = i*o+j;
16 | 			document.body.innerHTML += '<div>'+k+'</div>';
17 | 			oDiv[k].style.left = 10+j*60 +'px';
18 | 			oDiv[k].style.top = 10+i*60 +'px';
19 | 		};
20 | 	};
21 | 
22 | }
23 | </script>
24 | </head>
25 | <body>
26 | 
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/2.4-W效果.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>test</title>
 6 | <style type="text/css">
 7 | div{width:50px; height:50px; background:red;position:absolute;top:0;left:0;font-size: 30px; text-align: center; line-height: 50px; color:orange;}
 8 | </style>
 9 | <script type="text/javascript">
10 | window.onload = function(){
11 | 	var oDiv = document.getElementsByTagName('div');
12 | 	var o = 9;
13 | 	var k=o;
14 | 
15 | 	for(var i=0;i<o;i++){	
16 | 		document.body.innerHTML += '<div>'+i+'</div>';
17 | 		oDiv[i].style.left = 10+i*60 +'px';	
18 | 		oDiv[i].style.top = 10+i*60 +'px';
19 | 	};
20 | 	for(var j=0;j<o;j++){	
21 | 		k--;
22 | 		document.body.innerHTML += '<div>'+j+'</div>';
23 | 		oDiv[j+o].style.left = 10+(j+o)*60 +'px';	
24 | 		oDiv[j+o].style.top = 10+(k)*60 +'px';
25 | 	};
26 | 		for(var j=0;j<o;j++){	
27 | 		document.body.innerHTML += '<div>'+j+'</div>';
28 | 		oDiv[j+2*o].style.left = 10+(j+2*o)*60 +'px';	
29 | 		oDiv[j+2*o].style.top = 10+(j)*60 +'px';
30 | 	};
31 | 	var k=o;
32 | 		for(var j=0;j<o;j++){
33 | 		k--;	
34 | 		document.body.innerHTML += '<div>'+j+'</div>';
35 | 		oDiv[j+3*o].style.left = 10+(j+3*o)*60 +'px';	
36 | 		oDiv[j+3*o].style.top = 10+(k)*60 +'px';
37 | 	};
38 | 
39 | 	
40 | 
41 | 
42 | 
43 | }
44 | </script>
45 | </head>
46 | <body>
47 | 
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/2.5-鼠标划过.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>鼠标划过</title>
 6 | <style type="text/css">
 7 | *{margin:0;border:0;padding:0;}
 8 | li { width:110px; height:164px; margin-right:30px;margin-top: 70px; background:#f1f1f1 url(img/2_bg1.png) no-repeat; position:relative; display: inline-block;z-index: none;}
 9 | ul div { width:346px; height:177px;background:url(img/2_bg2.png) no-repeat; position:absolute; top:-75px; left:10px; z-index:10;display: none;}
10 | </style>
11 | <script type="text/javascript">
12 | 	window.onload = function(){
13 | 
14 | 		var aLi = document.getElementsByTagName('li');
15 | 
16 | 		for(var i=0; i<aLi.length;i++){
17 | 			aLi[i].onmouseover = function(){
18 | 				this.getElementsByTagName('div')[0].style.display = 'block';
19 | 			}
20 | 			aLi[i].onmouseout = function(){
21 | 				this.getElementsByTagName('div')[0].style.display = 'none';
22 | 			}
23 | 		};
24 | 
25 | 	}
26 | </script>
27 | </head>
28 | <body>
29 | <ul id="list1">
30 | 	<li><div></div></li>
31 | 	<li><div></div></li>
32 | 	<li><div></div></li>
33 | 	<li><div></div></li>
34 | 	<li><div></div></li>
35 | 	<li><div></div></li>
36 | </ul>		
37 | <ul id="list2">
38 | 	<li><div></div></li>
39 | 	<li><div></div></li>
40 | 	<li><div></div></li>
41 | 	<li><div></div></li>
42 | 	<li><div></div></li>
43 | 	<li><div></div></li>
44 | </ul>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/2.6-新闻实例.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Document</title>
 6 | <script type="text/javascript">
 7 | window.onload = function(){
 8 | 	var oBtn = document.getElementById('btn1');
 9 | 	var oUl = document.getElementById('list');
10 | 	var arr = [
11 | 	'山西省委附近多次爆炸 官方称尚不确定是恐怖袭击',
12 | 	'甘肃张掖明令禁止转基因 书记:无力辨别只能禁止',
13 | 	'多地制定雾霾预案限行限排被批治标不治本',
14 | 	'韩媒抱怨中国雾霾侵袭韩国 称其为"黑色灾难" ',
15 | 	'伊朗革命卫队高官在叙利亚当"志愿者"被杀(图)'
16 | 	];
17 | 
18 | 	/*
19 | 
20 | 	1.从按钮下手
21 | 		oBtn.disabled = true;
22 | 		oBtn.display = 'none';
23 | 	2.先清空再生成
24 | 	3.判断
25 | 		var onOff =true;
26 | 
27 | 	*/
28 | 
29 | 	var onOff =true;
30 | 
31 | 	oBtn.onclick = function(){
32 | 		if(onOff){
33 | 			for(var i=0;i<arr.length;i++){
34 | 				oUl.innerHTML +='<li>'+arr[i]+'</li>';
35 | 			};
36 | 			onOff = false;
37 | 		};
38 | 	};
39 | 
40 | 
41 | 
42 | 
43 | }
44 | </script>	
45 | </head>
46 | <body>
47 | 	<input id="btn1" type = "buttton" value="自动生成5条新闻" />
48 | 	<ul id="list"></ul>
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/2.7-自动生成10个li.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Document</title>
 6 | <style type="text/css">
 7 | li{
 8 | 	height:100px;
 9 | 	width:100px;
10 | 	background:red;
11 | 	float:left;
12 | 	margin-left:20px;
13 | 	list-style: none;
14 | }	
15 | </style>
16 | <script type="text/javascript">
17 | 	window.onload = function(){
18 | 		var oBtn = document.getElementById('btn');
19 | 		var oList = document.getElementById('list');
20 | 		var oLi = document.getElementsByTagName('li');
21 | 		var arr = ['white','black','green','yellow','blue'];
22 | 		oBtn.onclick = function(){
23 | 			for(var i=0;i<10;i++){
24 | 				oList.innerHTML += '<li>'+i+'</li>'; 
25 | 			};
26 | 			for(var i=0;i<10;i++){
27 | 				oLi[i].style.background = arr[i%arr.length];
28 | 			}
29 | 		};
30 | 	}
31 | </script>
32 | </head>
33 | <body>
34 | <input id="btn" type="button" value="自动生成10个li" />
35 | <ul id="list"></ul>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/2.8-自动生成10个v字.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>自动生成V字</title>
 6 | <style type="text/css">
 7 | 
 8 | div{
 9 | 	width:50px;
10 | 	height:50px;
11 | 	background:red;
12 | 	position:absolute;
13 | 	left:0;
14 | 	top:0;
15 | 
16 | }
17 | #list{
18 | 	display: block;
19 | 	margin-top: 30px;
20 | 	position: absolute;
21 | }
22 | </style>
23 | <script type="text/javascript">
24 | 	window.onload = function(){
25 | 	var oDiv = document.getElementsByTagName('div');
26 | 	var oBtn = document.getElementById('btn');
27 | 	var oList = document.getElementById('list');
28 | 	var o = 3;
29 | 	var k=o;
30 | 	var num = 0;
31 | 	oBtn.onclick = function(){
32 | 		if(num=0){
33 | 			for(var i=0;i<o;i++){	
34 | 				oList.innerHTML += '<div>'+i+'</div>';
35 | 				oDiv[i].style.left = 10+i*60 +'px';	
36 | 				oDiv[i].style.top = 10+i*60 +'px';
37 | 			};
38 | 			for(var j=0;j<o;j++){	
39 | 				k--;
40 | 				oList.innerHTML += '<div>'+j+'</div>';
41 | 				oDiv[j+o].style.left = 10+(j+o)*60 +'px';	
42 | 				oDiv[j+o].style.top = 10+(k)*60 +'px';
43 | 			};				
44 | 		}else if(num=1){
45 | 			var k=o;
46 | 			for(var i=0;i<o;i++){	
47 | 				oList.innerHTML += '<div>'+i+'</div>';
48 | 				oDiv[i].style.left = 10+i*60 +'px';	
49 | 				oDiv[i].style.top = 10+i*60 +'px';
50 | 			};
51 | 			for(var j=0;j<o;j++){	
52 | 				k--;
53 | 				oList.innerHTML += '<div>'+j+'</div>';
54 | 				oDiv[j+o].style.left = 10+(k)*60 +'px';	
55 | 				oDiv[j+o].style.top = 10+(j+o)*60 +'px';
56 | 			};
57 | 		}else if(num=3){
58 | 			var k=o;
59 | 			for(var i=0;i<o;i++){
60 | 				k--;
61 | 				oList.innerHTML += '<div>'+i+'</div>';
62 | 				oDiv[i].style.left = 10+k*60 +'px';	
63 | 				oDiv[i].style.top = 10+i*60 +'px';
64 | 			};
65 | 			for(var j=0;j<o;j++){		
66 | 				oList.innerHTML += '<div>'+j+'</div>';
67 | 				oDiv[j+o].style.left = 10+(j+o)*60 +'px';	
68 | 				oDiv[j+o].style.top = 10+(j)*60 +'px';
69 | 			};	
70 | 		};
71 | 	num++;
72 | 	};
73 | 	
74 | }
75 | </script>
76 | </head>
77 | <body>
78 | 	<input id="btn" type="button" value="自动生成V字"/>
79 | 	<li id="list"></li>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/2.9-自动生成100个div.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>Document</title>
 6 | <style type="text/css">
 7 | li{
 8 | 	display: block;
 9 | 	height:50px;
10 | 	width:50px;
11 | 	background:red;
12 | 	top:0;
13 | 	left:0;
14 | 	margin:50px;
15 | 	list-style: none;
16 | 	position: absolute;
17 | }	
18 | </style>
19 | <script type="text/javascript">
20 | 	window.onload = function(){
21 | 		var oBtn = document.getElementById('btn');
22 | 		var oList = document.getElementById('list');
23 | 		var oDiv = document.getElementsByTagName('li');
24 | 		var arr = ['orange','black','green','yellow','blue'];
25 | 		oBtn.onclick = function(){
26 | 			var o = 10;
27 | 			for(var i=0;i<o;i++){
28 | 				for(var j=0;j<o;j++){
29 | 					var k = i*o+j;
30 | 					oList.innerHTML += '<li>'+k+'</li>';
31 | 					oDiv[k].style.left = 10+j*60 +'px';
32 | 					oDiv[k].style.top = 10+i*60 +'px';
33 | 				};
34 | 			};
35 | 			for(var i=0;i<100;i++){
36 | 				oDiv[i].style.background = arr[i%arr.length]
37 | 			}
38 | 		};
39 | 	}
40 | </script>
41 | </head>
42 | <body>
43 | <input id="btn" type="button" value="自动生成100个li" />
44 | <ul id="list"></ul>
45 | </body>
46 | </html>


--------------------------------------------------------------------------------
/3.1-带缩略图的图片切换效果.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <meta charset="UTF-8">
  5 | <title>带缩略图的轮播图</title>
  6 | <style type="text/css">
  7 | *{padding:0; margin:0;}
  8 | ul,li{list-style:none;}
  9 | a{text-decoration:none;}
 10 | a:hover{text-decoration: underline;}
 11 | 
 12 | #pic{position:relative;width:350px;height:250px; margin:0 auto;}
 13 | #pic #prev{opacity: 0.5; text-aLign:center; font-size: 25px; border-radius: 78.5px;position:absolute; top:110px; left:0;width:30px; height:30px; background:yellow;}
 14 | #pic #next{opacity: 0.5; text-aLign:center; font-size: 25px; border-radius: 78.5px;position:absolute; top:110px; right:0;width:30px; height:30px; background:yellow;}
 15 | #pic ul{position:absolute; bottom:-40px;left:125px;}
 16 | #pic li{margin-right:20px;float:left;position:relative;border-radius:78.5px;width:10px;height:10px;background:gray;}
 17 | #pic .active{background:green;}
 18 | #pic p{position:absolute; top:0; left:0; width:350px; text-aLign:center; color:white;}
 19 | #pic li div{position:absolute;top:-100px;left:-50px;opacity:0.9;background:gray;width:120px;height:85px;display:none;}
 20 | #pic div img{position:absolute;top:5px;left:7.5px;width:105px;height:75px;}
 21 | #pic img{width:350px;height:250px;}
 22 | </style>
 23 | <script type="text/javascript">
 24 | window.onload = function(){
 25 | 	/*
 26 | 	分析：
 27 | 	1.中间图片切换用点击事件切换路径实现
 28 | 	2.缩略图用鼠标划过显示当前li下的div
 29 | 	3.图片路径放在一个数组里，直接调用
 30 | 	4.通过自定义属性index给li动态添加索引
 31 | 	5.active样式通过每次清除className动态添加效果
 32 | 	6.通num来控制当前页码
 33 | 	7.将初始化代码封装
 34 | 	*/
 35 | 	var oDiv = document.getElementById('pic');
 36 | 	var oPrev = document.getElementById('prev');
 37 | 	var oNext = document.getElementById('next');
 38 | 	var oP = oDiv.getElementsByTagName('p')[0];
 39 | 	var oUl = oDiv.getElementsByTagName('ul')[0];//必须定位到第一个ul，否则则是整个页面所有的ul集合
 40 | 	var oImg = oDiv.getElementsByTagName('img')[0];
 41 | 	var aImg = oUl.getElementsByTagName('img');
 42 |  	var aLi = oUl.getElementsByTagName('li');
 43 | 
 44 | 	var arrUrl = ['img2/1.png','img2/2.png','img2/3.png','img2/4.png'];
 45 | 	var num = 0;
 46 | 	var len = arrUrl.length;
 47 | 
 48 | 	//动态添加li
 49 | 	for(var i=0;i<len;i++){
 50 | 	oUl.innerHTML += '<li><div><img src=""/></div></li>'
 51 | 	}
 52 | 
 53 | 	//动态添加active
 54 | 	function addActive(){
 55 | 		for( var i=0; i<aLi.length; i++ ){
 56 | 			aLi[i].className = '';
 57 | 		}
 58 | 		aLi[num].className = 'active';
 59 | 	}
 60 | 
 61 | 	//初始化函数
 62 | 	function fnTag(){
 63 | 		oImg.src = arrUrl[num];
 64 | 		oP.innerHTML = 1+num+' / '+len;
 65 | 		addActive();
 66 | 	}
 67 | 	fnTag();
 68 | 
 69 | 	//给li添加索引,动态添加active，并实现图片切换
 70 | 	for(var i=0;i<len;i++){
 71 | 		aLi[i].index = i;
 72 | 		aLi[i].onclick = function(){
 73 | 			for(var i=0;i<len;i++){
 74 | 				aLi[i].className = '';
 75 | 			}
 76 | 			oImg.src = arrUrl[this.index];
 77 | 			this.className = 'active';
 78 | 			oP.innerHTML = 1+this.index+'/'+len;
 79 | 		};
 80 | 	};
 81 | 
 82 | 	//添加上一张点击切换事件
 83 | 	oNext.onclick = function(){
 84 | 		num++;
 85 | 		if(num === len){
 86 | 			num = 0;
 87 | 		};
 88 | 		fnTag();
 89 | 	};
 90 | 
 91 | 	//添加下一张点击切换事件
 92 | 	oPrev.onclick = function(){
 93 | 		num--
 94 | 		if(num === -1){
 95 | 			num = len-1;
 96 | 		};
 97 | 		fnTag();
 98 | 	};
 99 |   
100 |   	//添加鼠标划过划出缩略图的效果
101 |   	for(var i=0;i<len;i++){
102 |   		aLi[i].onmouseover = function(){
103 |   			var aDiv = this.getElementsByTagName('div');
104 |   			aDiv[0].style.display = 'block';
105 |   			aImg[this.index].src = arrUrl[this.index];
106 |   		};
107 |   		aLi[i].onmouseout = function(){
108 |   			var aDiv = this.getElementsByTagName('div');
109 |   			aDiv[0].style.display = 'none';
110 |   		};
111 |   	}
112 |  }
113 | </script>
114 | </head>
115 | <body>
116 | 	<div id="pic">
117 | 	  <p>图片数量正在加载...</p>
118 | 	  <a id="prev" href="javascript:;"> < </a>
119 | 	  <a id="next" href="javascript:;"> > </a>
120 | 	  <img src=""/>
121 | 	  <ul>
122 | 	  </ul>
123 | 	  <div class="ha"></div>
124 | 	</div>
125 | </body>
126 | </html>	


--------------------------------------------------------------------------------
/3.2-控制多组图片切换.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>控制多组图片切换</title>
  6 | <style type="text/css">
  7 | *{margin:0; padding:0;}
  8 | a{text-decoration: none;}
  9 | body{position:relative; margin:0; padding:0;}
 10 | #btn1{position:absolute; top:20px; left:20%;}
 11 | #btn2{position:absolute; top:20px; left:25%;}
 12 | #group1{width:500px; height:369px;position:absolute; top:50px; left:180px;}
 13 | #group2{width:418px; height:369px;position:absolute; top:50px; left:700px;}
 14 | p{text-align: center;}
 15 | span{display:none;position:absolute;top:100px;}
 16 | .prev_bg,.next_bg { position:absolute; top:20px; z-index:5; width:200px; height:369px;}
 17 | .prev,.prev_bg{ left:0;}
 18 | .next,.next_bg{ right:0;}
 19 | 
 20 | </style>
 21 | <script type="text/javascript">
 22 | window.onload = function(){
 23 | 	/*
 24 | 	分析
 25 | 	1.左右两个div分别用换src的方式实现切换图片
 26 | 	2.用num1 num2定义当前左右两个切换图片的张数
 27 | 	3.分别给两个button,连个prev next添加点击事件
 28 | 	4.给两个prev和next添加onmouseover和onmouseout事件
 29 | 	5.用a标签控制移入移出
 30 | 	6.封装换src的函数
 31 | 	*/
 32 | 	var oBtn1 = document.getElementById('btn1');
 33 | 	var oBtn2 = document.getElementById('btn2');
 34 | 	var oGroup1 = document.getElementById('group1');
 35 | 	var oGroup2 = document.getElementById('group2');
 36 | 	var oImg1 = oGroup1.getElementsByTagName('img')[0];
 37 | 	var oImg2 = oGroup2.getElementsByTagName('img')[0];
 38 | 	var oP = document.getElementsByTagName('p');
 39 | 	var oContain = document.getElementById('contain');
 40 | 
 41 | 	var num = 0;
 42 | 	var num2 = 0;
 43 | 	var arrUrl2 = ['img2/1.png', 'img2/2.png', 'img2/3.png', 'img2/4.png'];
 44 | 	var arrUrl1 = ['img2/3.2_1.jpg', 'img2/3.2_2.jpg', 'img2/3.2_3.jpg'];
 45 | 	var len1 = arrUrl1.length;
 46 | 	var len2 = arrUrl2.length;
 47 | 
 48 | 	//封装获取class的方法
 49 | 	function getByClass(oParent,sClass){
 50 | 		var aEle = oParent.getElementsByTagName('*');
 51 | 		var arr = [];
 52 | 
 53 | 		for(var i=0; i<aEle.length;i++)
 54 | 			if(aEle[i].className == sClass){
 55 | 				arr.push(aEle[i]);
 56 | 			}
 57 | 		return arr;
 58 | 	}
 59 | 
 60 | 	//封装第一组图片的切换
 61 | 	function fnTab1(){
 62 | 		oImg1.src = arrUrl1[num];
 63 | 		oP[0].innerHTML = num+1 + '/' + len1;
 64 | 		oP[1].innerHTML = '第一组第' + (num+1) + '张';
 65 | 	}
 66 | 
 67 | 	//封装第二组图片的切换
 68 | 	function fnTab2(){
 69 | 		oImg2.src = arrUrl2[num2];
 70 | 		oP[2].innerHTML = num2+1 + '/' + len2;
 71 | 		oP[3].innerHTML = '第一组第' + (num2+1) + '张';
 72 | 	}
 73 | 
 74 | 	fnTab1();
 75 | 	fnTab2();
 76 | 
 77 | 	var oPrev = getByClass(oContain,'prev');
 78 | 	var oPrevBg = getByClass(oContain,'prev_bg');
 79 | 	var oNext = getByClass(oContain,'next');
 80 | 	var oNextBg = getByClass(oContain,'next_bg');
 81 | 
 82 | 	//给页面所有prev和next添加移入移出事件
 83 | 	for(var i=0;i<oPrev.length;i++){
 84 | 		oPrev[i].index = i;
 85 | 		oPrevBg[i].index = i;
 86 | 		oNext[i].index = i;
 87 | 		oNextBg[i].index = i;
 88 | 		oPrevBg[i].onmouseover  = function(){
 89 | 			oPrev[this.index].style.display = 'block';
 90 | 		}
 91 | 		oPrevBg[i].onmouseout = function(){
 92 | 			oPrev[this.index].style.display = 'none';
 93 | 		}
 94 | 		oNextBg[i].onmouseover = function(){
 95 | 			oNext[this.index].style.display = 'block';
 96 | 		}
 97 | 		oNextBg[i].onmouseout = function(){
 98 | 			oNext[this.index].style.display = 'none';
 99 | 		}
100 | 	};
101 | 	
102 | 	//	给按钮添加前后切换的点击事件
103 | 	oPrevBg[0].onclick = function(){
104 | 		num--;
105 |   		if(num==-1){
106 |   			num=0;
107 |   		}
108 |   		fnTab1(); 
109 |   	};
110 |   	oNextBg[0].onclick = function(){
111 |   		num++;
112 | 		if(num==3){
113 | 			num=2;
114 | 		}
115 | 		fnTab1();
116 |   	};
117 |   	oPrevBg[1].onclick = function(){
118 | 	    num2--;
119 |  		if(num2==-1){
120 |  			num2=0;
121 |  		}
122 |  		fnTab2();
123 |  	};
124 |  	oNextBg[1].onclick = function(){
125 |  		num2++;
126 | 		if(num2==4){
127 | 		  num2=3;
128 | 		}
129 | 		fnTab2();
130 |  	};
131 |  	//给两个button添加成组的切换
132 |  	oBtn1.onclick = function(){
133 | 	    num--;
134 | 		if(num==-1){
135 | 		  num=2;
136 | 		}
137 | 		fnTab1();
138 | 		
139 | 		num2--;
140 | 		if(num2==-1){
141 | 		  num2=3;
142 | 		}
143 | 		fnTab2();
144 |   	}
145 |   
146 | 	oBtn2.onclick = function(){
147 | 	    num++;
148 | 		if(num==3){
149 | 		  num=0;
150 | 		}
151 | 		fnTab1();
152 | 		
153 | 		num2++;
154 | 		if(num2==4){
155 | 		  num2=0;
156 | 		}
157 | 		fnTab2();
158 |   	}
159 | }
160 | </script>	
161 | </head>
162 | <body>
163 | 	<div id="contain">
164 | 		<input id="btn1" type="button" value="前一组" />
165 | 		<input id="btn2" type="button" value="后一组" />
166 | 		<div id='group1'>
167 | 			<p>图片数量正在加载...</p>
168 | 			<img src="img2/3.2_1.jpg" />
169 | 			<a class="prev_bg" ></a>
170 | 			<a class="next_bg" ></a>
171 | 			<span class="prev"><img src="img2/prev.png" /></span>
172 | 			<span class="next"><img src="img2/next.png" /></span>
173 | 			<p>图片描述正在加载...</p>
174 | 		</div>
175 | 		<div id="group2">
176 | 			<p>图片数量正在加载...</p>
177 | 			<img src="img2/1.png" />
178 | 			<a class="prev_bg" ></a>
179 | 			<a class="next_bg" ></a>
180 | 			<span class="prev"><img src="img2/prev.png" /></span>
181 | 			<span class="next"><img src="img2/next.png" /></span>
182 | 			<p>图片描述正在加载...</p>
183 | 		</div>
184 | 	</div>
185 | </body>
186 | </html>


--------------------------------------------------------------------------------
/4.1-找到合适的qq号码.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 | <title>找到合适的qq号码</title>
 6 | <script type="text/javascript">
 7 | /*
 8 | 	1.判断input的value值是否为空
 9 | 	2.判断typeof === 'number' && 等于本身 或者直接用isNaN
10 | 	3.利用charAt(0) === 0 判断首位是否为0
11 | 	4.利用parseInt == parseFloat
12 | 	5.调用数字的长度
13 | */
14 | 	window.onload = function(){
15 | 		var oInput = document.getElementsByTagName('input')[0];
16 | 		var oBtn = document.getElementsByTagName('input')[1];
17 | 		var str = '';
18 | 
19 | 		oBtn.onclick = function(){
20 | 			str =  oInput.value;
21 | 			if(str == ''){
22 | 				alert('请输入QQ号码：');
23 | 			}else if(isNaN(str)){
24 | 				alert('请输入数字');
25 | 			}else if(Number(str.charAt(0)) == 0){
26 | 				alert('首位数字不能为0');
27 | 			}else if(!(parseInt(str) == parseFloat(str))){
28 | 				alert('不能输入小数');
29 | 			}else if((str.length<5) || (str.length>10)){
30 | 				alert('请输入5位以上，10位以下的数字');
31 | 			}else{
32 | 				alert('恭喜你，验证成功');
33 | 			};
34 | 		};
35 | 	}
36 | 
37 | </script>
38 | </head>
39 | <body>
40 | 
41 | 请输入QQ号码：<input type="text" />
42 | <input type="button" value="判断" />
43 | 
44 | 
45 | <br />
46 | 1、有没有输入<br />
47 | 2、输入的是不是数字<br />
48 | 3、不能有0在前面<br />
49 | 4、不能是小数<br />
50 | 5、输入的数字必须在5位以上、10位以内<br />
51 | 
52 | </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/4.2-找到合适的值 (1).html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 | <title>找到合适的值</title>
 6 | 
 7 | <script>
 8 | window.onload = function(){
 9 | /*
10 | 	1、找到arr里所有的数字：-98765, 34, -2, 0, 5
11 | 	2、找到可以转成数字的：'100px', -98765, 34, -2, 0, '300', '23.45元',  5 
12 | 	3、把转成数字以后，最大值判断出来：300
13 | 	4、把 NaN 所在的位置找出来：1 14 17  19
14 | 
15 | 	//分析：1、找到所有数字可以使用for循环遍历再用number判断
16 | 			2、找到数字和字符串然后用isNaN判断
17 | 			3、转换成数字后，最大值使用排序判断出来
18 | 			4、给数组加上索引，判断NaN并返回索引值
19 | 
20 | */	
21 | var arr = [ '100px', 'abc'-6, [], -98765, 34, -2, 0, '300', , function(){alert(1);}, null, document, [], true, '200px'-30,'23.45元', 5, Number('abc'), function(){ alert(3); }, 'xyz'-90 ];
22 | 
23 | var num = 0;
24 | var orr = [];
25 | var prr = [];
26 | 
27 | for(var i=0;i<arr.length;i++){
28 | 	if(typeof(arr[i]) === 'number' && !isNaN(arr[i])){
29 | 		//document.writeln(arr[i]);
30 | 	};
31 | 	if(isNaN(arr[i])){
32 | 		prr.push(i);
33 | 	}
34 | 	if(typeof(arr[i]) === 'number' && !isNaN(arr[i]) || typeof(arr[i]) === 'string'){
35 | 		document.writeln(arr[i]);
36 | 		orr.push(parseFloat(arr[i])); 
37 | 	};
38 | };
39 | 
40 | 	for(var i=0;i<orr.length;i++){
41 | 		if(orr[i+1]>orr[i]){
42 | 			num = orr[i+1];
43 | 		}
44 | 	}
45 | //alert(num);
46 | //console.log(prr);
47 | }
48 | 
49 | </script>
50 | 
51 | </head>
52 | 
53 | <body>
54 | </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/5.1-商品列表计算器与统计.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>商品列表</title>
  6 | <script type="text/javascript">
  7 | window.onload = function(){
  8 | 
  9 | /*
 10 | 	1.商品合计获取所有strong的innerHTML相加
 11 | 	2.用循环获取到所有的小计，经行相加
 12 | 	3.将买的单价进行比较
 13 | 
 14 | */
 15 | 	var oUl = document.getElementById('list');
 16 | 	var aLi = oUl.getElementsByTagName('li');
 17 | 	var oP = document.getElementsByTagName('p')[0];
 18 | 
 19 | 	for(var i=0;i<aLi.length;i++){
 20 | 		fn1(aLi[i]);
 21 | 	}
 22 | 
 23 | 	function fn1(oLi){
 24 | 		var aBtn = oLi.getElementsByTagName('input');
 25 | 		var oStrong = oLi.getElementsByTagName('strong')[0];
 26 | 		var oEm = oLi.getElementsByTagName('em')[0];
 27 | 		var oSpan = oLi.getElementsByTagName('span')[0];
 28 | 		var n1 = Number(oStrong.innerHTML);		//字符串类型'0' ==>0
 29 | 		var n2 = parseFloat(oEm.innerHTML);	//'12.5';=>12.5
 30 | 
 31 | 		aBtn[1].onclick = function(){
 32 | 			n1++;
 33 | 			oStrong.innerHTML = n1;
 34 | 			oSpan.innerHTML = n1 * n2;
 35 | 			fn2();
 36 | 		};
 37 | 		aBtn[0].onclick = function(){
 38 | 			n1--;
 39 | 			if(n1<0){
 40 | 				n1 = 0;
 41 | 			}
 42 | 			oStrong.innerHTML = n1;
 43 | 			oSpan.innerHTML = n1 * n2 ;
 44 | 			fn2();
 45 | 		};
 46 | 
 47 | 	}
 48 | 
 49 | 	function fn2(){
 50 | 		var bStrong = oUl.getElementsByTagName('strong');
 51 |         var bSpan = oUl.getElementsByTagName('span');
 52 |         var bEm = [];
 53 |         var total = 0;
 54 |         var cost = 0;
 55 | 
 56 |         for(var i=0;i<aLi.length;i++){
 57 |         	total += parseInt(bStrong[i].innerHTML);
 58 |         	cost += parseFloat(bSpan[i].innerHTML);
 59 |         	if(Number(bStrong[i].innerHTML)){
 60 |         	bEm[bEm.length] = parseFloat(oUl.getElementsByTagName('em')[i].innerHTML);
 61 |         }
 62 |         	bEm.sort(function(a, b){return b-a});
 63 |         	oP.innerHTML = "商品合计共：" + total + "件，共花费了：" + cost + "元" + "<br />" + 
 64 | "其中最贵的商品单价是：" + bEm[0] + "元。"
 65 |         }
 66 | 
 67 | 	}
 68 | }
 69 | </script>
 70 | </head>
 71 | <body>
 72 | 	<ul id="list">
 73 | 		<li>
 74 | 			<input type="button" value='-' />
 75 | 			<strong>0</strong>
 76 | 			<input type="button" value='+' />
 77 | 			单价：<em>12.5</em>元
 78 | 			小计：<span>0</span>元
 79 | 		</li>
 80 | 		<li>
 81 | 			<input type="button" value='-' />
 82 | 			<strong>0</strong>
 83 | 			<input type="button" value='+' />
 84 | 			单价：<em>10.5</em>元
 85 | 			小计：<span>0</span>元
 86 | 		</li>
 87 | 		<li>
 88 | 			<input type="button" value='-' />
 89 | 			<strong>0</strong>
 90 | 			<input type="button" value='+' />
 91 | 			单价：<em>8.5</em>元
 92 | 			小计：<span>0</span>元
 93 | 		</li>
 94 | 		<li>
 95 | 			<input type="button" value='-' />
 96 | 			<strong>0</strong>
 97 | 			<input type="button" value='+' />
 98 | 			单价：<em>8</em>元
 99 | 			小计：<span>0</span>元
100 | 		</li>
101 | 		<li>
102 | 			<input type="button" value='-' />
103 | 			<strong>0</strong>
104 | 			<input type="button" value='+' />
105 | 			单价：<em>2</em>元
106 | 			小计：<span>0</span>元
107 | 		</li>
108 | 	</ul>
109 | 
110 | 	<p>
111 | 		商品合计共：0件，共花了：0元<br />
112 | 
113 | 		其中最贵的商品单价是：0元
114 | 	</p>
115 | 
116 | </body>
117 | </html>


--------------------------------------------------------------------------------
/5.2-搜狐视频纪录片列表展示.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>搜狐视频记录片列表展示</title>
  6 | 	<link rel="stylesheet" type="text/css" href="css/base.css">
  7 | <style type="text/css">
  8 | #wrap{width:268px;background:#dee7e7;margin:0 auto; padding:0 6px;font-family: "微软雅黑"}
  9 | #top{width:268px;height:38px;color:#185273;}
 10 | h2{display:block;font-size: 18px;margin-left:12px; width:148px;height:32px;float:left;border-bottom: 1px solid #94bdd6;padding-top: 5px;}
 11 | #list{width:106px;height:24px;float:right;margin-top:12px;border:1px solid #94bdd6;}
 12 | #list li{float:left;width:34px;height:24px;border-right:1px solid #94bdd6; cursor: pointer;}
 13 | #list li:last-child{border-right: none;}
 14 | .active{color: #000; font-weight: bold; background: #fff; border-bottom: 1px solid #fff !important; }
 15 | #date,#week,#all{display: none;}
 16 | #date li,#week li,#all li{width:256px;font-size: 12px;text-align: left;line-height: 28px;border-bottom:1px dashed #fff; position: relative;}
 17 | #date a,#week a,#all a{display: block;margin-left: 37px;display:block;} 
 18 | #date span,#week span,#all span{position:absolute;top:8px;left:14px;width:17px; height:13px;background:url(img/5.2_bg2.png) no-repeat;font-size: 10px;text-align: center;line-height: 14px;font-weight: bold;color:#fff;display:inline-block;z-index: 1;}
 19 | #date div,#week div,#all div{height:225px;display: none;height: 82px; overflow: hidden;}
 20 | .bg1{background: url(img/5.2_bg1.png) no-repeat;}
 21 | .bg2{background: url(img/5.2_bg3.png) no-repeat;}
 22 | .show {display: block !important; }
 23 | </style>
 24 | <script type="text/javascript">
 25 | window.onload = function(){
 26 | /*
 27 | 	1.划过变换border
 28 | 	2.划过显示div
 29 | 
 30 | */
 31 | var oTop = document.getElementById('top');
 32 | var oList = document.getElementById('list');
 33 | var aList = oList.getElementsByTagName('li');
 34 | var oContact = document.getElementById('contact');
 35 | var oUl = oContact.getElementsByTagName('ul');
 36 | for (var i=0; i<oUl.length; i++) {
 37 | 	hover(oUl[i]);
 38 | }
 39 | function fnTab(num){
 40 | 	for(var i=0; i<aList.length; i++) {
 41 | 		aList[i].className = '';
 42 | 		oUl[i].className = '';
 43 | 	}
 44 | 	aList[num].className = 'active';
 45 | 	oUl[num].className = 'show';
 46 | }
 47 | //切换标签
 48 | for(var i=0;i<aList.length;i++){
 49 | 	aList[i].index = i;
 50 | 	aList[i].onclick = function(){
 51 | 		var num = this.index;
 52 | 		fnTab(num);
 53 | 	}
 54 | }
 55 | 
 56 | //划过显示
 57 | function hover(ul){
 58 | 	var aLi = ul.getElementsByTagName('li');
 59 | 	for(var i=0;i<aLi.length;i++){
 60 | 		aLi[i].onmouseover = function(){
 61 |             this.getElementsByTagName('a')[0].style.display = 'none';
 62 |             this.getElementsByTagName('div')[0].style.display = 'block';
 63 | 		}
 64 | 		aLi[i].onmouseout = function(){
 65 |             this.getElementsByTagName('a')[0].style.display = 'block';
 66 |             this.getElementsByTagName('div')[0].style.display = 'none';
 67 |          }
 68 | 
 69 | 	}
 70 | }
 71 | 
 72 | 
 73 | }
 74 | </script>
 75 | </head>
 76 | <body>
 77 | 	<div id="wrap">
 78 | 		<div id="top">
 79 | 			<h2>观看排行榜</h2>
 80 | 			<ul id="list" class="clearfix">
 81 | 				<li id="list1" class="active">每日</li>
 82 | 				<li id="list2">每周</li>
 83 | 				<li id="list3">全部</li>
 84 | 			</ul>
 85 | 		</div>
 86 | 		<div id="contact"> 
 87 | 			<ul id="date" class="show">
 88 | 				<li>
 89 | 					<span>1</span>
 90 | 					<a href="#">探索传世国宝的海外旅程之一</a>
 91 | 					<div class="bg1">
 92 | 					</div>
 93 | 				</li>
 94 | 				<li>
 95 | 					<span>2</span>
 96 | 					<a href="#">经典传奇，探索中国的历史事件</a>
 97 | 					<div class="bg1">
 98 | 					</div>
 99 | 				</li>
100 | 				<li >
101 | 					<span>3</span>
102 | 					<a href="#">眼界，展示普通人的曲折命运</a>
103 | 					<div class="bg1">
104 | 					</div>
105 | 				</li>
106 | 				<li>
107 | 					<span>4</span>
108 | 					<a href="#">档案：惊人事件后的离奇故事</a>
109 | 					<div class="bg1">
110 | 					</div>
111 | 				</li>
112 | 				<li>
113 | 					<span>5</span>
114 | 					<a href="#">世纪之最：震惊中国的20个top</a>
115 | 					<div class="bg1">
116 | 					</div>
117 | 				</li>
118 | 				<li>
119 | 					<span>6</span>
120 | 					<a href="#">身边的毛泽东：警卫员解释毛泽东</a>
121 | 					<div class="bg2">
122 | 					</div>
123 | 				</li>
124 | 				<li>
125 | 					<span>7</span>
126 | 					<a href="#">新电影传奇：每一个电影后面不为人知</a>
127 | 					<div class="bg2">
128 | 					</div>
129 | 				</li>
130 | 				<li>
131 | 					<span>8</span>
132 | 					<a href="#">探索传世国宝的海外旅程之一</a>
133 | 					<div class="bg2">
134 | 					</div>
135 | 				</li>
136 | 				<li>
137 | 					<span>9</span>
138 | 					<a href="#">纪实记录:讲述民国时期的谍战</a>
139 | 					<div class="bg2">
140 | 					</div>
141 | 				</li>
142 | 				<li>
143 | 					<span>10</span>
144 | 					<a href="#">动物世界：那些卖萌卖到死的宠物们</a>
145 | 					<div class="bg2">>
146 | 					</div>
147 | 				</li>
148 | 			</ul>
149 | 			<ul id="week" >
150 | 				<li>
151 | 					<span>1</span>
152 | 					<a href="#">每周传世国宝的海外旅程之一</a>
153 | 					<div class="bg1">
154 | 					</div>
155 | 				</li>
156 | 				<li>
157 | 					<span>2</span>
158 | 					<a href="#">每周传奇，探索中国的历史事件</a>
159 | 					<div class="bg1">
160 | 					</div>
161 | 				</li>
162 | 				<li >
163 | 					<span>3</span>
164 | 					<a href="#">每周，展示普通人的曲折命运</a>
165 | 					<div class="bg1">
166 | 					</div>
167 | 				</li>
168 | 				<li>
169 | 					<span>4</span>
170 | 					<a href="#">每周：惊人事件后的离奇故事</a>
171 | 					<div class="bg1">
172 | 					</div>
173 | 				</li>
174 | 				<li>
175 | 					<span>5</span>
176 | 					<a href="#">每周之最：震惊中国的20个top</a>
177 | 					<div class="bg1">
178 | 					</div>
179 | 				</li>
180 | 				<li>
181 | 					<span>6</span>
182 | 					<a href="#">每周的毛泽东：警卫员解释毛泽东</a>
183 | 					<div class="bg2">
184 | 					</div>
185 | 				</li>
186 | 				<li>
187 | 					<span>7</span>
188 | 					<a href="#">每周影传奇：每一个电影后面不为人知</a>
189 | 					<div class="bg2">
190 | 					</div>
191 | 				</li>
192 | 				<li>
193 | 					<span>8</span>
194 | 					<a href="#">每周传世国宝的海外旅程之一</a>
195 | 					<div class="bg2">
196 | 					</div>
197 | 				</li>
198 | 				<li>
199 | 					<span>9</span>
200 | 					<a href="#">每周记录:讲述民国时期的谍战</a>
201 | 					<div class="bg2">
202 | 					</div>
203 | 				</li>
204 | 				<li>
205 | 					<span>10</span>
206 | 					<a href="#">每周世界：那些卖萌卖到死的宠物们</a>
207 | 					<div class="bg2">
208 | 					</div>
209 | 				</li>	
210 | 			</ul>
211 | 			<ul id="all">
212 | 				<li>
213 | 					<span>1</span>
214 | 					<a href="#">传世国宝的海外旅程之一</a>
215 | 					<div class="bg1">
216 | 					</div>
217 | 				</li>
218 | 				<li>
219 | 					<span>2</span>
220 | 					<a href="#">传奇，探索中国的历史事件</a>
221 | 					<div class="bg1">
222 | 					</div>
223 | 				</li>
224 | 				<li >
225 | 					<span>3</span>
226 | 					<a href="#">，展示普通人的曲折命运</a>
227 | 					<div class="bg1">
228 | 					</div>
229 | 				</li>
230 | 				<li>
231 | 					<span>4</span>
232 | 					<a href="#">：惊人事件后的离奇故事</a>
233 | 					<div class="bg1">
234 | 					</div>
235 | 				</li>
236 | 				<li>
237 | 					<span>5</span>
238 | 					<a href="#">之最：震惊中国的20个top</a>
239 | 					<div class="bg1">
240 | 					</div>
241 | 				</li>
242 | 				<li>
243 | 					<span>6</span>
244 | 					<a href="#">的毛泽东：警卫员解释毛泽东</a>
245 | 					<div class="bg2">
246 | 					</div>
247 | 				</li>
248 | 				<li>
249 | 					<span>7</span>
250 | 					<a href="#">影传奇：每一个电影后面不为人知</a>
251 | 					<div class="bg2">
252 | 					</div>
253 | 				</li>
254 | 				<li>
255 | 					<span>8</span>
256 | 					<a href="#">传世国宝的海外旅程之一</a>
257 | 					<div class="bg2">
258 | 					</div>
259 | 				</li>
260 | 				<li>
261 | 					<span>9</span>
262 | 					<a href="#">记录:讲述民国时期的谍战</a>
263 | 					<div class="bg2">
264 | 					</div>
265 | 				</li>
266 | 				<li>
267 | 					<span>10</span>
268 | 					<a href="#">世界：那些卖萌卖到死的宠物们</a>
269 | 					<div class="bg2">
270 | 					</div>
271 | 				</li>
272 | 			</ul>
273 | 		</div>
274 | 	</div>
275 | </body>
276 | </html>


--------------------------------------------------------------------------------
/5.3-修改文本框的值.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>修改文本框的值</title>
  6 | <link rel="stylesheet" type="text/css" href="css/base.css" />
  7 | <style type="text/css">
  8 | #wrap{margin:0 auto;width:572px;}
  9 | #wrap div{width:572px;height:30px;background:#6ba542;}
 10 | #wrap div span{height:30px;margin-left: 20px;text-align: center;line-height: 30px;}
 11 | #list{border:1px solid #bddede;border-bottom: none;width:570px;}
 12 | #list li{width:570px;height:40px;background:#fff;border-bottom:1px solid #bddede;}
 13 | #list p{width:100px;height:30px;vertical-align:top;margin-top: 5px;margin-left: 30px;float:left;}
 14 | #list input{border:none;width:100px;height:30px;vertical-align:top;margin-top: 5px;margin-left: 30px;}
 15 | #list img{width:30px;height: 39px; vertical-align: top; cursor: pointer;}
 16 | #list span{margin-left: 20px; width:40px;height:40px;line-height: 40px;vertical-align:top;color:#429400;cursor: pointer;}
 17 | .hide{display: none;}
 18 | </style>
 19 | <script type="text/javascript">
 20 | window.onload = function(){
 21 | 	/*
 22 | 		1.对表单进行操作没有移入的时候显示信管创业基地
 23 | 		2.图片点击的时候图片隐藏，input的宽度增加，等输入结束，
 24 | 		点击取消恢复input无值的状态，画笔显示，
 25 | 		点击保存保存，input长度恢复，画笔显示。
 26 | 
 27 | 	*/
 28 | 
 29 | 	var oList = document.getElementById('list');
 30 | 	var oLi = oList.getElementsByTagName('li');
 31 | 	var oImg = oList.getElementsByTagName('img');
 32 | 	var oSpan = oList.getElementsByTagName('span');
 33 | 	var oInput = oList.getElementsByTagName('input');
 34 | 	var oP = oList.getElementsByTagName('p');
 35 | 	
 36 | 	//初始化界面
 37 | 	for(var i=0; i<oInput.length; i++) {
 38 |         oInput[i].value = oP[i].innerHTML;
 39 |         oInput[i].className = 'hide';
 40 |     };
 41 | 
 42 |     for(var i=0;i<oSpan.length;i++){
 43 |     	oSpan[i].className = 'hide';
 44 |     };
 45 | 
 46 |     for(var i=0;i<oImg.length;i++){
 47 |     	fn1(oLi[i]);
 48 |     }
 49 | 
 50 |     function fn1(li){
 51 |     	var aP = li.getElementsByTagName('p')[0];
 52 |     	var aInput = li.getElementsByTagName('input')[0];
 53 |     	var aSpan = li.getElementsByTagName('span');
 54 |     	var aImg = li.getElementsByTagName('img')[0];
 55 | 
 56 |     	aImg.onclick = function(){
 57 |     		aP.className = aImg.className =  'hide';
 58 |     		aInput.className = aSpan[0].className = aSpan[1].className = '';
 59 |     		aInput.style.border = "1px solid #a59c21" ;
 60 |     		aInput.style.width = "140px" ;
 61 |     	}
 62 | 
 63 |     	aSpan[0].onclick = function(){
 64 |     		aInput.className = aSpan[0].className = aSpan[1].className = 'hide';
 65 |     		aP.className = aImg.className =  '';
 66 |     		aInput.style.border = "none" ;
 67 |     		aInput.style.width = "100px" ;
 68 |     		aP.innerHTML = aInput.value;
 69 |     	}
 70 | 
 71 |     	aSpan[1].onclick = function(){
 72 |     		aP.className = aImg.className = '';
 73 |             aInput.className = aSpan[0].className = aSpan[1].className = 'hide';
 74 |             aInput.style.border = "none" ;
 75 |             aInput.style.width = "100px" ;
 76 |     	}
 77 |     	li.onmouseover = function(){
 78 |     		this.style.background = '#6fd12a';
 79 |     		aImg.src = 'img/5.3_bg3.png';
 80 |     	}
 81 |     	li.onmouseout = function(){
 82 |     		this.style.background = '#fff';
 83 |     		aImg.src = 'img/5.3_bg1.png';
 84 |     	}
 85 |     }
 86 | 
 87 | 
 88 | }
 89 | </script>
 90 | </head>
 91 | <body>
 92 | 	<div id="wrap">
 93 | 		<div><span>分类名称</span></div>
 94 | 		<ul id="list">
 95 | 			<li><p>信管创业基地</p><input type="text" / class="hide"><img src="img/5.3_bg1.png"><span>保存</span><span>取消</span></li>
 96 | 			<li><p>信管创业基地</p><input type="text" / class="hide"><img src="img/5.3_bg1.png"><span>保存</span><span>取消</span></li>
 97 | 			<li><p>信管创业基地</p><input type="text" / class="hide"><img src="img/5.3_bg1.png"><span>保存</span><span>取消</span></li>
 98 | 			<li><p>信管创业基地</p><input type="text" / class="hide"><img src="img/5.3_bg1.png"><span>保存</span><span>取消</span></li>
 99 | 
100 | 		</ul>
101 | 	</div>	
102 | </body>
103 | </html>


--------------------------------------------------------------------------------
/5.4-选项卡里套选项卡.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>选项卡里套选项卡</title>
  6 | <link rel="stylesheet" type="text/css" href="css/base.css" />
  7 | <style type="text/css">
  8 | #wrap{width:850px;height: 345px;border:1px solid #c6c6c6; padding-left: 5px; padding-right: 6px;padding-top: 8px;padding-bottom: 4px;background: #e7e7e7;margin:50px auto;}
  9 | #side{width:148px;height:330px;background:#e7e7e7;float:left;border:1px solid #c6c6c6;border-bottom: none;border-right:none;}
 10 | #side img{margin-left: 56px;margin-top: 8px;}
 11 | #side p{margin-left: 44px;}
 12 | #activity{height:81px;}
 13 | .left{width:148px;height:82px;border-bottom:1px solid #c6c6c6;cursor: pointer;}
 14 | #main{width:700px;height:330px;float:left;border:1px solid #c6c6c6;border-left: none;}
 15 | #main div{position: relative;}
 16 | #main img{display: block;width:700px;height:330px;}
 17 | #main ul{position: absolute;top:300px;left:0;}
 18 | #main li{opacity: 0.8; cursor: pointer;}
 19 | #hot_ctent{width:700px;height:330px;}
 20 | #hot_ctent li{height:30px;background:#5a5a52;width:232px;float:left;font-size: 12px;text-align: center;border-right:1px solid #fff;color:#fff;line-height:30px;}
 21 | #cheap_ctent{width:700px;height:330px;}
 22 | #cheap_ctent li{height:30px;background:#5a5a52;width:174px;float:left;font-size: 12px;text-align: center;border-right:1px solid #fff;color:#fff;line-height:30px;}
 23 | #recommend_ctent{width:700px;height:330px;}
 24 | #recommend_ctent li{height:30px;background:#5a5a52;width:139px;float:left;font-size: 12px;text-align: center;border-right:1px solid #fff;color:#fff;line-height:30px;}
 25 | #activity_ctent{width:700px;height:330px;}
 26 | #activity_ctent li{height:30px;background:#5a5a52;width:174px;float:left;font-size: 12px;text-align: center;border-right:1px solid #fff;color:#fff;line-height:30px;}
 27 | .hide{display: none;}
 28 | .hover{background:#ef3163;}
 29 | </style>
 30 | <script type="text/javascript">
 31 | /*
 32 | 	1.选项卡里面能自动切换
 33 | 	2.选项卡外面能够自动切换
 34 | 	3.点击相应的左边显示相应的的右边图片
 35 | 	4.右边鼠标划过显示一个状态
 36 | 
 37 | 
 38 | */	
 39 | window.onload = function(){
 40 | 	var oSide = document.getElementById('side');
 41 | 	var oDiv = oSide.getElementsByTagName('div');
 42 | 	var oMain = document.getElementById('main');
 43 | 	var aDiv = oMain.getElementsByTagName('div');
 44 | 
 45 | 
 46 | 	var arrside1 = ["img/5.4_side1.png","img/5.4_side2.png","img/5.4_side3.png","img/5.4_side4.png"];
 47 | 	var arrside2 = ["img/5.4_side21.png","img/5.4_side22.png","img/5.4_side23.png","img/5.4_side24.png"];
 48 | 	var arr0 = ["img/5.4_right11.png","img/5.4_right12.png","img/5.4_right13.png"];
 49 | 	var arr1 = ["img/5.4_right21.png","img/5.4_right22.png","img/5.4_right23.png","img/5.4_right24.png"];
 50 | 	var arr2 = ["img/5.4_right31.png","img/5.4_right32.png","img/5.4_right33.png","img/5.4_right34.png","img/5.4_right35.png"];
 51 | 	var arr3= ["img/5.4_right41.png","img/5.4_right42.png","img/5.4_right43.png","img/5.4_right44.png"];
 52 |  	var arr = [arr0,arr1,arr2,arr3];
 53 | 	var num = 0;
 54 | 
 55 | 
 56 | 	//初始化
 57 | 	function fn1(){
 58 | 		oDiv[0].getElementsByTagName('img')[0].src = arrside2[this.index];
 59 | 		oDiv[0].style.background = '#fff';
 60 | 		tab(0);
 61 | 	}
 62 | 	fn1();
 63 | 
 64 | 	//side选项卡
 65 | 	for(var i=0;i<oDiv.length;i++){
 66 | 		oDiv[i].index = i;
 67 | 		oDiv[i].onmouseover = function(){
 68 | 			for(var i=0;i<oDiv.length;i++){
 69 | 				oDiv[i].getElementsByTagName('img')[0].src = arrside1[i];
 70 | 				oDiv[i].style.background = '#e7e7e7';
 71 | 			}
 72 | 			this.getElementsByTagName('img')[0].src = arrside2[this.index];
 73 | 			this.style.background = '#fff';
 74 | 			var index = this.index;
 75 | 			tab(index);
 76 | 		};
 77 | 	}
 78 | 
 79 | 	function tab(index){
 80 | 		var aUl = aDiv[index].getElementsByTagName('ul')[0];
 81 | 		var aLi = aUl.getElementsByTagName('li');
 82 | 		var This = aDiv[index];
 83 | 
 84 | 		for(var i=0;i<aDiv.length;i++){
 85 | 			aDiv[i].className = "hide";
 86 | 		}
 87 | 		for(var i=0;i<aLi.length;i++){
 88 | 			aLi[i].style.background = '#5a5a52';
 89 | 		}
 90 | 		aDiv[index].className = "";
 91 | 
 92 | 		for(var i=0;i<aLi.length;i++){
 93 | 			aLi[i].index1 = i;
 94 | 			aLi[0].style.background = '#ef3163';
 95 | 			aLi[i].onmouseover = function(){
 96 | 				for(var i=0;i<aLi.length;i++){
 97 | 				aLi[i].style.background = '#5a5a52';
 98 | 				}
 99 | 				this.style.background = '#ef3163';
100 | 				var Arr = arr[index];
101 | 				This.getElementsByTagName('img')[0].src = Arr[this.index1];
102 | 			}
103 | 		}
104 | 	}
105 | 
106 | 
107 | }
108 | </script>
109 | </head>
110 | <body>
111 | 	<div id="wrap">
112 | 		<div id="side">
113 | 			<div id="hot" class="left"><img src="img/5.4_side1.png" alt=""/><p>最热团购</p></div>
114 | 			<div id="cheap" class="left"><img src="img/5.4_side2.png" alt=""/><p>商城特惠</p></div>
115 | 			<div id="recommend" class="left"><img src="img/5.4_side3.png" alt=""/><p>名品推荐</p></div>
116 | 			<div id="activity" class="left"><img src="img/5.4_side4.png" alt=""/><p>缤纷活动</p></div>
117 | 		</div>
118 | 		<div id="main">
119 | 			<div id="hot_ctent">
120 | 				<img src="img/5.4_right11.png" alt="" />
121 | 				<ul>
122 | 					<li>雅诗兰黛完美修护唇膏3.6g</li>
123 | 					<li>雅诗兰黛花漾唇膏01#&nbsp3.8g</li>
124 | 					<li>倩碧卓越润肤乳&nbsp125ml</li>
125 | 				</ul>
126 | 			</div>
127 | 			<div id="cheap_ctent" class="hide">
128 | 				<img src="img/5.4_right21.png" alt="" />
129 | 				<ul>
130 | 					<li>肌研满150减30</li>
131 | 					<li>高性价比低单价商品2.8折起</li>
132 | 					<li>贝德玛满228送128</li>
133 | 					<li>吃出健康态，2.8折起</li>
134 | 				</ul>
135 | 			</div>
136 | 			<div id="recommend_ctent" class="hide">
137 | 				<img src="img/5.4_right31.png" alt="" />
138 | 				<ul>
139 | 					<li>艾格利克全场1.5折起</li>
140 | 					<li>N01dora全场1.4折七</li>
141 | 					<li>伊米妮全场1折起</li>
142 | 					<li>小熊电器全场一折起</li>
143 | 					<li>贝缇卡全场1折起</li>
144 | 				</ul>
145 | 			</div>
146 | 			<div id="activity_ctent" class="hide">
147 | 				<img src="img/5.4_right41.png" alt="" />
148 | 				<ul>
149 | 					<li>万达大歌星2小时欢唱券</li>
150 | 					<li>Free派-高丝娜蔻眼霜</li>
151 | 					<li>财付通下单立减</li>
152 | 					<li>Free派-芙优润天蚕丝面膜</li>
153 | 				</ul>
154 | 			</div>
155 | 		</div>
156 | 	</div>
157 | </body>
158 | </html>


--------------------------------------------------------------------------------
/6.1-反选.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>反选</title>
 6 | <script type="text/javascript">
 7 | window.onload = function(){
 8 | 	var aInp = document.getElementsByTagName('input');
 9 | 
10 | 	aInp[0].onclick = function(){
11 | 		for(var i=1;i<aInp.length;i++){
12 | 			aInp[i].checked = !aInp[i].checked;
13 | 			/*if(aInp[i].checked){
14 | 				aInp[i].checked = false;
15 | 			}else{
16 | 				aInp[i].checked = true;
17 | 			}*/
18 | 		}
19 | 	}
20 | 
21 | 
22 | 
23 | 
24 | }
25 | </script>
26 | </head>
27 | <body>
28 | 	<input type = "button" value="反选" />
29 | 	<ul>
30 | 		<li><input type="checkbox" checked /></li>
31 | 		<li><input type="checkbox" /></li>
32 | 		<li><input type="checkbox" /></li>
33 | 		<li><input type="checkbox" /></li>
34 | 	</ul>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/6.2-百度文库评分.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <meta charset="UTF-8">
  5 | <title>百度文库评分</title>
  6 | <link rel="stylesheet" type="text/css" href="css/base.css" />
  7 | <style type="text/css">
  8 | #wrap{width:504px;height:64px;border:1px solid #efa500;margin:20px auto;position: relative;}
  9 | h2{font-size:18px;margin-left: 10px;width:82px;height:26px;float:left;line-height:64px; }
 10 | #star{width:130px;height:44px;float:left;padding-top: 20px;}
 11 | span{position: absolute;left:230px;top:18px;display: none;color:#e78418;}
 12 | #notice{width:241px;height:64px;}
 13 | </style>
 14 | <script type="text/javascript" src="xg.js"></script>
 15 | <script type="text/javascript">
 16 | /*
 17 | 	1.划过星星span显示，提示消失
 18 | 	2.划过前两个星星显示灰色，span里显示较差
 19 | 	3.划过第三个星星显示橘色，span里显示一般
 20 | 	4.划过第四个星星显示橘色，span里显示推荐
 21 | 	5.划过第五个星星显示橘色，span里显示力荐
 22 | 	6.点击当前星星，不能滑动，再次点击还可以评分 可以定义一个开关
 23 | 
 24 | */
 25 | 
 26 | $(function(){
 27 | 	var oWrap = $('wrap');
 28 | 	var oStar = $('star');
 29 | 	var oImg = $('star').getElementsByTagName('img');
 30 | 	var oSpan = $('wrap').getElementsByTagName('span')[0];
 31 | 	var oNotice = $('notice');
 32 | 	var offon = true;
 33 | 
 34 | 	oStar.onmouseover = function(){
 35 | 		oSpan.style.display = 'block';
 36 | 		oNotice.style.display = 'none';
 37 | 	}
 38 | 	oStar.onmouseout = function(){
 39 | 		oSpan.style.display = 'none';
 40 | 		oNotice.style.display = 'block';
 41 | 	}
 42 | 
 43 | 	for(var i=0;i<oImg.length;i++){
 44 | 		oImg[i].index = i;
 45 | 		oImg[i].onmouseover = function(){
 46 | 			if(offon){
 47 | 				fn2(this.index);
 48 | 			}
 49 | 		};
 50 | 		oImg[i].onmouseout = function(){
 51 | 			if(offon){
 52 | 				for(var i=(this.index+1);i<oImg.length;i++){
 53 | 				oImg[i].src = 'img/6.2_star.png';
 54 | 			}
 55 | 		};
 56 | 		}
 57 | 		oImg[i].onclick = function(){ 
 58 | 			fn2(this.index); 
 59 | 			offon = !(offon); 
 60 | 		}
 61 | 	}
 62 | 
 63 | 
 64 | 	function fn2(index){
 65 | 		if(index == 0){
 66 | 			for(var i=0;i<1;i++){
 67 | 				oSpan.innerHTML = '较差';
 68 | 				oImg[i].src = 'img/6.2_bstar.png';
 69 | 			};	
 70 | 		}else if(index == 1){
 71 | 			for(var i=0;i<2;i++){
 72 | 				oSpan.innerHTML = '较差';
 73 | 				oImg[i].src = 'img/6.2_bstar.png';
 74 | 			};
 75 | 		}else if(index == 2){
 76 | 			for(var i=0;i<3;i++){
 77 | 				oSpan.innerHTML = '一般';
 78 | 				oImg[i].src = 'img/6.2_astar.png';
 79 | 			};
 80 | 		}else if(index == 3){
 81 | 			for(var i=0;i<4;i++){
 82 | 				oSpan.innerHTML = '推荐';
 83 | 				oImg[i].src = 'img/6.2_astar.png';
 84 | 			};
 85 | 		}else if(index == 4){
 86 | 			for(var i=0;i<5;i++){
 87 | 				oSpan.innerHTML = '力荐';
 88 | 				oImg[i].src = 'img/6.2_astar.png';
 89 | 			};
 90 | 		}
 91 | 	}
 92 | 
 93 | 
 94 | 
 95 | 
 96 | });
 97 | 
 98 | 
 99 | </script>
100 | </head>
101 | <body>
102 | 	<div id="wrap">
103 | 		<h2>总体评价</h2>
104 | 		<div id="star">
105 | 			<img src="img/6.2_star.png" />
106 | 			<img src="img/6.2_star.png" />
107 | 			<img src="img/6.2_star.png" />
108 | 			<img src="img/6.2_star.png" />
109 | 			<img src="img/6.2_star.png" />
110 | 		</div>
111 | 		<span id="appraise"></span>
112 | 		<img id="notice" src="img/6.2_right.png" alt="提示" />
113 | 	</div>
114 | </body>
115 | </html>


--------------------------------------------------------------------------------
/6.3-百度音乐全选操作.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>百度音乐全选操作</title>
 6 | <link rel="stylesheet" type="text/css" href="css/base.css"/>
 7 | <style type="text/css">
 8 | #wrap{width: 312px;height:218px;margin:30px auto; border:1px solid #8c8c8c;}
 9 | ul{width:312px;height:182px;}
10 | ul li{height:25px;border-bottom: 1px solid #8c8c8c;position: relative;}
11 | input{margin-left:8px;line-height: 25px;}
12 | span{height:25px;display: inline-block;font-size: 14px;margin-left:40px;line-height: 25px;}
13 | strong{height:25px;display: inline-block;font-size: 14px;font-weight:normal;position: absolute;left:210px;top:5px;}
14 | #bottom{width:312px;height:33px;background: url(img/6.3_bottom.png);position: relative;}
15 | #all{position: absolute;top:10px;}
16 | </style>
17 | <script type="text/javascript" src="xg.js"></script>
18 | <script type="text/javascript">
19 | $(function(){
20 | var oWrap = $('wrap');
21 | var oUl = oWrap.getElementsByTagName('ul')[0];
22 | var oInput = oUl.getElementsByTagName('input');
23 | var oLi = oWrap.getElementsByTagName('li');
24 | var oAll = $('all');
25 | var num = 0;
26 | 
27 | /*for(var i=0;i<oLi.length;i++){
28 | 	oInput[i].onclick = function(){
29 | 		if(this.checked == true){
30 | 			num++;
31 | 		}else{
32 | 			num--;
33 | 		}
34 | 		if(num = oLi.length-1){
35 | 			oAll.checked = true; 
36 | 		}else{
37 | 			oAll.checked = false;
38 | 		}
39 | 	}
40 | }*/
41 | 
42 | oAll.onclick = function(){
43 | 	if(this.checked){
44 | 		for(var i=0;i<oLi.length;i++){
45 | 			oInput[i].checked = true;
46 | 		}
47 | 	}else{
48 | 		for(var i=0;i<oLi.length;i++){
49 | 			oInput[i].checked = false;
50 | 		}
51 | 	}
52 | }
53 | 
54 | 
55 | });
56 | </script>
57 | </head>
58 | <body>
59 | 	<div id="wrap">
60 | 		<ul>
61 | 			<li><input type="checkbox" /><span>小宇宙</span><strong>苏打绿</strong></li>
62 | 			<li><input type="checkbox" /><span>小情歌</span><strong>苏打绿</strong></li>
63 | 			<li><input type="checkbox" /><span>你再烦恼什么</span><strong>苏打绿</strong></li>
64 | 			<li><input type="checkbox" /><span>当我们一起走过</span><strong>苏打绿</strong></li>
65 | 			<li><input type="checkbox" /><span>说了再见</span><strong>苏打绿</strong></li>
66 | 			<li><input type="checkbox" /><span>他夏了夏天</span><strong>苏打绿</strong></li>
67 | 			<li><input type="checkbox" /><span>我好想你</span><strong>苏打绿</strong></li>
68 | 		</ul>
69 | 		<div id="bottom"><input id="all" type="checkbox" /></div>
70 | 	</div>
71 | </body>
72 | </html>


--------------------------------------------------------------------------------
/7.1-替换背景.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>替换背景</title>
 6 | </head>
 7 | <body>
 8 | 	<input type="button" value="换背景吧" /> 
 9 | 	<input type="button" value="停" /> 
10 | 
11 | <script type="text/javascript">
12 | var aBtn = document.getElementsByTagName('input');
13 | var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
14 | var num = 0;
15 | var oBody = document.body;
16 | var timer = null;
17 | 
18 | aBtn[0].onclick =function(){
19 | 	clearInterval(timer);	//清楚null,未定义都可以清楚
20 | 	timer = setInterval(function(){
21 | 		oBody.style.background = 'url('+arr[num]+')';
22 | 		num++;
23 | 		num %= arr.length;
24 | 	},1000);
25 | };
26 | aBtn[1].onclick = function(){
27 | 	clearInterval(timer);
28 | }
29 | 
30 | 
31 | 
32 | </script>
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/7.2-简单的轮播图.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>简单的轮播图</title>
 6 | <style type="text/css">
 7 | body{background:#333;}
 8 | ul{padding:0; margin:0;}
 9 | li{list-style: none;}
10 | #pic{width:400px; height:500px;position:relative;margin:0 auto;background:#fff url(img/loader_ico.gif) no-repeat center;}
11 | #pic img{width:400px;height:500px;
12 | }
13 | #pic ul{position:absolute; width:40px;top:0; right:-50px;}
14 | #pic li{width:40px;height:40px;margin-bottom: 4px;background:#666;}
15 | #pic .active{background:#FC3;}
16 | #pic p,#pic span{width:400px;height:30px;line-height: 30px; text-align: center; color:#fff;position:absolute;left:0; background:#000;}
17 | #pic span{top:0;}
18 | #pic p{bottom:0;margin:0;}
19 | </style>
20 | <script type="text/javascript">
21 | window.onload = function(){
22 | 	var oDiv = document.getElementById('pic');
23 | 	var oImg = oDiv.getElementsByTagName('img')[0];
24 | 	var oSpan = oDiv.getElementsByTagName('span')[0];
25 | 	var oP = oDiv.getElementsByTagName('p')[0];
26 | 	var oUl = oDiv.getElementsByTagName('ul')[0];
27 | 	var oLi = oUl.getElementsByTagName('li');
28 | 	var arrUrl = ['img/1.png','img/2.png','img/3.png','img/4.png'];
29 | 	var arrText = ['小宠物','图片二','图片三','面具'];
30 | 	var num = 0;
31 | 	var timer = null;
32 | 
33 | 	function autoPlay(){
34 | 		timer = setInterval(function(){
35 | 			num++;
36 | 			num %= arrText.length;
37 | 			fnTab();
38 | 		},1000);
39 | 	}
40 | 	
41 | 
42 | 	setTimeout(autoPlay,3000);
43 | 
44 | 	oDiv.onmouseover = function(){
45 | 		clearInterval(timer);
46 | 	};
47 | 	oDiv.onmouseout = autoPlay;
48 | 
49 | 
50 | 	for(var i=0;i<arrUrl.length;i++){
51 | 		oUl.innerHTML += '<li></li>';
52 | 	}
53 | 
54 | 	oldLi = oLi[num];
55 | 
56 | 	function fnTab(){
57 | 		oImg.src = arrUrl[num];
58 | 		oSpan.innerHTML = 1+num+'/'+arrUrl.length;
59 | 		oP.innerHTML = arrText[num];
60 | 		for(var i=0;i<oLi.length;i++){
61 | 			oLi[i].className = '';
62 | 		};
63 | 		oLi[num].className = 'active';
64 | 	};
65 | 
66 | 	fnTab();
67 | 	//初始化
68 | 	for(var i=0;i<oLi.length;i++){
69 | 		oLi[i].index = i;
70 | 		oLi[i].onclick = function(){
71 | 			num = this.index;
72 | 			fnTab();
73 | 		};	
74 | 
75 | 	};
76 | 
77 | 
78 | 
79 | 
80 | 
81 | 
82 | 
83 | }
84 | </script>
85 | </head>
86 | <body>
87 | 	<div id="pic">
88 | 		<img src="" />
89 | 		<span>1/4</span>
90 | 		<p>文字说明正在加载中...</p>
91 | 		<ul></ul>
92 | 	</div>
93 | </body>
94 | </html>


--------------------------------------------------------------------------------
/7.3-qq延时菜单实例.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>qq延时菜单实例</title>
 6 | <style type="text/css">
 7 | #qq{width:200px;height:400px;background:#F9C;}	
 8 | #title{width:240px; height:180px; background:#FC6;position: absolute;top:10px;left:212px;display: none;}
 9 | </style>
10 | <script type="text/javascript" src="js/xg.js"></script>
11 | <script type="text/javascript">
12 | $(function(){
13 | 	var qq = $('qq');
14 | 	var title = $('title');
15 | 	var timer = null;
16 | 	qq.onmouseover = show;
17 | 	qq.onmouseout = hide;
18 | 
19 | 	title.onmouseover =show;
20 | 	title.onmouseout =hide;
21 | 
22 | 	function show(){
23 | 		clearInterval(timer);
24 | 		title.style.display = 'block';
25 | 	}
26 | 	function hide(){	
27 | 		timer = setTimeout(function(){
28 | 			title.style.display = 'none';
29 | 		},1000);
30 | 	}  
31 | });
32 | </script>
33 | </head>
34 | <body>
35 | 	<div id="qq"></div>
36 | 	<div id="title"></div>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/7.4-延迟消失的菜单.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <meta charset="UTF-8">
  5 | <title>延迟消失的菜单</title>
  6 | <link rel="stylesheet" type="text/css" href="css/base.css" />
  7 | <style type="text/css">
  8 | #wrap{height:92px;width:543px;margin:50px auto;position: relative;}
  9 | #nav{width:520px;height:36px;background:url(img/7.4_navbg.png) no-repeat; font-size: 14px;margin-top: 10px;margin-left: 10px;line-height: 36px;color:#fff;}
 10 | #nav a{border-radius:5px;display: block;height:26px;padding:0 10px;margin:0 10px;text-align: center;margin-top: 5px;line-height: 26px;color:#fff;}
 11 | #nav a:hover{background:#638cad;}
 12 | #nav li{background:url(img/7.4_navmid.png) no-repeat right;float:left;height:36px;}
 13 | #nav span{margin-left:80px;}
 14 | #list1,#list2,#list3,#list4{height:38px;font-size: 12px;line-height: 38px;color:#215a9c;position:absolute;top:46px;}
 15 | #list1{background:url(img/7.4_bottom1.png) no-repeat;width:282px;left: 10px;display: none;}
 16 | #list1 li{background:url(img/7.4_bottommid.png) no-repeat right;float: left;margin-left:16px;padding-right: 10px;}
 17 | #list1 ul{height:36px;width:280px;}
 18 | #list2{background:url(img/7.4_bottom2.png) no-repeat;width:292px;left:60px;display: none;}
 19 | #list2 ul{height:36px;width:292px;}
 20 | #list2 li{background:url(img/7.4_bottommid.png) no-repeat right;float: left;margin-left:10px;padding-right: 10px;}
 21 | #list3{background:url(img/7.4_bottom3.png) no-repeat;width:262px;left:60px;display: none;}
 22 | #list3 ul{height:36px;width:262px;}
 23 | #list3 li{background:url(img/7.4_bottommid.png) no-repeat right;float: left;margin-left:10px;padding-right: 10px;}
 24 | #list4{background:url(img/7.4_bottom4.png) no-repeat;width:342px;left:130px;display: none;}
 25 | #list4 ul{height:36px;width:342px;}
 26 | #list4 li{background:url(img/7.4_bottommid.png) no-repeat right;float: left;margin-left:25px;padding-right: 15px;}
 27 | </style>
 28 | <script type="text/javascript" src="js/xg.js"></script>
 29 | <script type="text/javascript">
 30 | /*
 31 | 	1.点击菜单显示下面的二级菜单，隔一段时间消失
 32 | 	2.用定时器控制消失和显示
 33 | */
 34 | 
 35 | $(function(){
 36 | 	var oWrap = $('wrap');
 37 | 	var oNav = $('nav');
 38 | 	var oLi = oNav.getElementsByTagName('li');
 39 | 	var oDiv = oWrap.getElementsByTagName('div');
 40 | 
 41 | 	for(var i=0;i<oLi.length;i++){
 42 | 		var timer = null;
 43 | 		var oA = oLi[i].getElementsByTagName('a')[0];
 44 | 		oA.index = i;
 45 | 
 46 | 		//鼠标在nav区时
 47 | 
 48 | 		oA.onmouseover = function(){
 49 | 			for(var i=0;i<oLi.length;i++){
 50 | 				oDiv[i].style.display = 'none';
 51 | 			}
 52 | 			oDiv[this.index].style.display = 'block';
 53 | 		}
 54 | 		oA.onmouseout = function(){
 55 | 			var This = this;
 56 | 			clearInterval(timer);
 57 | 			timer = setInterval(function(){
 58 | 				oDiv[This.index].style.display = 'none';
 59 | 			},1000);
 60 | 		}
 61 | 		clearInterval(timer);
 62 | 	}
 63 | 
 64 | 
 65 | 
 66 | });
 67 | </script>
 68 | </head>
 69 | <body>
 70 | 	<div id="wrap">
 71 | 		<ul id="nav">
 72 | 			<li><a>首页</a></li>
 73 | 			<li><a>关于我们</a></li>
 74 | 			<li><a>作品</a></li>
 75 | 			<li><a>博客</a></li>
 76 | 			<span>>>更多</span>
 77 | 		</ul>
 78 | 		<div id="list1">
 79 | 			<ul>
 80 | 				<li><a>最近更新</a></li>
 81 | 				<li><a>活动</a></li>
 82 | 				<li><a>报名试听</a></li>
 83 | 				<li><a>学员反馈</a></li>
 84 | 			</ul>
 85 | 		</div>
 86 | 		<div id="list2">
 87 | 			<ul>
 88 | 				<li><a>妙味讲师</a></li>
 89 | 				<li><a>培训方式</a></li>
 90 | 				<li><a>培训理念</a></li>
 91 | 				<li><a>联系我们</a></li>
 92 | 			</ul>
 93 | 		</div>
 94 | 		<div id="list3">
 95 | 			<ul>
 96 | 				<li><a>班固</a></li>
 97 | 				<li><a>MATRIX</a></li>
 98 | 				<li><a>留学e网</a></li>
 99 | 				<li><a>ECMall</a></li>
100 | 			</ul>
101 | 		</div>
102 | 		<div id="list4">
103 | 			<ul>
104 | 				<li><a>js教程</a></li>
105 | 				<li><a>弹出层效果</a><li>
106 | 				<li><a>3D</a></li>
107 | 				<li><a>学员反馈</a></li>
108 | 			</ul>
109 | 		</div>
110 | 	</div>
111 | </body>
112 | </html>


--------------------------------------------------------------------------------
/7.5-按钮控制商品上下滚动.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>按钮控制商品上下滚动</title>
 6 | <link rel="stylesheet" type="text/css" href="css/base.css" />
 7 | <style type="text/css">
 8 | img{vertical-align: top;}
 9 | #wrap{width:184px; height:468px;background:#fff;margin: 50px auto;position: relative;overflow: hidden;}
10 | #header{width:168px; height:24px;background: url(img/7.5_headerbg.png) no-repeat;font-size: 12px;color:#fff;text-align: center;z-index: 2;position: absolute;top:0px;left:0px;}
11 | #top{width:168px;height:23px;position: absolute;top:24px;left:0px;background:url(img/7.5_topbg.png) no-repeat;z-index: 2;}
12 | #list{width:166px;border-right: 1px solid #ced6d6;border-left:  1px solid #ced6d6;position:absolute;top:47px;left:0px;}
13 | #list li{border-bottom: 1px solid #ced6d6;}
14 | #footer{width:168px;height:24px;position: absolute;bottom:0px;left:0px;background:url(img/7.5_footerbg.png) no-repeat;z-index: 2;}
15 | </style>
16 | <script type="text/javascript" src="js/xg.js"></script>
17 | <script type="text/javascript">
18 | $(function(){
19 | 	var oWrap = $('wrap');
20 | 	var oTop = $('top');
21 | 	var oFot = $('footer');
22 | 	var oList = $('list');
23 | 
24 | 	//鼠标划过top图片上移
25 | 	oTop.onmouseover = function(){
26 | 		doMove(oList,'top',5,-480);
27 | 	}
28 | 	oTop.onmouseout = function(){
29 | 		clearInterval(oList.timer);
30 | 	}
31 | 
32 | 	//鼠标划过footer图片下移
33 | 	oFot.onmouseover = function(){
34 | 		doMove(oList,'top',5,0);
35 | 	}
36 | 	oFot.onmouseout = function(){
37 | 		clearInterval(oList.timer);
38 | 	}
39 | 
40 | })
41 | </script>
42 | </head>
43 | <body>
44 | 	<div id="wrap">
45 | 		<div id="header">信管基地 >><a href="#">更多</a></div>
46 | 		<div id="top"></div>
47 | 		<ul id="list">
48 | 			<li><img src="img/7.5_bg1.png"></li>
49 | 			<li><img src="img/7.5_bg2.png"></li>
50 | 			<li><img src="img/7.5_bg3.png"></li>
51 | 			<li><img src="img/7.5_bg1.png"></li>
52 | 			<li><img src="img/7.5_bg2.png"></li>
53 | 			<li><img src="img/7.5_bg3.png"></li>
54 | 			<li><img src="img/7.5_bg1.png"></li>
55 | 			<li><img src="img/7.5_bg2.png"></li>
56 | 			<li><img src="img/7.5_bg3.png"></li>
57 | 		</ul>
58 | 		<div id="footer"></div>
59 | 	</div>
60 | </body>
61 | </html>


--------------------------------------------------------------------------------
/7.6-自动轮换选项卡.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <meta charset="UTF-8">
  5 | <title>自动轮换选项卡</title>
  6 | <link rel="stylesheet" type="text/css" href="css/base.css" />
  7 | <style type="text/css">
  8 | #wrap{width:442px;height:650px;background:#EFEFE7;margin: 30px auto;}
  9 | #list{width:300px;height:40px;}
 10 | #list ul{background:#A6E6FD;}
 11 | #list ul li{float:left;line-height: 40px;text-align: center;width:148px;border-right:2px solid #fff;font-size: 16px;}
 12 | #main{}
 13 | #img{float:left;}
 14 | #list2{float:left;}
 15 | #list2 ul{width:40px;background:#A6E6FD;}
 16 | #list2 ul li{height:80px;width:20px;text-align: center;padding:10px 10px;border-bottom: 1px solid #fff;font-size: 16px;}
 17 | .top{background:#AF00A8;}
 18 | .right{background:#AA73D1}
 19 | </style>
 20 | <script type="text/javascript" src="js/xg.js"></script>
 21 | <script type="text/javascript">
 22 | $(function(){
 23 | 	/*
 24 | 		1.自动轮播菜单
 25 | 		2.轮播菜单时，右边菜单依次显示图片
 26 | 	*/
 27 | 	var oList = $('list');
 28 | 	var oImg = $('img');
 29 | 	var oList2 = $('list2');
 30 | 	var oLi = oList.getElementsByTagName('li');
 31 | 	var aLi = oList2.getElementsByTagName('li');
 32 | 	var num = 0;
 33 | 	var num2 = 0;
 34 | 	var timer = null;
 35 | 	var tab = null;
 36 | 
 37 | 	var arr1 = ['img/7.6_bg11.jpg','img/7.6_bg12.jpg','img/7.6_bg13.jpg','img/7.6_bg14.jpg'];
 38 | 	var arr2 = ['img/7.6_bg21.jpg','img/7.6_bg22.jpg','img/7.6_bg23.jpg','img/7.6_bg24.jpg'];
 39 | 	var Arr = [arr1,arr2];
 40 | 
 41 | 	 Autotab1();
 42 | 
 43 | 	function Autotab1(){
 44 | 		tab = setInterval(function(){
 45 | 			clearInterval(timer);
 46 | 			Tab1();
 47 | 			num++;
 48 | 			num%=oLi.length;
 49 | 		},4500);
 50 | 	}
 51 | 	//控制top的切换
 52 | 
 53 | 	function Tab1(){
 54 | 		clearInterval(timer);
 55 | 		Autotab2(num);
 56 | 		for(var i=0;i<oLi.length;i++){
 57 | 			oLi[i].className = '';
 58 | 		}
 59 | 		oLi[num].className = 'top';
 60 | 	}
 61 | 
 62 | 	function Autotab2(num){
 63 | 		timer = setInterval(function(){
 64 | 				Tab2(num);
 65 | 				num2++;
 66 | 				num2%=aLi.length;
 67 | 		},1000)
 68 | 	}
 69 | 
 70 | 	function Tab2(num){
 71 | 		var arr = Arr[num];
 72 | 		for(var i=0;i<aLi.length;i++){
 73 | 			aLi[i].className = '';
 74 | 		}
 75 | 		aLi[num2].className = 'right';
 76 | 		oImg.src = arr[num2];
 77 | 	}
 78 | 
 79 | 
 80 | 
 81 | });
 82 | </script>
 83 | </head>
 84 | <body>
 85 | 	<div id="wrap">
 86 | 		<div id="list">
 87 | 			<ul>
 88 | 				<li class="top">菜单一</li>
 89 | 				<li>菜单二</li>
 90 | 			</ul>
 91 | 		</div>
 92 | 		<div id="main">
 93 | 			<div>
 94 | 				<img id="img" src="img/7.6_bg11.jpg" />
 95 | 			</div>
 96 | 			<div id="list2">
 97 | 				<ul>
 98 | 					<li class="right">图片一</li>
 99 | 					<li>图片二</li>
100 | 					<li>图片三</li>
101 | 					<li>图片四</li>
102 | 				</ul>
103 | 			</div>
104 | 		</div>
105 | 	</div>	
106 | </body>
107 | </html>


--------------------------------------------------------------------------------
/7.7-淘宝商品广告效果.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>淘宝商品广告效果</title>
 6 | <style>
 7 | 	img {border: 0; float: left; margin: 0 5px; } 
 8 | 	li {list-style: none; border: 1px solid #FFADAD; width: 40px; padding: 5px; text-align: center; font-size: 12px; } 
 9 | 	a {text-decoration: none; display: block; color: #000; } 
10 | 	#wrap {border: 1px solid #FF6300; padding: 5px; overflow: hidden; width: 400px; margin: 50px auto; }
11 | 	 #left {float: left; } 
12 | 	 #right {float: left; right: 0; top: 0; } 
13 | </style>
14 | <script>
15 | 	window.onload = function(){
16 | 		var oImg = document.getElementsByTagName('img')[0],
17 | 			aLi = document.getElementsByTagName('li'),
18 | 			timer = null,
19 | 			img = ['img/7.7_bg1.png', 'img/7.7_bg2.png','img/7.7_bg3.png','img/7.7_bg4.png','img/7.7_bg5.png','img/7.7_bg6.png','img/7.7_bg7.png','img/7.7_bg8.png','img/7.7_bg9.png','img/7.7_bg10.png','img/7.7_bg11.png','img/7.7_bg12.png','img/7.7_bg13.png','img/7.7_bg14.png'],
20 | 			num = 0,
21 | 			flag = 0;
22 | 
23 | 		//清除页面上所有class和样式
24 | 		function clearAll(){
25 | 			for(var i=0; i<aLi.length; i++){
26 | 				aLi[i].style.background = '#fff';
27 | 				aLi[i].getElementsByTagName('a')[0].style.color = '#000';
28 | 			}
29 | 		}
30 | 
31 | 		//鼠标划过的时候显示背景鼠标划出的时候继续执行定时器
32 | 		for(var i=0; i<aLi.length; i++){
33 | 			aLi[i].index = i;
34 | 			aLi[i].onmouseout = function(){
35 | 				this.style.background = '#FFF';
36 | 				this.getElementsByTagName('a')[0].style.color = '#000';
37 | 				timer = setInterval(autoplay, 1000);
38 | 			}
39 | 			aLi[i].onmouseover = function(){
40 | 				clearInterval(timer);
41 | 				clearAll();
42 | 				this.style.background = '#FF4A6B';
43 | 				this.getElementsByTagName('a')[0].style.color = '#fff';
44 | 				oImg.src = img[this.index];
45 | 			}
46 | 		}
47 | 
48 | 		//轮播图片
49 | 		function autoplay(){
50 | 			clearAll();
51 | 
52 | 			aLi[num].style.background = '#FF4A6B';
53 | 			aLi[num].getElementsByTagName('a')[0].style.color = '#fff';
54 | 			oImg.src = img[num];
55 | 
56 | 			if(num<aLi.length/2){
57 | 				num++;
58 | 				if (num == aLi.length/2) {	//	如果走到左边底部，则num指向最后一个li
59 | 					num = aLi.length - 1;
60 | 				}
61 | 			} else {
62 | 				num--;
63 | 				if (num == aLi.length/2 - 1) { //如果走到右边最上面 ，num指向第一个li
64 | 					num = 0;
65 | 				}
66 | 			}
67 | 		}
68 | 
69 | 		timer = setInterval(autoplay, 1000);
70 | 		
71 | 	}
72 | </script>
73 | </head>
74 | <body>
75 | 	<div id="wrap">
76 | 		<ul id="left">
77 | 			<li><a href="#">连衣裙</a></li>
78 | 			<li><a href="#">雪纺</a></li>
79 | 			<li><a href="#">T恤</a></li>
80 | 			<li><a href="#">铅笔裤</a></li>
81 | 			<li><a href="#">婚纱</a></li>
82 | 			<li><a href="#">外套</a></li>
83 | 			<li><a href="#">连体裤</a></li>
84 | 		</ul>
85 | 		<img src="8-img/1.png" />
86 | 		<ul id="right">
87 | 			<li><a href="#">包包</a></li>
88 | 			<li><a href="#">凉鞋</a></li>
89 | 			<li><a href="#">单鞋</a></li>
90 | 			<li><a href="#">太阳镜</a></li>
91 | 			<li><a href="#">丝袜</a></li>
92 | 			<li><a href="#">帆布鞋</a></li>
93 | 			<li><a href="#">情侣装</a></li>
94 | 		</ul>
95 | 	</div>
96 | </body>
97 | </html>


--------------------------------------------------------------------------------
/7.8-点击滑动图片(leo的做法).html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 | <title>点击滑动图片</title>
 7 | <style>
 8 | #div1 { width:280px; height:180px; border:1px solid #333; margin:0 auto; position:relative; z-index:1; }
 9 | #div1 a { width:50px; height:50px; border-radius:50%; border:1px solid #333; background:red; position:absolute; top:74px; z-index:5; }
10 | #div1 .prev { left:-60px; }
11 | #div1 .next { right:-60px; }
12 | #div1 img { position:absolute; top:0; left:0; transition:1s; }
13 | /*#div1:hover img { left:-280px; opacity:0; }*/
14 | 
15 | html, body { width:100%; height:100%; margin:0; }
16 | 
17 | #text { width:300px; height:100px; border:10px solid #999; background:#fff; position:absolute; top:50%; left:50%; margin:-60px 0 0 -160px; z-index:3; text-align:center; display:none;  }
18 | #bg { width:100%; height:100%; background:#000; opacity:0.3; position:absolute; top:0; left:0; z-index:2; display:none; }
19 | </style>
20 | </head>
21 | 
22 | <body>
23 | 
24 | <div id="div1">
25 | 	<a href="javascript:;" class="prev"></a>
26 | 	<a href="javascript:;" class="next"></a>
27 | 	<img src="img/7.8_bg1.jpg" width="280" height="180" />
28 | 	<img src="img/7.8_bg2.jpg" width="280" height="180" />
29 | 	<img src="img/7.8_bg3.jpg" width="280" height="180" />
30 | 	<img src="img/7.8_bg4.jpg" width="280" height="180" />
31 | </div>
32 | 
33 | <div id="text">
34 | 	<p>再来一次？</p>
35 | 	<input type="button" value="重来" />
36 | </div>
37 | <div id="bg"></div>
38 | 
39 | <script>
40 | var oDiv = document.getElementById('div1');
41 | var aA = oDiv.getElementsByTagName('a');
42 | var aImg = oDiv.getElementsByTagName('img');
43 | 
44 | 
45 | var oBg = document.getElementById('bg');
46 | var oText = document.getElementById('text');
47 | var oBtn = oText.getElementsByTagName('input')[0];
48 | 
49 | var sgin = 1;
50 | var iNow = 0;
51 | 
52 | for (var i=0; i<aImg.length; i++) {
53 | 	aImg[i].style.zIndex = aImg.length-i;
54 | }
55 | 
56 | aA[0].onclick = function () {
57 | 	sgin = -1;
58 | 	doMove();
59 | };
60 | aA[1].onclick = function () {
61 | 	sgin = 1;
62 | 	doMove();
63 | };
64 | oBtn.onclick = function () {
65 | 	oBg.style.display = oText.style.display = 'none';
66 | 	for (var i=0; i<aImg.length; i++) {
67 | 		aImg[i].style.left = 0;
68 | 		aImg[i].style.opacity = 1;
69 | 	}
70 | 	
71 | 	iNow = 0;
72 | };
73 | 
74 | function doMove() {
75 | 	
76 | 	// document.title = iNow;
77 | 	if ( iNow < aImg.length-1 ) {
78 | 		aImg[iNow].style.left = sgin*280 + 'px';
79 | 		aImg[iNow].style.opacity = 0;
80 | 		
81 | 		iNow++;
82 | 	}
83 | 	else {
84 | 		fnReset();
85 | 	}
86 | }
87 | 
88 | function  fnReset() {
89 | 	oBg.style.display = oText.style.display = 'block';
90 | }
91 | 
92 | </script>
93 | 
94 | </body>
95 | </html>


--------------------------------------------------------------------------------
/7.8-点击滑动图片.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>点击滑动图片</title>
 6 | <link rel="stylesheet" type="text/css" href="css/base.css" />
 7 | <script type="text/javascript" src="js/xg.js"></script>
 8 | <style type="text/css">
 9 | body{width: 100%;height:100%;}
10 | #wrap{margin:40px 400px;position:relative;height:400px;width:500px;background: #F9F9F9;}
11 | #prev{position: absolute;left:0;top:120px;z-index:10;}
12 | #next{position: absolute;right:0;top:120px;z-index:10;}
13 | #imgs img{position: absolute;left:100px;top:0;}
14 | #text{position:absolute;left:550px;top:200px; height:100px;width:200px;line-height: 50px;border:2px solid gray;background:#fff;z-index:12;display: none;}
15 | #text p{text-align: center;}
16 | #text input{margin-left: 80px;}
17 | #bg{background:#000;opacity:0.4;width:100%;height:100%;border: 1px solid red;position: absolute;top:0;left:0;z-index: 2;display:none;}
18 | </style>
19 | <script type="text/javascript">
20 | /*
21 | 1.点击图片的left值向右递加，透明度递减
22 | 2.点击图片的right值向左递减，透明度递减
23 | 
24 | 
25 | 
26 | */
27 | $(function(){
28 | 	var oPrev = $('prev');
29 | 	var oNext = $('next');
30 | 	var oImgs = $('imgs');
31 | 	var oText = $('text');
32 | 	var oInput =  oText.getElementsByTagName('input')[0];
33 | 	var oBg = $('bg');
34 | 	var oImg = oImgs.getElementsByTagName('img');
35 | 
36 | 	var flag = 1;
37 | 	var iNow = 0;
38 | 
39 | 	//将图片从上到下排列
40 | 	for(var i=0;i<oImg.length;i++){
41 | 		oImg[i].style.zIndex = oImg.length-i;
42 | 	}
43 | 
44 | 	oPrev.onclick = function(){
45 | 		flag = -1;
46 | 		Move(flag*200);
47 | 	};
48 | 
49 | 	oNext.onclick = function(){
50 | 		flag = 1;
51 | 		Move(flag*300);
52 | 	}
53 | 
54 | 	function Move(flag){
55 | 		if ( iNow < oImg.length ) {
56 | 		doMove(oImg[iNow],'left',18,flag);
57 | 		fadeOut(oImg[iNow]);
58 | 			iNow++;
59 | 		}
60 | 		else {
61 | 			oBg.style.display = oText.style.display = 'block';
62 | 		}
63 | 	}
64 | 
65 | 	oInput.onclick = function () {
66 | 		oBg.style.display = oText.style.display = 'none';
67 | 		for(var i=4;i>=0;i--){
68 | 			doMove(oImg[i],'left',18,100);
69 | 			fadeIn(oImg[i]);
70 | 		}
71 | 		iNow = 0;
72 | 	};
73 | 
74 | });
75 | 
76 | 
77 | 
78 | 
79 | </script>
80 | </head>
81 | <body>
82 | 	<div id="wrap">
83 | 		<img id="prev" src="img2/prev.png">
84 | 		<div id="imgs">
85 | 			<img src="img/7.8_bg1.jpg" alt="" />
86 | 			<img src="img/7.8_bg2.jpg" alt="" />
87 | 			<img src="img/7.8_bg3.jpg" alt="" />
88 | 			<img src="img/7.8_bg4.jpg" alt="" />
89 | 			<img src="img/7.8_bg5.jpg" alt="" />
90 | 		</div>
91 | 		<img id="next" src="img2/next.png">
92 | 	</div>
93 | 	<div id="text">
94 | 		<p>再来一次</p>
95 | 		<input type="button" value="重来" />
96 | 	</div>
97 | 	<div id="bg"></div>
98 | </body>
99 | </html>


--------------------------------------------------------------------------------
/8.1-定时器应用.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>定时器应用</title>
 6 | <style type="text/css">
 7 | #div1{width:100px;height:100px;background:red;position: absolute; top:50px; left: 30px;}
 8 | </style>
 9 | </head>
10 | <body>
11 | 	<input id="btn1" type="button" value="按钮" />
12 | 	<div id="div1"></div>
13 | <script type="text/javascript">
14 | var oBtn = document.getElementById('btn1');
15 | var oDiv = document.getElementById('div1');
16 | //oDiv.timer = null;
17 | oBtn.onclick = function(){
18 | 	clearInterval(oDiv.timer);
19 | 	oDiv.timer = setInterval(function(){
20 | 		var speed = parseInt(getStyle(oDiv,'left')) + 5;
21 | 		if(speed > 800){
22 | 			speed = 800;
23 | 		}
24 | 		oDiv.style.left = speed + 'px';
25 | 		if(speed == 800){
26 | 			clearInterval(oDiv.timer);
27 | 		}
28 | 	},30)
29 | 	
30 | }
31 | 
32 | function getStyle(obj,attr){
33 | 	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
34 | }
35 | </script>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/8.2-定时器应用2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>定时器应用2</title>
 6 | <style type="text/css">
 7 | #div1{width:100px;height:100px;background:red;position: absolute; top:50px; left: 10px;}
 8 | </style>
 9 | </head>
10 | <body>
11 | 	<input id="btn1" type="button" value="往后" />
12 | 	<input id="btn2" type="button" value="往前" />
13 | 	<input id="btn3" type="button" value="往下" />
14 | 	<input id="btn4" type="button" value="往上" />
15 | 	<div id="div1"></div>
16 | <script type="text/javascript">
17 | var oBtn1 = document.getElementById('btn1');
18 | var oBtn2 = document.getElementById('btn2');
19 | var oBtn3 = document.getElementById('btn3');
20 | var oBtn4 = document.getElementById('btn4');
21 | var oDiv = document.getElementById('div1');
22 | 
23 | oBtn1.onclick = function(){
24 | 	doMove(oDiv,'left',12,10);
25 | }
26 | 
27 | oBtn2.onclick = function(){
28 | 	doMove(oDiv,'left',12,800);
29 | }
30 | 
31 | oBtn3.onclick = function(){
32 | 	doMove(oDiv,'top',12,500);
33 | }
34 | 
35 | oBtn4.onclick = function(){
36 | 	doMove(oDiv,'top',12,40);
37 | }
38 | /*
39 | 	oDiv 12 800 >;
40 | 	oDiv -12 -10 <;
41 | 
42 | 	doMove(oDiv,12,800)
43 | 
44 | */
45 | function doMove(obj,attr,dir,target){
46 | 	dir = parseInt(getStyle(obj,attr))<target ? dir : -dir;
47 | 	clearInterval(obj.timer);
48 | 	obj.timer = setInterval(function(){
49 | 		var speed = parseInt(getStyle(obj,attr)) + dir;
50 | 		if(speed > target && dir>0 || speed < target && dir<0){//往前跑
51 | 			speed = target;
52 | 		}
53 | 		obj.style[attr] = speed + 'px';
54 | 		if(speed == target){
55 | 			clearInterval(obj.timer);
56 | 		}
57 | 	},30);
58 | }
59 | 
60 | function getStyle(obj,attr){
61 | 	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
62 | }
63 | </script>
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/8.3-添加回调函数.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>添加回调函数</title>
 6 | <style type="text/css">
 7 | #div1{width:100px;height:100px;background:red;position: absolute; top:50px; left: 10px;}
 8 | </style>
 9 | </head>
10 | <body>
11 | 	<input id="btn1" type="button" value="走" />
12 | 	<div id="div1"></div>
13 | <script type="text/javascript">
14 | var oBtn1 = document.getElementById('btn1');
15 | 
16 | var oDiv = document.getElementById('div1');
17 | 
18 | oBtn1.onclick = function(){
19 | 	doMove(oDiv,'left',12,900,function(){
20 | 		doMove(oDiv,'top',12,500);
21 | 	});
22 | }
23 | 
24 | function doMove(obj,attr,dir,target,endFn){
25 | 	dir = parseInt(getStyle(obj,attr))<target ? dir : -dir;
26 | 	clearInterval(obj.timer);
27 | 	obj.timer = setInterval(function(){
28 | 		var speed = parseInt(getStyle(obj,attr)) + dir;
29 | 		if(speed > target && dir>0 || speed < target && dir<0){//往前跑
30 | 			speed = target;
31 | 		}
32 | 		obj.style[attr] = speed + 'px';
33 | 		if(speed == target){
34 | 			clearInterval(obj.timer);
35 | 			endFn && endFn();
36 | 		}
37 | 		
38 | 	},30);
39 | }
40 | 
41 | function getStyle(obj,attr){
42 | 	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
43 | }
44 | </script>
45 | </body>
46 | </html>


--------------------------------------------------------------------------------
/8.4-往下掉div.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>往下掉div</title>
 6 | <script type="text/javascript" src="js/xg.js"></script>
 7 | <script type="text/javascript">
 8 | window.onload = function(){
 9 | 	var str = '';
10 | 	var len = 20;
11 | 	var aDiv = document.getElementsByTagName('div');
12 | 	var timer = null;
13 | 	var num = 0;
14 | 
15 | 	for(var i=0;i<len;i++){
16 | 		str += '<div style="width:50px; height:50px; background: red; position: absolute; top:0px; left:'+i*60+'px;"></div>';
17 | 	}
18 | 	document.body.innerHTML = str;
19 | 	document.onclick = function(){
20 | 		clearInterval(timer);
21 | 		timer = setInterval(function(){
22 | 			doMove(aDiv[num],'top',23,500);
23 | 			num++;
24 | 			if(num == len){
25 | 				clearInterval(timer);
26 | 			}
27 | 		},100);
28 | 	};
29 | }
30 | </script>
31 | </head>
32 | <body>
33 | 
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/8.5-上下滚动.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>往下掉div</title>
 6 | <script type="text/javascript" src="js/xg.js"></script>
 7 | <script type="text/javascript">
 8 | window.onload = function(){
 9 | 	var str = '';
10 | 	var len = 20;
11 | 	var aDiv = document.getElementsByTagName('div');
12 | 	var timer = null;
13 | 	var num = 0;
14 | 	var onoff = true;
15 | 
16 | 	for(var i=0;i<len;i++){
17 | 		str += '<div style="width:50px; height:50px; background: red; position: absolute; top:0px; left:'+i*60+'px;"></div>';
18 | 	}
19 | 	document.body.innerHTML = str;
20 | 
21 | 		document.onclick = function(){
22 | 			if(onoff){
23 | 				clearInterval(timer);
24 | 				timer = setInterval(function(){
25 | 					doMove(aDiv[num],'top',23,500);
26 | 					num++;
27 | 					if(num == len){
28 | 						clearInterval(timer);
29 | 						num =0;
30 | 						onoff = false;
31 | 					}
32 | 				},100);
33 | 			}else if(onoff == false){
34 | 				clearInterval(timer);
35 | 				timer = setInterval(function(){
36 | 					doMove(aDiv[num],'top',23,10);
37 | 					num++;
38 | 					if(num == len){
39 | 						clearInterval(timer);
40 | 						num = 0;
41 | 						onoff = true;
42 | 					}
43 | 				},100);
44 | 			};
45 | 		}
46 | 	
47 | }
48 | </script>
49 | </head>
50 | <body>
51 | 
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/8.6-抖动.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>抖动</title>
 6 | <style type="text/css">
 7 | img{position: absolute; top:200px;left:300px;}
 8 | #img1{position: absolute; top:200px;left:300px;}
 9 | #img2{position: absolute; top:200px;left:600px;}
10 | </style>
11 | <script type="text/javascript" src="js/xg.js"></script>	
12 | <script type="text/javascript">
13 | window.onload = function(){
14 | 	var oImg = document.getElementById('img1');
15 | 	var oImg2 = document.getElementById('img2');
16 | 	oImg.onclick = fnShake;
17 | 	oImg2.onclick = fnShake;
18 | 
19 | 	function fnShake(){
20 | 		var This = this;
21 | 		shake(This,'left',function(){
22 | 			shake(This,'top')
23 | 		});
24 | 	}
25 | 
26 | 	function shake(obj,attr,endFn){
27 | 		var pos = parseInt(getStyle(obj,attr));
28 | 		var arr = [];	//20,-20,....0
29 | 		var num = 0;
30 | 
31 | 		for(var i=20;i>0;i-=2){
32 | 			arr.push(i,-i);
33 | 		}
34 | 		arr.push(0);
35 | 		clearInterval(obj.shake);
36 | 		obj.shake = setInterval(function(){
37 | 			obj.style[attr] = pos + arr[num] +'px';
38 | 			num++;
39 | 			if(num === arr.length){
40 | 				clearInterval(obj.shake);
41 | 				endFn && endFn();
42 | 			}
43 | 		},50);
44 | 	}
45 | }
46 | </script>
47 | </head>
48 | <body>
49 | <img id="img1" src="img/1.png" alt="" />
50 | <img id="img2" src="img/2.png" alt="" />
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/8.6-抖动的修复.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 | <title>修复抖函数的问题</title>
 7 | <style>
 8 | img { width:100px; height:100px; position:absolute; top:200px; }
 9 | </style>
10 | <script>
11 | /*
12 | 8.6-抖函数的修复
13 | 思路 
14 | 	1、封装获取元素的函数
15 | 	2、封装抖动函数
16 | 	3、页面加载的时候将图片一字排开
17 | 	4、当图片被鼠标滑过的时候执行抖动函数
18 | 分析：
19 | 	1、抖函数利用一组正负交错的数组来实现抖动
20 | 	2、用if( obj.shaked ) { return; }实现同时开几个定时器，如果shaked为真，不执行下面的代码
21 | 	3、抖动的修复是因为抖动的时候做了判断，这样就不会出现抖动错位
22 | 
23 | */
24 | function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
25 | 
26 | function shake ( obj, attr, endFn ) {
27 | 
28 | 	if( obj.shaked ) { return; }	//如果shaked为真，不执行下面的代码
29 | 	obj.shaked = true;
30 | 	var pos = parseInt( getStyle(obj, attr) );	
31 | 	
32 | 	var arr = [];			// 20, -20, 18, -18 ..... 0
33 | 	var num = 0;	//用来标识数组里数的位置
34 | 	var timer = null;
35 | 	
36 | 	//将一组20，-20，,18，-18...的数添入数组	
37 | 	for ( var i=20; i>0; i-=2 ) {
38 | 		arr.push( i, -i );
39 | 	}
40 | 	arr.push(0);
41 | 	//设置抖动定时器
42 | 	clearInterval( obj.shake );
43 | 	obj.shake = setInterval(function (){
44 | 		obj.style[attr] = pos + arr[num] + 'px'; 	//元素的某一个属性实现来回抖动
45 | 		num++;	//每执行一次num递增
46 | 		if ( num === arr.length ) {
47 | 			clearInterval( obj.shake );		//如果每一回抖动执行到最后一次抖动，停止定时器
48 | 			endFn && endFn();	//如果回掉函数传进来了，就让回调函数执行先判断布尔值再进行逻辑与
49 | 			obj.shaked = false;//每执行一次将开关设定为关闭状态
50 | 		}
51 | 	}, 50);
52 | }
53 | 
54 | window.onload = function () {
55 | 	var aImg = document.getElementsByTagName('img');
56 | 	
57 | 	for ( var i=0; i<aImg.length; i++ ) {
58 | 		aImg[i].style.left = 80+i*110 + 'px';
59 | 		
60 | 		aImg[i].onmouseover = function () {
61 | 			shake( this, 'top');
62 | 		};
63 | 	}
64 | };
65 | </script>
66 | 
67 | </head>
68 | 
69 | <body>
70 | 
71 | <img src="img/7.6_bg11.jpg" />
72 | <img src="img/7.6_bg12.jpg" />
73 | <img src="img/7.6_bg13.jpg" />
74 | <img src="img/7.6_bg14.jpg" />
75 | <img src="img/7.6_bg11.jpg" />
76 | <img src="img/7.6_bg12.jpg" />
77 | <img src="img/7.6_bg13.jpg" />
78 | <img src="img/7.6_bg14.jpg" />
79 | </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/8.7-点击往下掉再返回.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>点击往下掉再返回</title>
 6 | <link rel="stylesheet" type="text/css" href="css/base.css" />
 7 | <style type="text/css">
 8 | div{
 9 | 	width: 50px;
10 | 	height:50px;
11 | 	background:red;
12 | 	position:absolute;
13 | 	top:0;
14 | }
15 | </style>
16 | <script type="text/javascript" src="js/xg.js"></script>
17 | <script type="text/javascript" >
18 | /*
19 | 思路：1、事件为方块往下移动，移动为改变top值，调用domove函数，
20 | 	  2、当最后一块方块到达底部的时候触发事件往回移动
21 | 
22 | 分析：1、当页面加载的时候自动生成20个方块
23 | 	  2、用if(!finish){return:;}判断是否完成动作
24 | 	  3、用flag?500:0 判断方向
25 | 	  4、用num = len-1判断是否为最后一个div完成动作
26 | 
27 | 
28 | */
29 | $(function(){
30 | 	var str = '';	//用来拼接字符串
31 | 	var len = '20'; // 定义方块的个数
32 | 	var oDiv = document.getElementsByTagName('div');
33 | 	var timer = null;  //定义空的定时器
34 | 	var num = 0;	//用来标志第几个div
35 | 	var flag = true;	//用flag表示方向
36 | 	var finish = true;	//用来表示完成
37 | 
38 | 	//自动生成20个div
39 | 	for(var i=0;i<len;i++){
40 | 		str += '<div style="left:'+i*60+'px;"></div>';
41 | 	}
42 | 	document.body.innerHTML = str;
43 | 
44 | 	document.onclick = function(){
45 | 		if(!finish){
46 | 			return;
47 | 		}	//如果点击，前一轮的动作没有完成就退出，将控制权交给页面
48 | 
49 | 		finish = false; //用来检测前一轮是否完成，新一轮开始则finish未完成为true
50 | 
51 | 		clearInterval(timer);	//清除定时器
52 | 		timer = setInterval(function(){
53 | 			doMove(oDiv[num],'top',23,flag?500:0,
54 | 				(num == len - 1 )?function(){
55 | 					finish = true;	//当最后一个方块落下的时候整体一轮动作完成
56 | 					flag = !flag;
57 | 				} :null);
58 | 			num++;
59 | 			
60 | 			if(num == len){
61 | 				clearInterval(timer);
62 | 				num=0;
63 | 			}	//如果最后一个方块落下，清除定时器，方块标数置零
64 | 		},70)
65 | 	};
66 | });
67 | 
68 | 
69 | 
70 | 
71 | 
72 | 
73 | </script>
74 | </head>
75 | <body>
76 | 
77 | </body>
78 | </html>


--------------------------------------------------------------------------------
/8.8-点击加分效果.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>点击加分效果</title>
 6 | <link rel="stylesheet" type="text/css" href="base.css">
 7 | <style type="text/css">
 8 | #btn1{width:100%;text-align: center;}
 9 | #btn1 input{margin:30px 0 30px 0;}
10 | #main{width:540px;height:300px;border:1px solid gray;margin:0 auto;}
11 | ul{width:500px;height:50px;border:1px solid gray;margin-top: 200px;margin-left: 20px;opacity: 1;position: relative;}
12 | ul li{width:50px; text-align: center;line-height: 50px;position: absolute;}
13 | p{background: blue;height:50px;opacity:0;width: 0;}
14 | </style>
15 | <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
16 | <script type="text/javascript">
17 | /*8.8-点击加分效果
18 | 思路:
19 | 	1、鼠标点击按钮的时候li里面的+1依次向上移动并向上淡出
20 | 	2、此时ul的透明度由0到1再到0
21 | 	3、当最后一个li淡出的时候恢复。
22 | 	4、封装一个淡入并淡出的函数
23 | 分析：
24 | 	1、当鼠标点击按钮的时候li里面的+1依次
25 | */
26 | 
27 | $(function(){
28 | var oBtn = $('#btn');
29 | var oScore = $('#score');
30 | var oLi = $('li');
31 | var oP = $('p');
32 | var flag = true;
33 | var onOff = false;
34 | var num = 0;
35 | 
36 | for(var i=0;i<oLi.length;i++){
37 | 	$('li').eq(i).css('left',i*50);
38 | 	$('li').eq(i).css('top',0);
39 | }
40 | 
41 | oBtn.click(function(){
42 | 	if( onOff ){return;} 
43 | 	onOff = false;
44 | 	var iNow = num1 = num2 = 0;
45 | 	var timer = setInterval(function(){
46 | 		 oLi.eq(iNow).animate({ top: -300, opacity: 'hide' }, 1000);
47 | 		iNow++;
48 | 		if(iNow == oLi.length){
49 | 			clearInterval(timer);
50 | 		};
51 | 	},80);
52 | 
53 | 	oP.eq(0).animate({ width: 500}, 500);
54 | 	oP.eq(0).animate({ opacity: 1}, 500,function(){
55 | 		oP.eq(0).animate({ opacity: 0}, 500);
56 | 		oP.eq(0).animate({ width: 0}, 500);
57 | 	});
58 | 	
59 | 
60 | });
61 | 
62 | })
63 | </script>
64 | </head>
65 | <body>
66 | 	<div id="btn1"><input type="button" id="btn" value="点击加分" /></div>
67 | 	<div id="main">
68 | 		<ul id="score">
69 | 			<li>+1</li>
70 | 			<li>+1</li>
71 | 			<li>+1</li>
72 | 			<li>+1</li>
73 | 			<li>+1</li>
74 | 			<li>+1</li>
75 | 			<li>+1</li>
76 | 			<li>+1</li>
77 | 			<li>+1</li>
78 | 			<li>+1</li>
79 | 			<p></p>
80 | 		</ul>
81 | 	</div>
82 | </body>
83 | </html>


--------------------------------------------------------------------------------
/8.9-图片自动切换(自己改).html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>图片自动切换</title>
  6 | <link rel="stylesheet" type="text/css" href="css/base.css">
  7 | <style type="text/css">
  8 | img {
  9 |     border: medium none;
 10 |     margin: 0;
 11 |     padding: 0;
 12 | }
 13 | #showbox {
 14 |     border: 5px solid #c0c0c0;
 15 |     font-size: 0;
 16 |     height: 399px;
 17 |     margin: 50px auto;
 18 |     overflow: hidden;
 19 |     position: relative;
 20 |     width: 514px;
 21 | }
 22 | #wrap {
 23 |     left: 0;
 24 |     position: absolute;
 25 |     width: 3600px;
 26 | }
 27 | h1 {
 28 |     font-size: 24px;
 29 |     line-height: 36px;
 30 |     margin: 0;
 31 |     padding: 5px;
 32 | }
 33 | p {
 34 |     line-height: 20px;
 35 |     margin: 0;
 36 |     padding: 5px 5px 10px;
 37 | }
 38 | #info {
 39 |     font-size: 14px;
 40 |     left: 0;
 41 |     position: absolute;
 42 |     top: 399px;
 43 |     width: 514px;
 44 | }
 45 | #info div {
 46 |     background: #000 none repeat scroll 0 0;
 47 |     color: #fff;
 48 |     left: 0;
 49 |     opacity: 0.7;
 50 |     position: absolute;
 51 |     top: 0;
 52 |     width: 514px;
 53 | }
 54 | img{height:399px;width:514px;}
 55 | </style>
 56 | <script type="text/javascript" src="jquery-2.1.4.js"></script>
 57 | <script type="text/javascript" src="js/xg.js"></script>
 58 | <script type="text/javascript">
 59 | /*8.9-图片自动切换
 60 | 思路：
 61 | 	1、开一个定时器运行domove函数让第一张图片的透明层向上移动。
 62 | 	2、在透明层移动完毕的时候添加回调函数执行图片向左移动。
 63 | 	3、在函数执行向左移动的时候添加回调函数让透明层也向上移动，同时循环执行fntab
 64 | 	4、在第一次透明层切换的时候添加一个判断，判断是否切换完毕，如果切换完毕，图片左对齐，初始化。
 65 | */
 66 | window.onload = function(){
 67 | 	var oWrap = $('wrap');
 68 | 	var	oImg = oWrap.getElementsByTagName('img');
 69 | 	var	num = 0	;//标识图片的个数
 70 | 	var	timer = null;
 71 | 	var	oInfor = $('info');
 72 | 	var	oBar = oInfor.getElementsByTagName('div');
 73 | 
 74 | 	Tab();
 75 | 	function Tab(){
 76 | 		setTimeout(function(){
 77 | 			doMove(oBar[num],'top',20,0,function(){
 78 | 				num++;
 79 | 					if(num == oBar.length){
 80 | 						num = 1;
 81 | 						oWrap.style.left = 0;//图片左对齐
 82 | 				}
 83 | 				//图片开始从左向左移动
 84 | 				doMove(oWrap,'left',20,-514*num,function(){
 85 | 						doMove(oBar[num],'top',20,-97);//同时透明层也向上移动
 86 | 						Tab();//函数循环执行Tab;
 87 | 				});
 88 | 
 89 | 			});
 90 | 		},2000);
 91 | 	}
 92 | 	
 93 | }
 94 | 
 95 | 
 96 | </script>
 97 | </head>	
 98 | <body>
 99 | 	<div id="showbox">
100 | 		<div id="wrap">
101 | 			<img src="img/8.9_bg1.gif" alt="">
102 | 			<img src="img/8.9_bg2.gif" alt="">
103 | 			<img src="img/8.9_bg3.gif" alt="">
104 | 			<img src="img/8.9_bg4.gif" alt="">
105 | 			<img src="img/8.9_bg5.gif" alt="">
106 | 			<img src="img/8.9_bg1.gif" alt="">
107 | 		</div>
108 | 		<div id="info">
109 | 			<div>
110 | 				<h1>离婚律师：第1集</h1>
111 | 				<p>1：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
112 | 			</div>
113 | 			<div>
114 | 				<h1>离婚律师：第2集</h1>
115 | 				<p>2：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
116 | 			</div>
117 | 			<div>
118 | 				<h1>离婚律师：第3集</h1>
119 | 				<p>3：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
120 | 			</div>
121 | 			<div>
122 | 				<h1>离婚律师：第4集</h1>
123 | 				<p>4：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
124 | 			</div>
125 | 			<div>
126 | 				<h1>离婚律师：第5集</h1>
127 | 				<p>5：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
128 | 			</div>
129 | 			<div>
130 | 				<h1>离婚律师：第1集</h1>
131 | 				<p>1：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
132 | 			</div>
133 | 		</div>
134 | 	</div>
135 | </body>
136 | </html>


--------------------------------------------------------------------------------
/8.9-图片自动切换.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>图片自动切换</title>
  6 | <link rel="stylesheet" type="text/css" href="css/base.css">
  7 | <style type="text/css">
  8 | img {
  9 |     border: medium none;
 10 |     margin: 0;
 11 |     padding: 0;
 12 | }
 13 | #showbox {
 14 |     border: 5px solid #c0c0c0;
 15 |     font-size: 0;
 16 |     height: 399px;
 17 |     margin: 50px auto;
 18 |     overflow: hidden;
 19 |     position: relative;
 20 |     width: 514px;
 21 | }
 22 | #wrap {
 23 |     left: 0;
 24 |     position: absolute;
 25 |     width: 3600px;
 26 | }
 27 | h1 {
 28 |     font-size: 24px;
 29 |     line-height: 36px;
 30 |     margin: 0;
 31 |     padding: 5px;
 32 | }
 33 | p {
 34 |     line-height: 20px;
 35 |     margin: 0;
 36 |     padding: 5px 5px 10px;
 37 | }
 38 | #info {
 39 |     font-size: 14px;
 40 |     left: 0;
 41 |     position: absolute;
 42 |     top: 399px;
 43 |     width: 514px;
 44 | }
 45 | #info div {
 46 |     background: #000 none repeat scroll 0 0;
 47 |     color: #fff;
 48 |     left: 0;
 49 |     opacity: 0.7;
 50 |     position: absolute;
 51 |     top: 0;
 52 |     width: 514px;
 53 | }
 54 | img{height:399px;width:514px;}
 55 | </style>
 56 | <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
 57 | <script type="text/javascript" src="js/xg.js"></script>
 58 | <script type="text/javascript">
 59 | 
 60 | $(function(){
 61 | 	var oWrap = document.getElementById('wrap'),
 62 | 		aImg = oWrap.getElementsByTagName('img'),
 63 | 		num = 0,
 64 | 		timer = null,
 65 | 		oInfo = document.getElementById('info'),
 66 | 		aDiv = oInfo.getElementsByTagName('div');
 67 | 
 68 | 	fnTab();
 69 | 
 70 | 	function fnTab() {
 71 | 		setTimeout(function() {
 72 | 
 73 | 			//下面的透明层首先移动，向上移动
 74 | 			doMove(aDiv[num], 'top', 20, 0, function() {
 75 | 				num++;
 76 | 				if (num == aDiv.length) {
 77 | 					num = 1;	//如果切换完毕，num回到
 78 | 					oWrap.style.left = 0;	//图片移动到左对齐
 79 | 				}
 80 | 				//图片从左向左移动
 81 | 				doMove(oWrap, 'left', 20, -514 * num, function() {
 82 | 					doMove(aDiv[num], 'top', 20, -97);// 同时透明层也向上移动
 83 | 					fnTab();	//函数循环执行fnTab
 84 | 				})
 85 | 			})
 86 | 		}, 2000)
 87 | 	}			
 88 | 
 89 | })	
 90 | </script>
 91 | </head>	
 92 | <body>
 93 | 	<div id="showbox">
 94 | 		<div id="wrap">
 95 | 			<img src="img/8.9_bg1.gif" alt="">
 96 | 			<img src="img/8.9_bg2.gif" alt="">
 97 | 			<img src="img/8.9_bg3.gif" alt="">
 98 | 			<img src="img/8.9_bg4.gif" alt="">
 99 | 			<img src="img/8.9_bg5.gif" alt="">
100 | 			<img src="img/8.9_bg1.gif" alt="">
101 | 		</div>
102 | 		<div id="info">
103 | 			<div>
104 | 				<h1>离婚律师：第1集</h1>
105 | 				<p>1：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
106 | 			</div>
107 | 			<div>
108 | 				<h1>离婚律师：第2集</h1>
109 | 				<p>2：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
110 | 			</div>
111 | 			<div>
112 | 				<h1>离婚律师：第3集</h1>
113 | 				<p>3：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
114 | 			</div>
115 | 			<div>
116 | 				<h1>离婚律师：第4集</h1>
117 | 				<p>4：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
118 | 			</div>
119 | 			<div>
120 | 				<h1>离婚律师：第5集</h1>
121 | 				<p>5：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
122 | 			</div>
123 | 			<div>
124 | 				<h1>离婚律师：第1集</h1>
125 | 				<p>1：擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东（吴秀波 饰）算阴沟里翻船了，老婆公然给他戴了绿帽子，更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
126 | 			</div>
127 | 		</div>
128 | 	</div>
129 | </body>
130 | </html>


--------------------------------------------------------------------------------
/9.1-图片时间.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>图片时间</title>
 6 | <style type="text/css">
 7 | a{text-decoration: none;width:123px;height:173px;display: inline-block;}
 8 | img{display: inline-block;}
 9 | </style>
10 | <script type="text/javascript">
11 | window.onload = function(){
12 | 
13 | 	var oBody = document.body;
14 | 	var oP = document.getElementById('time');
15 | 	var aImg = document.getElementsByTagName('img');
16 | 	
17 | 	setInterval( fnTime, 1000 );
18 | 	
19 | 	fnTime ();
20 | 	
21 | 	function fnTime () {
22 | 	
23 | 		var myTime = new Date();
24 | 		var iHours = myTime.getHours();
25 | 		var iMin = myTime.getMinutes();
26 | 		var iSec = myTime.getSeconds();
27 | 		var str = toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
28 | 		
29 | 		// str = '214204';
30 | 		
31 | 		oP.innerHTML = str;
32 | 		
33 | 		// str.charAt(5)
34 | 		// aImg[4].src = 'img/' + str.charAt(4) + '.JPG';
35 | 		// aImg[5].src = 'img/' + str.charAt(5) + '.JPG';
36 | 		for ( var i=0; i<str.length; i++ ) {
37 | 			aImg[i].src = 'img2/' + str.charAt(i) + '.JPG';
38 | 		}
39 | 	
40 | 	}
41 | };
42 | 
43 | function toTwo ( n ) {
44 | 	return n < 10 ?  '0' + n : '' + n;
45 | }
46 | 
47 | </script>
48 | </head>
49 | <body>
50 | 	<p id="time" style="font-size:60px;"></p>
51 | 	<img src="img2/0.JPG" />
52 | 	<img src="img2/0.JPG" />
53 | 	<a style="background:url(img2/colon.JPG);"></a>
54 | 	<img src="img2/0.JPG" />
55 | 	<img src="img2/0.JPG" />
56 | 	<a style="background:url(img2/colon.JPG);"></a>
57 | 	<img src="img2/0.JPG" />
58 | 	<img src="img2/0.JPG" />
59 | </body>
60 | </html>
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 
70 | 
71 | 


--------------------------------------------------------------------------------
/9.2-倒计时.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>倒计时</title>
 6 | <script type="text/javascript">
 7 | //现在的时间点（在变）
 8 | //未来的时间点(不变)
 9 | 
10 | /*
11 | 数字形式
12 | var iNow = new Date();
13 | var iNew = new Date(2015,6,15,12,54,0);
14 | var t = Math.floor((iNew - iNow)/1000); //毫秒-秒
15 | var str = Math.floor(t/86400) +'天'+ Math.floor(t%86400/3600) +'时'+ Math.floor(t%86400%3600/60) +'分' +t%60+'秒';
16 | alert(str);
17 | */
18 | //字符串形式
19 | var iNow = new Date();
20 | var iNew = new Date('July 14,2015 13:10:0');//不用月份+1
21 | var t = Math.floor((iNew - iNow)/1000);
22 | var str = Math.floor(t/86400) +'天'+ Math.floor(t%86400/3600) +'时'+ Math.floor(t%86400%3600/60) +'分' +t%60+'秒';
23 | alert(str);
24 | // 天：Math.floor(t/86400)
25 | // 时：Math.floor(t%86400/3600)
26 | // 分：Math.floor(t%86400%3600/60)
27 | // 秒：t%60
28 | // 数字形式：new Date(2013,4,1,9,48,12);
29 | // 字符串形式：new Date('June 10,2013 12:12:12');
30 | //January、February、March、April、May、June、July、August、September、October、November、December;
31 | </script>
32 | </head>
33 | <body>
34 | 	
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/9.3-倒计时实例.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>倒计时实例</title>
 6 | <link rel="stylesheet" type="text/css" href="css/base.css">
 7 | <style type="text/css">
 8 | .t1{width:400px;}	
 9 | </style>
10 | <script type="text/javascript">
11 | window.onload = function(){
12 | 	var oInp = document.getElementsByTagName('input');
13 | 	var iNow = null;
14 | 	var iNew = null;
15 | 	var t = 0;
16 | 	var str = '';
17 | 	var timer  =null;
18 | 	oInp[2].onclick = function(){
19 | 		iNew = new Date(oInp[0].value);
20 | 		clearInterval(timer);
21 | 		timer = setInterval(function(){
22 | 			iNow = new Date();
23 | 			t = Math.floor((iNew-iNow)/1000);
24 | 			if(t>=0){
25 | 				str = Math.floor(t/86400) +'天'+ Math.floor(t%86400/3600) +'时'+ Math.floor(t%86400%3600/60) +'分' +t%60+'秒';
26 | 				oInp[1].value = str;
27 | 			}else{
28 | 				clearInterval(timer);
29 | 			}
30 | 		},1000);
31 | 		
32 | 	};
33 | };
34 | </script>
35 | </head>
36 | <body>
37 | 	距离：<input class="t1" type="text" value="July 14,2015 14:20:0"/> <br/>
38 | 	还剩：<input class="t1" type="text" />
39 | 	<input type="button" value="开始倒计时吧" />
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/9.4-图片时间升级版.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <meta charset="UTF-8">
  5 | <title>图片时间升级版</title>
  6 | <link rel="stylesheet" type="text/css" href="css/base.css">
  7 | <style type="text/css">
  8 | ul{margin:80px 35% 0 35%;}
  9 | ul li{float:left;position: relative;width:50px;height:80px;overflow: hidden;}
 10 | ul li div{float:left; width:50px;position: absolute;left:0; top:0;}
 11 | ul img{width:50px;height:80px;}
 12 | .colon{width:50px;}
 13 | </style>
 14 | <script type="text/javascript" src="js/xg.js"></script>
 15 | <script type="text/javascript">
 16 | /*
 17 | 9-4倒计时升级版
 18 | 思路：
 19 | 	1、定义一个ul li 结构，li里面套div，每个div有两个图片依次排开
 20 | 	2、通过移动图片的top值来切换数字
 21 | 	3、首先获取当前的动态时间，然后图片的路径和时间一一对应，使用charAt函数获取第几个字符串，
 22 | 	4、开启一个定时器，一秒钟滚动一次。
 23 | */
 24 | window.onload = function(){
 25 | 
 26 | 	var oBody = document.body;
 27 | 	var oP = document.getElementsByTagName('p')[0];
 28 | 	var oUl = document.getElementsByTagName('ul')[0];
 29 | 	var oLi = oUl.getElementsByTagName('li');
 30 | 	var timer = 0;
 31 | 
 32 | 	fnTime();
 33 | 	setInterval(fnTime, 1000);
 34 | 
 35 | 	function toTwo(n){
 36 | 		return n<10?'0'+n:''+n;
 37 | 	}
 38 | 
 39 | 	function fnTime(){
 40 | 		var myTime = new Date();
 41 | 		var iHours = myTime.getHours();
 42 | 		var iMin = myTime.getMinutes();
 43 | 		var iSec = myTime.getSeconds();
 44 | 		str = toTwo(iHours) + ':' + toTwo(iMin) + ':' + toTwo(iSec);
 45 | 
 46 | 		oP.innerHTML = str;
 47 | 
 48 | 		function TabImg(li,index){
 49 | 			var oDiv = li.getElementsByTagName('div')[0];
 50 | 			var oImg = li.getElementsByTagName('img');
 51 | 			if(str.charAt(index) == ':'){
 52 | 				oImg[0].src = 'img2/colon.jpg';
 53 | 			}else{
 54 | 				oImg[1].src = 'img2/' + str.charAt(index) + '.JPG';
 55 | 				if(oImg[0].src != oImg[1].src){
 56 | 					doMove(oDiv,'top',10,'-80',function(){
 57 | 						oImg[0].src = oImg[1].src;
 58 | 						oDiv.style.top = 0 + 'px';
 59 | 					})
 60 | 				}
 61 | 			}
 62 | 		}
 63 | 
 64 | 		for(var i=0;i<oLi.length;i++){
 65 | 			TabImg(oLi[i],i);
 66 | 		}
 67 | 	}
 68 | 
 69 | }
 70 | </script>
 71 | </head>
 72 | <body>
 73 | 	<p>170538</p>
 74 | 	<ul>
 75 | 		<li>
 76 | 			<div>
 77 | 				<img src="img2/0.jpg">
 78 | 				<img src="img2/0.jpg">
 79 | 			</div>
 80 | 		</li>
 81 | 		<li>
 82 | 			<div>
 83 | 				<img src="img2/0.jpg">
 84 | 				<img src="img2/0.jpg">
 85 | 			</div>
 86 | 		</li>
 87 | 		<li class="colon">
 88 | 			<div>
 89 | 				<img src="img2/colon.jpg">				
 90 | 			</div>
 91 | 		</li>
 92 | 		<li>
 93 | 			<div>
 94 | 				<img src="img2/0.jpg">
 95 | 				<img src="img2/0.jpg">
 96 | 			</div>
 97 | 		</li>
 98 | 		<li>
 99 | 			<div>
100 | 				<img src="img2/0.jpg">
101 | 				<img src="img2/0.jpg">
102 | 			</div>
103 | 		</li>
104 | 		<li class="colon">
105 | 			<div>
106 | 				<img src="img2/colon.jpg">				
107 | 			</div>
108 | 		</li>
109 | 		<li>
110 | 			<div>
111 | 				<img src="img2/0.jpg">
112 | 				<img src="img2/0.jpg">
113 | 			</div>
114 | 		</li>
115 | 		<li>
116 | 			<div>
117 | 				<img src="img2/0.jpg">
118 | 				<img src="img2/0.jpg">
119 | 			</div>
120 | 		</li>
121 | 	</ul>
122 | </body>
123 | </html>


--------------------------------------------------------------------------------
/9.5-倒计时抢购商品.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | <meta charset="UTF-8">
  5 | <title>倒计时抢购商品</title>
  6 | <link rel="stylesheet" type="text/css" href="css/base.css">
  7 | <style type="text/css">
  8 | #wrap{margin:20px 25%;}
  9 | h1 {font-size: 14px; }
 10 | ul {font-size: 0; }
 11 | li {
 12 | 	list-style: none;
 13 | 	background: url("img/down.png") 0 0 no-repeat;
 14 | 	width: 162px;
 15 | 	height: 279px;
 16 | 	display: inline-block;
 17 | 	border-top: 1px solid #A0A0A4;
 18 | 	position: relative;
 19 | }
 20 | .box {
 21 | 	position: absolute;
 22 | 	top: 0;
 23 | 	left: 0;
 24 | 	background: #fff;
 25 | 	width: 152px;
 26 | 	height: 269px;
 27 | 	padding: 5px;
 28 | 	margin: 0 2px;
 29 | }
 30 | #showcase li:first-child .box {margin-left: 0; }
 31 | .box img {width: 100px; height: 80px; margin: 20px; }
 32 | .box input[type="text"] {
 33 | 	width: 106px;
 34 | 	height: 16px;
 35 | 	background: #DED6E7;
 36 | 	color: #522121;
 37 | 	font-size: 12px;
 38 | 	border: 1px solid #EFEFEF;
 39 | 	padding: 2px;
 40 | }
 41 | .box input[type="button"] {
 42 | 	color: #847373;
 43 | 	background: #fff;
 44 | 	border: none;
 45 | 	width: 36px;
 46 | 	font-size: 14px;
 47 | 	font-weight: bold;
 48 | }
 49 | .box .timeoff {font-size: 14px; color: #A0A0A4; text-align: center; }
 50 | .box p {font-size: 14px; margin-bottom: 0; }
 51 | .box span {color: #BDADBD; font-weight: bold; }
 52 | .box .price {color: #BD214A; font-weight: bold; }
 53 | table {
 54 | 	width: 648px;
 55 | 	background: #DED6E7;
 56 | 	text-align: center;
 57 | 	font-size: 14px;
 58 | 	color: #522121;
 59 | 	font-weight: bold;
 60 | 	margin-top: 30px;
 61 | 	border-collapse: collapse;
 62 | }
 63 | td {padding: 10px 0; border-top: 4px solid #fff; border-bottom: 4px solid #fff; }
 64 | td img {width: 80px; height: 51px; border: 1px solid #8C4A4A; margin-left: 120px; }
 65 | tbody tr td:first-child {width: 180px; padding: 0 10px; color: #000; font-weight: normal; }
 66 | tbody div {width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 67 | #total {font-weight: bold; font-size: 20px; }
 68 | #total .all {color: #BD214A; }
 69 | </style>
 70 | <script type="text/javascript" src="js/xg.js"></script>
 71 | <script type="text/javascript">
 72 | window.onload = function() {
 73 | 	var oUl = document.getElementById('showcase'),
 74 | 		aBox = oUl.getElementsByTagName('div'),	
 75 | 		oTbody = document.getElementsByTagName('tbody')[0],
 76 | 		oTotal = document.getElementById('total').getElementsByTagName('span')[0];
 77 | 
 78 | 	//封装每一次div的倒计时函数
 79 | 	function timeoff(box) {
 80 | 		var oBtn = box.getElementsByTagName('input')[1];
 81 | 
 82 | 		oBtn.onclick = function() {
 83 | 			var iNew = new Date(box.getElementsByTagName('input')[0].value); //获取倒计时结束的时间
 84 | 			var oP = box.getElementsByTagName('p')[0];
 85 | 			var oP2 = box.getElementsByTagName('p')[1];
 86 | 			var price = box.getElementsByTagName('span')[2].innerHTML;	//获取当前产品的价格
 87 | 			var oImg = box.getElementsByTagName('img')[0];
 88 | 
 89 | 			clearInterval(box.timer);
 90 | 			box.timer = setInterval(function() {
 91 | 				var iNow = new Date();
 92 | 				var t = Math.floor((iNew - iNow) / 1000);
 93 | 				if (t >= 0) {
 94 | 					oP.innerHTML = '剩余' + Math.floor(t / 86400) + '天' + Math.floor(t % 86400 / 3600) + '时' + Math.floor(t % 86400 % 3600 / 60) + '分' + t % 60 + '秒';
 95 | 				} else {
 96 | 					//如果时间到了
 97 | 					clearInterval(box.timer);
 98 | 					shake(box,'left',function(){
 99 | 						doMove(box, 'top', 10, 279);	//抖动
100 | 						oPacity(box, 10, 0, 30, function() {	//淡出
101 | 							box.style.display = 'none';
102 | 							oTbody.innerHTML += '<tr><td><div>' + oP2.innerHTML + '</div></td><td>' + price + '</td><td><img src="' + oImg.src + '" /></td></tr>';	//字符串拼接处一行表单
103 | 							oTotal.innerHTML = parseFloat(oTotal.innerHTML) + parseFloat(price);
104 | 						});
105 | 					});
106 | 				}
107 | 			}, 1000);
108 | 		}
109 | 	}
110 | 
111 | 	for (var i = 0; i < aBox.length; i++) {
112 | 		timeoff(aBox[i]);
113 | 	}
114 | }
115 | 
116 | </script>
117 | </head>
118 | <body>
119 | 	<div id="wrap">
120 | 		<h1>限购时间</h1>
121 | 		<ul id="showcase">
122 | 			<li>
123 | 				<div class="box">
124 | 					<input type="text" value="july 14, 2015 20:00:00">
125 | 					<input type="button" value="确定">
126 | 					<p class="timeoff">剩余00天00时00分00秒</p>
127 | 					<img src="img/9.5-bg1.png" />
128 | 					<p>疯狂599，美的爆款隐藏式面板下拉门微波炉</p>
129 | 					<p><span>抢购价：</span><span class="price">￥</span><span class="price">599.00</span></p>
130 | 				</div>
131 | 			</li>
132 | 			<li>
133 | 				<div class="box">
134 | 					<input type="text" value="july 14, 2015 20:00:00">
135 | 					<input type="button" value="确定">
136 | 					<p class="timeoff">剩余00天00时00分00秒</p>
137 | 					<img src="img/9.5-bg2.png" />
138 | 					<p>疯狂3299，美的爆款隐藏式面板下拉门微波炉</p>
139 | 					<p><span>抢购价：</span><span class="price">￥</span><span class="price">3299.00</span></p>
140 | 				</div>
141 | 			</li>
142 | 			<li>
143 | 				<div class="box">
144 | 					<input type="text" value="july 14, 2015 21:00:00">
145 | 					<input type="button" value="确定">
146 | 					<p class="timeoff">剩余00天00时00分00秒</p>
147 | 					<img src="img/9.5-bg1.png" />
148 | 					<p>疯狂1块钱，美的爆款隐藏式面板下拉门微波炉</p>
149 | 					<p><span>抢购价：</span><span class="price">￥</span><span class="price">1.00</span></p>
150 | 				</div>
151 | 			</li>
152 | 			<li>
153 | 				<div class="box">
154 | 					<input type="text" value="july 14, 2015 21:00:00">
155 | 					<input type="button" value="确定">
156 | 					<p class="timeoff">剩余00天00时00分00秒</p>
157 | 					<img src="img/9.5-bg4.png" />
158 | 					<p>疯狂168，美的爆款隐藏式面板下拉门微波炉</p>
159 | 					<p><span>抢购价：</span><span class="price">￥</span><span class="price">168.00</span></p>
160 | 				</div>
161 | 			</li>
162 | 		</ul>
163 | 		<table>
164 | 			<thead>
165 | 				<tr>
166 | 					<td width="200px">商品名称</td>
167 | 					<td width="150px">价钱</td>
168 | 					<td width="298px"></td>
169 | 				</tr>
170 | 			</thead>
171 | 			<tbody>
172 | 			</tbody>
173 | 		</table>
174 | 		<p id="total">
175 | 			总价：<span class="all">0</span>元
176 | 		</p>
177 | 	</div>
178 | </body>
179 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # miaov-js-basework
2 | 妙味js基础练习
3 | 


--------------------------------------------------------------------------------
/css/base.css:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | /*CSS reset*/
 3 | html{color:#000;background:#FFF;}
 4 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}
 5 | fieldset,img{border:0;}
 6 | a{text-decoration: none;color: #666;-webkit-tap-highlight-color:rgba(255,255,255,0);}
 7 | address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
 8 | del,ins{text-decoration:none;}
 9 | li{list-style:none;}
10 | caption,th{text-align:left;}
11 | h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
12 | q:before,q:after{content:'';}
13 | abbr,acronym{border:0;font-variant:normal;}
14 | sup{vertical-align:baseline;}
15 | sub{vertical-align:baseline;}
16 | legend{color:#000;}
17 | input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
18 | input,button,textarea,select{*font-size:100%;}
19 | /* html5 reset */
20 | article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block}
21 | audio, canvas, video {display: inline-block;*display: inline;*zoom: 1}
22 | audio:not([controls]) {display: none;height: 0}
23 | /*常用类~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
24 | /*盒子模型类型*/
25 | .inline-block {display: inline-block;*display: inline;*zoom: 1}
26 | .inline{display: inline;}
27 | .block{display: block;}
28 | /*文字排版*/
29 | .f12{font-size:12px;}
30 | .f13{font-size:13px;}
31 | .f14{font-size:14px;}
32 | .f16{font-size:16px;}
33 | .f20{font-size:20px;}
34 | .fb{font-weight:bold}
35 | .fn{font-weight:normal;}
36 | .t2{text-indent:2em;}
37 | .lh150{line-height:150%;}
38 | .lh180{line-height:180%;}
39 | .lh200{line-height:200%;}
40 | .unl{text-decoration:underlline;}
41 | .no_unl{text-decoration:none;}
42 | .text-overflow{overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
43 | /*定位*/
44 | .tl{text-align:left;}
45 | .tc{text-align:center;}
46 | .tr{text-align:right;}
47 | .bc{margin-left:0;margin-right:0;}
48 | .fl{float:left;display:inline;}
49 | .fr{float:right;display:inline;}
50 | .cb{clear:both;}
51 | .cl{clear:left;}
52 | .cr{clear:right;}
53 | .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
54 | .clearfix {zoom: 1}
55 | 
56 | /* Hides from IE-mac \*/
57 | * html .clearfix {height: 1%;}
58 | .clearfix {display: block;}
59 | /* End hide from IE-mac */
60 | .vm{vertical-align:middle;}
61 | .pr{position:relative;}
62 | .pa{position:absolute;}
63 | .pf{position:fixed;}
64 | .abs-right{position:absolute;right:0}
65 | .zoom{zoom:1;}
66 | .hidden{visibility:hidden;}
67 | .none{display:none;}
68 | .clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
69 | .clear{zoom:1;}
70 | 


--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/1.jpg


--------------------------------------------------------------------------------
/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/1.png


--------------------------------------------------------------------------------
/img/11.4-bg1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/11.4-bg1.jpg


--------------------------------------------------------------------------------
/img/11.4-bg2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/11.4-bg2.jpg


--------------------------------------------------------------------------------
/img/11.4-bg3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/11.4-bg3.jpg


--------------------------------------------------------------------------------
/img/11.4-bg4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/11.4-bg4.jpg


--------------------------------------------------------------------------------
/img/11.4-bg5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/11.4-bg5.jpg


--------------------------------------------------------------------------------
/img/11.4-bg6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/11.4-bg6.jpg


--------------------------------------------------------------------------------
/img/11.4-bg7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/11.4-bg7.jpg


--------------------------------------------------------------------------------
/img/11.4-bg8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/11.4-bg8.jpg


--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/2.jpg


--------------------------------------------------------------------------------
/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/2.png


--------------------------------------------------------------------------------
/img/2_bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/2_bg1.png


--------------------------------------------------------------------------------
/img/2_bg2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/2_bg2.png


--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/3.jpg


--------------------------------------------------------------------------------
/img/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/3.png


--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/4.jpg


--------------------------------------------------------------------------------
/img/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/4.png


--------------------------------------------------------------------------------
/img/5.2_bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.2_bg1.png


--------------------------------------------------------------------------------
/img/5.2_bg2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.2_bg2.png


--------------------------------------------------------------------------------
/img/5.2_bg3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.2_bg3.png


--------------------------------------------------------------------------------
/img/5.3_bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.3_bg1.png


--------------------------------------------------------------------------------
/img/5.3_bg3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.3_bg3.png


--------------------------------------------------------------------------------
/img/5.4_right11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right11.png


--------------------------------------------------------------------------------
/img/5.4_right12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right12.png


--------------------------------------------------------------------------------
/img/5.4_right13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right13.png


--------------------------------------------------------------------------------
/img/5.4_right21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right21.png


--------------------------------------------------------------------------------
/img/5.4_right22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right22.png


--------------------------------------------------------------------------------
/img/5.4_right23.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right23.png


--------------------------------------------------------------------------------
/img/5.4_right24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right24.png


--------------------------------------------------------------------------------
/img/5.4_right31.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right31.png


--------------------------------------------------------------------------------
/img/5.4_right32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right32.png


--------------------------------------------------------------------------------
/img/5.4_right33.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right33.png


--------------------------------------------------------------------------------
/img/5.4_right34.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right34.png


--------------------------------------------------------------------------------
/img/5.4_right35.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right35.png


--------------------------------------------------------------------------------
/img/5.4_right41.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right41.png


--------------------------------------------------------------------------------
/img/5.4_right42.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right42.png


--------------------------------------------------------------------------------
/img/5.4_right43.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right43.png


--------------------------------------------------------------------------------
/img/5.4_right44.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_right44.png


--------------------------------------------------------------------------------
/img/5.4_side1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_side1.png


--------------------------------------------------------------------------------
/img/5.4_side2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_side2.png


--------------------------------------------------------------------------------
/img/5.4_side21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_side21.png


--------------------------------------------------------------------------------
/img/5.4_side22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_side22.png


--------------------------------------------------------------------------------
/img/5.4_side23.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_side23.png


--------------------------------------------------------------------------------
/img/5.4_side24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_side24.png


--------------------------------------------------------------------------------
/img/5.4_side3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_side3.png


--------------------------------------------------------------------------------
/img/5.4_side4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/5.4_side4.png


--------------------------------------------------------------------------------
/img/6.2_astar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/6.2_astar.png


--------------------------------------------------------------------------------
/img/6.2_bstar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/6.2_bstar.png


--------------------------------------------------------------------------------
/img/6.2_right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/6.2_right.png


--------------------------------------------------------------------------------
/img/6.2_star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/6.2_star.png


--------------------------------------------------------------------------------
/img/6.3_bottom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/6.3_bottom.png


--------------------------------------------------------------------------------
/img/7.4_bottom1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.4_bottom1.png


--------------------------------------------------------------------------------
/img/7.4_bottom2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.4_bottom2.png


--------------------------------------------------------------------------------
/img/7.4_bottom3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.4_bottom3.png


--------------------------------------------------------------------------------
/img/7.4_bottom4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.4_bottom4.png


--------------------------------------------------------------------------------
/img/7.4_bottommid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.4_bottommid.png


--------------------------------------------------------------------------------
/img/7.4_navbg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.4_navbg.png


--------------------------------------------------------------------------------
/img/7.4_navmid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.4_navmid.png


--------------------------------------------------------------------------------
/img/7.5_bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.5_bg1.png


--------------------------------------------------------------------------------
/img/7.5_bg2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.5_bg2.png


--------------------------------------------------------------------------------
/img/7.5_bg3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.5_bg3.png


--------------------------------------------------------------------------------
/img/7.5_footerbg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.5_footerbg.png


--------------------------------------------------------------------------------
/img/7.5_headerbg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.5_headerbg.png


--------------------------------------------------------------------------------
/img/7.5_topbg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.5_topbg.png


--------------------------------------------------------------------------------
/img/7.6_bg11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.6_bg11.jpg


--------------------------------------------------------------------------------
/img/7.6_bg12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.6_bg12.jpg


--------------------------------------------------------------------------------
/img/7.6_bg13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.6_bg13.jpg


--------------------------------------------------------------------------------
/img/7.6_bg14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.6_bg14.jpg


--------------------------------------------------------------------------------
/img/7.6_bg21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.6_bg21.jpg


--------------------------------------------------------------------------------
/img/7.6_bg22.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.6_bg22.jpg


--------------------------------------------------------------------------------
/img/7.6_bg23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.6_bg23.jpg


--------------------------------------------------------------------------------
/img/7.6_bg24.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.6_bg24.jpg


--------------------------------------------------------------------------------
/img/7.7_bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg1.png


--------------------------------------------------------------------------------
/img/7.7_bg10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg10.png


--------------------------------------------------------------------------------
/img/7.7_bg11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg11.png


--------------------------------------------------------------------------------
/img/7.7_bg12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg12.png


--------------------------------------------------------------------------------
/img/7.7_bg13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg13.png


--------------------------------------------------------------------------------
/img/7.7_bg14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg14.png


--------------------------------------------------------------------------------
/img/7.7_bg2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg2.png


--------------------------------------------------------------------------------
/img/7.7_bg3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg3.png


--------------------------------------------------------------------------------
/img/7.7_bg4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg4.png


--------------------------------------------------------------------------------
/img/7.7_bg5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg5.png


--------------------------------------------------------------------------------
/img/7.7_bg6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg6.png


--------------------------------------------------------------------------------
/img/7.7_bg7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg7.png


--------------------------------------------------------------------------------
/img/7.7_bg8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg8.png


--------------------------------------------------------------------------------
/img/7.7_bg9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.7_bg9.png


--------------------------------------------------------------------------------
/img/7.8_bg1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.8_bg1.jpg


--------------------------------------------------------------------------------
/img/7.8_bg2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.8_bg2.jpg


--------------------------------------------------------------------------------
/img/7.8_bg3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.8_bg3.jpg


--------------------------------------------------------------------------------
/img/7.8_bg4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.8_bg4.jpg


--------------------------------------------------------------------------------
/img/7.8_bg5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/7.8_bg5.jpg


--------------------------------------------------------------------------------
/img/8.9_bg1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/8.9_bg1.gif


--------------------------------------------------------------------------------
/img/8.9_bg2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/8.9_bg2.gif


--------------------------------------------------------------------------------
/img/8.9_bg3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/8.9_bg3.gif


--------------------------------------------------------------------------------
/img/8.9_bg4.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/8.9_bg4.gif


--------------------------------------------------------------------------------
/img/8.9_bg5.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/8.9_bg5.gif


--------------------------------------------------------------------------------
/img/9.5-bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/9.5-bg1.png


--------------------------------------------------------------------------------
/img/9.5-bg2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/9.5-bg2.png


--------------------------------------------------------------------------------
/img/9.5-bg3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/9.5-bg3.png


--------------------------------------------------------------------------------
/img/9.5-bg4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/9.5-bg4.png


--------------------------------------------------------------------------------
/img/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/bg.png


--------------------------------------------------------------------------------
/img/bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/bg1.png


--------------------------------------------------------------------------------
/img/bg2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/bg2.png


--------------------------------------------------------------------------------
/img/down.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/down.png


--------------------------------------------------------------------------------
/img/loader_ico.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img/loader_ico.gif


--------------------------------------------------------------------------------
/img2/0.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/0.JPG


--------------------------------------------------------------------------------
/img2/1.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/1.JPG


--------------------------------------------------------------------------------
/img2/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/1.png


--------------------------------------------------------------------------------
/img2/2.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/2.JPG


--------------------------------------------------------------------------------
/img2/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/2.png


--------------------------------------------------------------------------------
/img2/3.2_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/3.2_1.jpg


--------------------------------------------------------------------------------
/img2/3.2_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/3.2_2.jpg


--------------------------------------------------------------------------------
/img2/3.2_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/3.2_3.jpg


--------------------------------------------------------------------------------
/img2/3.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/3.JPG


--------------------------------------------------------------------------------
/img2/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/3.png


--------------------------------------------------------------------------------
/img2/4.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/4.JPG


--------------------------------------------------------------------------------
/img2/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/4.png


--------------------------------------------------------------------------------
/img2/5.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/5.JPG


--------------------------------------------------------------------------------
/img2/6.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/6.JPG


--------------------------------------------------------------------------------
/img2/7.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/7.JPG


--------------------------------------------------------------------------------
/img2/8.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/8.JPG


--------------------------------------------------------------------------------
/img2/9.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/9.JPG


--------------------------------------------------------------------------------
/img2/active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/active.png


--------------------------------------------------------------------------------
/img2/colon.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/colon.JPG


--------------------------------------------------------------------------------
/img2/ico1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/ico1.gif


--------------------------------------------------------------------------------
/img2/ico2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/ico2.gif


--------------------------------------------------------------------------------
/img2/loader_ico.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/loader_ico.gif


--------------------------------------------------------------------------------
/img2/next.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/next.png


--------------------------------------------------------------------------------
/img2/normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/normal.png


--------------------------------------------------------------------------------
/img2/prev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getElement/miaov-js-basework/c4b99979239a0f2b4355eb9eeb3d7f88e8aeaf4b/img2/prev.png


--------------------------------------------------------------------------------
/js/xg.js:
--------------------------------------------------------------------------------
  1 | // JavaScript Document
  2 | 
  3 | function $(v) {
  4 | 	if (typeof v === 'function') {
  5 | 		window.onload = v;
  6 | 	} else if (typeof v === 'string') {
  7 | 		return document.getElementById(v);
  8 | 	} else if (typeof v === 'object') {
  9 | 		return v;
 10 | 	}
 11 | }
 12 | 
 13 | function getStyle(obj, attr) {
 14 | 	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
 15 | }
 16 | 
 17 | function doMove(obj, attr, dir, target, endFn) {
 18 |     dir = parseInt(getStyle(obj, attr)) < target ? dir : - dir;
 19 |     clearInterval(obj.timer);
 20 |     obj.timer = setInterval(function () {
 21 |         var speed = parseInt(getStyle(obj, attr)) + dir;
 22 |         if (speed > target && dir > 0 || speed < target && dir < 0) {
 23 |             speed = target;
 24 |         }
 25 |         obj.style[attr] = speed + 'px';
 26 |         if (speed == target) {
 27 |             clearInterval(obj.timer);
 28 |             endFn && endFn();
 29 |         }
 30 |     }, 30);
 31 | }
 32 | function fadeIn(obj){
 33 | 
 34 |     var iCur = getStyle(obj,'opacity');
 35 |     if(iCur==1){ return false; }
 36 |     var value = 0;
 37 |     clearInterval(obj.timer);
 38 |     obj.timer = setInterval(function(){
 39 |         var iSpeed = 5;
 40 |         if (value == 100) {
 41 |             clearInterval(obj.timer);
 42 |         }else{
 43 |             value += iSpeed;
 44 |             obj.style.opacity = value/100;
 45 |             obj.style.filter = 'alpha(opacity ='+value+')';
 46 |         }
 47 |     },30);
 48 | };
 49 | 
 50 | function fadeOut(obj){
 51 | 
 52 |     var iCur = getStyle(obj,'opacity');
 53 |     if(iCur==0){ return false; }
 54 | 
 55 |     var value = 100;
 56 |     clearInterval(obj.timer);
 57 |     obj.timer = setInterval(function(){
 58 |         var iSpeed = -5;
 59 |         if (value == 0) {
 60 |             clearInterval(obj.timer);
 61 |         }else{
 62 |             value += iSpeed;
 63 |             obj.style.opacity = value/100;
 64 |             obj.style.filter = 'alpha(opacity ='+value+')';
 65 |         }
 66 |     },30);
 67 | };
 68 | function oPacity(obj, step, target, frequency, endFn) {
 69 | 
 70 |     var currentOpacity = getStyle(obj, 'opacity') * 100;
 71 |     step = currentOpacity < target ? step : -step;
 72 | 
 73 |     clearInterval(obj.alpha);
 74 | 
 75 |     obj.alpha = setInterval(function() {
 76 |         currentOpacity = getStyle(obj, 'opacity') * 100;
 77 |         var nextOpacity = currentOpacity + step;
 78 |         if (step > 0 && nextOpacity > target || step < 0 && nextOpacity < target) {
 79 |             nextOpacity = target;
 80 |         }
 81 |         obj.style.opacity = nextOpacity / 100;
 82 |         obj.style.filter = 'alpha(opacity:' + nextOpacity + ')';
 83 |         if (nextOpacity == target) {
 84 |             clearInterval(obj.alpha);
 85 |             endFn && endFn();
 86 |         }
 87 |     }, frequency);
 88 | 
 89 | }
 90 | 
 91 | function shake(obj, attr, endFn) {
 92 | 
 93 |     // if( !obj.shaked ) { return; }
 94 |     var pos = parseInt(getStyle(obj, attr)); // 有隐患的
 95 | 
 96 |     var arr = []; // 20, -20, 18, -18 ..... 0
 97 |     var num = 0;
 98 |     var timer = null;
 99 | 
100 |     for (var i = 10; i > 0; i -= 2) {
101 |         arr.push(i, -i);
102 |     }
103 |     arr.push(0);
104 | 
105 |     // obj.shaked = false;      
106 |     clearInterval(obj.shake);
107 |     obj.shake = setInterval(function() {
108 |         obj.style[attr] = pos + arr[num] + 'px';
109 |         num++;
110 |         if (num === arr.length) {
111 |             clearInterval(obj.shake);
112 |             // obj.shaked = true;
113 |             endFn && endFn();
114 | 
115 |         }
116 |     }, 50);
117 | }


--------------------------------------------------------------------------------
/js/作业的思路.js:
--------------------------------------------------------------------------------
 1 | /*created by yancey qq:1352667433*/ 
 2 | /*
 3 | 8.6-抖函数的修复
 4 | 思路 
 5 | 	1、封装获取元素的函数
 6 | 	2、封装抖动函数
 7 | 	3、页面加载的时候将图片一字排开
 8 | 	4、当图片被鼠标滑过的时候执行抖动函数
 9 | 分析：
10 | 	1、抖函数利用一组正负交错的数组来实现抖动
11 | 	2、用if( obj.shaked ) { return; }实现同时开几个定时器，如果shaked为真，不执行下面的代码
12 | 	3、抖动的修复是因为初始位置是在抖动函数里获取，这样就不会出现抖动错位
13 | 
14 | */
15 | 
16 | /*
17 | 8.7-点击往下掉再返回
18 | 思路：1、事件为方块往下移动，移动为改变top值，调用domove函数，
19 | 	  2、当最后一块方块到达底部的时候触发事件往回移动
20 | 
21 | 分析：
22 | 	1、当页面加载的时候自动生成20个方块
23 | 	2、用if(!finish){return:;}判断是否完成动作
24 | 	3、用flag?500:0 判断方向
25 | 	4、用num = len-1判断是否为最后一个div完成动作
26 | */
27 | 
28 | /*8.8-点击加分效果
29 | 思路:
30 | 	1、鼠标点击按钮的时候li里面的+1依次向上移动并向上淡出
31 | 	2、此时ul的透明度由0到1再到0
32 | 	3、当最后一个li淡出的时候恢复。
33 | 	4、封装一个淡入并淡出的函数
34 | 分析：
35 | 	1、当鼠标点击按钮的时候li里面的+1依次
36 | */
37 | 
38 | /*8.9-图片自动切换
39 | 思路：
40 | 	1、开一个定时器运行domove函数让第一张图片的透明层向上移动。
41 | 	2、在透明层移动完毕的时候添加回调函数执行图片向左移动。
42 | 	3、在函数执行向左移动的时候添加回调函数让透明层也向上移动，同时循环执行fntab
43 | 	4、在第一次透明层切换的时候添加一个判断，判断是否切换完毕，如果切换完毕，图片左对齐，初始化。
44 | */
45 | 
46 | /*
47 | 9-4倒计时升级版
48 | 思路：
49 | 	1、定义一个ul li 结构，li里面套div，每个div有两个图片依次排开
50 | 	2、通过移动图片的top值来切换数字
51 | 	3、首先获取当前的动态时间，然后图片的路径和时间一一对应，使用charAt函数获取第几个字符串，
52 | 	4、开启一个定时器，一秒钟滚动一次。
53 | */
54 | 
55 | /*
56 | 9-5倒计时抢购商品
57 | 思路：
58 | 	1、主要功能为倒计时，结束后抖动，下移，生成新的表格
59 | 	2、封装倒计时函数，开启定时器，如果时间到了，执行抖动函数，然后回调执行淡出函数，然后字符串拼接产生新的表单
60 | 	3、开启一个循环，让每一个产品都能执行函数
61 | */
62 | /*
63 | 10-7-查找，替换
64 | 思路：
65 | 	需要实现的功能：
66 | 	1、展开，实现下拉列表功能，查询，替换，
67 | 	2、点击查询，出现查询框，点击替换，出现替换框
68 | 	3、输入数据，查找到需要查找的字符串，显示高亮
69 | 	如果输入的数据不是文本内的文字，弹出未查找到。
70 | 	4、输入数据，如果有替换，如果没有找到弹出未找到，如果替换的是空字符串，提示是否需要删除文字。
71 | 分析：
72 | 	1、下拉列表采用onmouseover事件显示，
73 | 	2、点击查询显示隐藏的查询框，点击替换，出现替换框
74 | 	3、输入数据，点击查找，如果str.indexOf()返回-1显示未查找到，如果有，利用str.indexOf()返回字符串。
75 | 	4、输入数据，如如果str.indexOf()返回-1，未找到，如果有新定义一个变量，将处理过的字符串赋给文本框的innerHTML，
76 | */
77 | 11-3随机图片滚动
78 | 思路：
79 | 	需要实现的功能：
80 | 	1、图片上下滚动，图片的滚动随机出现
81 | 分析：
82 | 	1、两张图片叠在一起,利用domove函数实现滚动
83 | 	2、使用随机函数随机出现数字，
84 | 
85 | 
86 | 
87 | 


--------------------------------------------------------------------------------
/y-属性读写操作，HTML小实例.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>属性读写操作HTML小练习</title>
 6 | <style type="text/css">
 7 | div{width:240px;height:300px;border:1px solid #333;background:#F1F1F1;padding:10px;}
 8 | </style>
 9 | <script type="text/javascript">
10 | 	window.onload = function(){
11 | 		var oDiv = document.getElementById('div1');
12 | 		var oSpan = document.getElementById('span1');
13 | 		var oText = document.getElementById('text1');
14 | 		var oBtn= document.getElementById('btn1');
15 | 
16 | 		oBtn.onclick = function(){
17 | 			oDiv.innerHTML += oSpan.innerHTML+ oText.value + '<br/>'; 
18 | 			oText.value=""; //清空
19 | 		};
20 | 	}
21 | </script>
22 | </head>
23 | <body>
24 | 	<div id="div1"></div>
25 | 	<span id="span1">信管基地：</span>
26 | 	<input id="text1"type="text" />
27 | 	<input id="btn1" type="button" value="提交" />
28 | </body> 
29 | </html>


--------------------------------------------------------------------------------
/y-改变属性.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>改变属性</title>
 6 | <style type="text/css">
 7 | 	#div1{
 8 | 		width:200px;
 9 | 		height:200px;
10 | 		border:1px solid red;
11 | 		margin-top:10px;
12 | 	}
13 | </style>
14 | <script type="text/javascript">
15 | 	window.onload = function(){
16 | 		var oAttr = document.getElementById('attr');
17 | 		var oVal = document.getElementById('val');
18 | 		var oBtn = document.getElementById('btn1');
19 | 		var oDiv = document.getElementById('div1');
20 | 
21 | 		oBtn.onclick = function(){
22 | 
23 | 			oDiv.style[oAttr.value] = oVal.value;
24 | 
25 | 		};
26 | 	}
27 | </script>
28 | </head>
29 | <body>
30 | 	请输入属性名称<input id="attr" type="text" /></br>
31 | 	请输入属性值：<input id="val" type="text" / >
32 | 	<input id="btn1" type="button" value="确定" />
33 | 	<div id="div1"></div>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/y-数组.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>数组</title>
  6 | <style type="text/css">
  7 | #content{width:400px;height:400px;border:10px solid #ccc;margin:40px auto 0; position:relative;background:#f1f1f1;}
  8 | #content a{width:40px; height:40px; background:#000;border:1px solid #fff;position:absolute; top:175px;text-align: center;text-decoration:none; line-height:40px; color:#fff;font-size: 30px;font-weight: bold; filter:alpha(opacity:70);opacity:0.7}
  9 | #content a:hover{filter:alpha(opacity:90);opacity:0.9}
 10 | #btn1{margin-left:600px;}
 11 | #btn2{}
 12 | #prev{left:10px;}
 13 | #next{right:10px;}
 14 | #text,#span1{position:absolute;left:0; width:400px;height:30px;line-height: 30px; text-align: center; color:#fff;background:#000;filter:alpha(opacity:70);opacity:0.7;}
 15 | #text{bottom:0;margin:0;}
 16 | #span1{top:0;}
 17 | #img1{width:400px;height:400px;}
 18 | p{margin-left:580px;}
 19 | </style>
 20 | <script type="text/javascript">
 21 | window.onload = function(){
 22 | 	var oPrev = document.getElementById("prev");
 23 | 	var oNext = document.getElementById("next");
 24 | 	var oText = document.getElementById("text");
 25 | 	var oSpan = document.getElementById("span1");
 26 | 	var oImg = document.getElementById("img1");
 27 | 	var Btn1 = document.getElementById("btn1");
 28 | 	var Btn2 = document.getElementById("btn2");
 29 | 	var oP = document.getElementById('p');
 30 | 
 31 | 	var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
 32 | 	var arrText = ['游戏美女','人造运动员','性感美女','古装美女'];
 33 | 
 34 | 	var num = 0;
 35 | 
 36 | 	scrollTap();
 37 | 	//初始化
 38 | 	function fnTab(){
 39 | 		oSpan.innerHTML = num+1 + '/' + arrText.length;
 40 | 		oImg.src = arrUrl[num];
 41 | 		oText.innerHTML = arrText[num];
 42 | 	};
 43 | 	function scrollTap(){
 44 | 		fnTab();
 45 | 
 46 | 		oNext.onclick =function(){
 47 | 			num++;
 48 | 			if(num == arrText.length){
 49 | 				num = 0;
 50 | 			};
 51 | 
 52 | 			fnTab();
 53 | 		};
 54 | 
 55 | 		oPrev.onclick = function(){
 56 | 			num--;
 57 | 			if(num == -1){
 58 | 				num = arrText.length-1;
 59 | 			};
 60 | 
 61 | 			fnTab();		
 62 | 		};
 63 | 	};
 64 | 
 65 | 	function listTap(){
 66 | 		fnTab();
 67 | 		oNext.onclick =function(){
 68 | 
 69 | 			if(num == arrText.length-1){
 70 | 				alert("这已经是最后一张了，不能往后啦~");
 71 | 				num = arrText.length-2;
 72 | 			}
 73 | 				num++;
 74 | 
 75 | 			fnTab();
 76 | 		};
 77 | 		oPrev.onclick = function(){
 78 | 			if(num == 0){
 79 | 				alert("这已经是第一张了，不能往前啦~");
 80 | 				num = 1;
 81 | 			}
 82 | 				num--;
 83 | 
 84 | 			fnTab();		
 85 | 		}
 86 | 
 87 | 	};
 88 | 
 89 | 	Btn1.onclick = function(){
 90 | 		scrollTap();
 91 | 	}
 92 | 
 93 | 	Btn2.onclick = function(){
 94 | 		oP.innerHTML = '图片只能从最后一张或者第一张切换'
 95 | 		listTap();
 96 | 	}
 97 | 
 98 | 		
 99 | };
100 | </script>
101 | </head>
102 | <body>
103 | 	<div id="wrap">
104 | 		<input id="btn1" type="button" value="循环切换" />
105 | 		<input id="btn2" type="button" value="顺序切换" /></br>
106 | 		<p id="p">图片可以从最后一张循环播放</p>
107 | 		<div id="content">
108 | 			<a id="prev" href="javascript:;"><<</a>
109 | 			<a id="next" href="javascript:;">>></a>
110 | 			<p id="text">图片文字加载中...</p>
111 | 			<span id="span1">数量正在计算中...</span>
112 | 			<img id="img1" />
113 | 		</div>
114 | 	</div>
115 | </body>
116 | </html>


--------------------------------------------------------------------------------
/y-文字的放大放小.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>文字的放大放小</title>
 6 | <style type="text/css">
 7 | .red{width:300px; background:red;padding:20px;color:yellow;
 8 | 	border:10px solid #ccc;
 9 | }
10 | </style>
11 | <script type="text/javascript">
12 | window.onload = function(){
13 | 	var oBtn1 = document.getElementById('btn1');
14 | 	var oBtn2 = document.getElementById('btn2');
15 | 	var oBtn3 = document.getElementById('btn3');
16 | 	var oText = document.getElementById('text1');
17 | 	var oBtn5 = document.getElementById('btn5');
18 | 	var oP = document.getElementById('p1');
19 | 
20 | 	var num = 15;
21 | 
22 | 	oBtn1.onclick = function(){
23 | 		if(num>12){
24 | 		num--;
25 | 		oP.style.fontSize = num + 'px';
26 | 		};
27 | 	};
28 | 	oBtn2.onclick = function(){
29 | 		if(num<22){
30 | 		num++;
31 | 		oP.style.fontSize = num + 'px';
32 | 		};
33 | 	};
34 | 	oBtn3.onclick = function(){
35 | 		oP.className = 'red';
36 | 	}
37 | 
38 | 	oBtn5.onclick = function(){
39 | 		if(oText.value == ""){
40 | 			alert('请输入验证口令')
41 | 		}else if(oText.value == "CSS"){
42 | 			alert('您输入的是CSS,恭喜，通过')
43 | 		}else{
44 | 			alert('')
45 | 		}
46 | 	};
47 | 
48 | }
49 | </script>
50 | </head>
51 | <body>
52 | 	<input id="btn1" type="button" value="-" />
53 | 	<input id="btn2" type="button" value="+" />
54 | 	<input id="btn3" type="button" value="红" />
55 | 	<p id="p1">由陈国富监制,肖洋导演的天才青春喜剧《少年班》,于昨日(6日)在清华大学举办发布会,任性标榜主题“不靠脸!”,并发布了电影首批人物海报。肖洋的两位好友韩寒和叫兽易小星惊喜现身,与现场同学们大谈学生时期恋爱史。电影主演周冬雨与夏天作为片中两种“女神”的代表也压轴出现。由于三位导演金句不断,现场几百名学生多次爆笑鼓掌,气氛热烈燃爆初夏校园。</p>
56 | 	验证口令
57 | 	<input id="text1" type="text" />
58 | 	<input id="btn5" type="button" value="验证" />
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/图片切换综合实例1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Document</title>
 6 | <style type="text/css">
 7 | body{background:#333;}
 8 | ul{padding:0; margin:0;}
 9 | li{list-style: none;}
10 | #pic{width:400px; height:500px;position:relative;margin:0 auto;background:#fff url(img/loader_ico.gif) no-repeat center;}
11 | #pic img{width:400px;height:500px;
12 | }
13 | #pic ul{position:absolute; width:40px;top:0; right:-50px;}
14 | #pic li{width:40px;height:40px;margin-bottom: 4px;background:#666;}
15 | #pic .active{background:#FC3;}
16 | #pic p,#pic span{width:400px;height:30px;line-height: 30px; text-align: center; color:#fff;position:absolute;left:0; background:#000;}
17 | #pic span{top:0;}
18 | #pic p{bottom:0;margin:0;}
19 | </style>
20 | <script type="text/javascript">
21 | window.onload = function(){
22 | 	var oDiv = document.getElementById('pic');
23 | 	var oImg = oDiv.getElementsByTagName('img')[0];
24 | 	var oSpan = oDiv.getElementsByTagName('span')[0];
25 | 	var oP = oDiv.getElementsByTagName('p')[0];
26 | 	var oUl = oDiv.getElementsByTagName('ul')[0];
27 | 	var oLi = oUl.getElementsByTagName('li');
28 | 	var arrUrl = ['img/1.png','img/2.png','img/3.png','img/4.png'];
29 | 	var arrText = ['小宠物','图片二','图片三','面具'];
30 | 	var num = 0;
31 | 	for(var i=0;i<arrUrl.length;i++){
32 | 		oUl.innerHTML += '<li></li>';
33 | 	}
34 | 
35 | 	oldLi = oLi[num];
36 | 
37 | 	function fnTab(){
38 | 		oImg.src = arrUrl[num];
39 | 		oSpan.innerHTML = 1+num+'/'+arrUrl.length;
40 | 		oP.innerHTML = arrText[num];
41 | 		for(var i=0;i<oLi.length;i++){
42 | 			oLi[i].className = '';
43 | 		};
44 | 		oLi[num].className = 'active';
45 | 	};
46 | 
47 | 	fnTab();
48 | 	//初始化
49 | 	for(var i=0;i<oLi.length;i++){
50 | 		oLi[i].index = i;
51 | 		oLi[i].onclick = function(){
52 | 			num = this.index;
53 | 			fnTab();
54 | 		};	
55 | 
56 | 	};
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | }
65 | </script>
66 | </head>
67 | <body>
68 | 	<div id="pic">
69 | 		<img src="" />
70 | 		<span>1/4</span>
71 | 		<p>文字说明正在加载中...</p>
72 | 		<ul></ul>
73 | 	</div>
74 | </body>
75 | </html>


--------------------------------------------------------------------------------
/展开收缩.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Document</title>
 6 | <style type="text/css">
 7 | *{margin:0; padding:0; border:0;}
 8 | ul h2{padding:0; margin:0;}
 9 | li{list-style: none;}
10 | #list{width:240px;border:1px solid #333;margin:0 auto;}
11 | #list .lis{}
12 | #list h2{height:30px;line-height: 30px;text-indent:20px; background:url(img/ico1.gif) no-repeat 5px center #6FF;color: #000;}
13 | #list .active{background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000;}
14 | #list ul{display: none;}
15 | #list ul li{line-height: 24px;border-bottom: 1px solid #333; text-indent:24px;}
16 | #list ul .hover{background:#6FF;}
17 | </style>
18 | <script type="text/javascript">
19 | window.onload = function(){
20 | 	var oUl = document.getElementById('list');
21 | 	var aH2 = oUl.getElementsByTagName('h2');
22 | 	var aUl = oUl.getElementsByTagName('Ul');
23 | 	var aLi = null;
24 | 	var arrLi = [];
25 | 
26 | 	for(var i=0;i<aH2.length;i++){
27 | 		aH2[i].index = i;
28 | 		aH2[i].onclick = function(){
29 | 			if(this.className == ''){
30 | 				aUl[this.index].style.display = 'block';
31 | 				this.className = 'active';
32 | 			}else{
33 | 				aUl[this.index].style.display = 'none';
34 | 				this.className = '';
35 | 			}
36 | 		};
37 | 	};
38 | 
39 | 	for(var i=0;i<aUl.length;i++){
40 | 		aLi = aUl[i].getElementsByTagName('li');
41 | 		for(var j=0;j<aLi.length;j++){
42 | 			arrLi.push(aLi[j]);
43 | 		}
44 | 	};
45 | 
46 | 	for(var i=0;i<arrLi.length;i++){
47 | 		arrLi[i].onclick = function(){
48 | 			for(var i=0;i<arrLi.length;i++){
49 | 				arrLi[i].className = '';
50 | 			}
51 | 			this.className = 'hover';
52 | 		};
53 | 	};
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | }
61 | </script>
62 | </head>
63 | <body>
64 | 	<ul id="list">
65 | 		<li class="lis">
66 | 			<h2 class="active">我的好友</h2>
67 | 			<ul>
68 | 				<li>张兆军</li>
69 | 				<li>彭子凡</li>
70 | 				<li>徐开明</li>
71 | 				<li>刘艳云</li>
72 | 				<li>徐斗锋</li>
73 | 			</ul>
74 | 		</li>
75 | 		<li class="lis">
76 | 			<h2>企业好友</h2>
77 | 			<ul>
78 | 				<li>张兆军</li>
79 | 				<li>彭子凡</li>
80 | 				<li>徐开明</li>
81 | 				<li>刘艳云</li>
82 | 				<li>徐斗锋</li>
83 | 			</ul>
84 | 		</li>
85 | 		<li class="lis">
86 | 			<h2>黑名单</h2>
87 | 			<ul>
88 | 				<li>张兆军</li>
89 | 				<li>彭子凡</li>
90 | 				<li>徐开明</li>
91 | 				<li>刘艳云</li>
92 | 				<li>徐斗锋</li>
93 | 			</ul>
94 | 		</li>
95 | 	</ul>
96 | </body>
97 | </html>


--------------------------------------------------------------------------------
/带缩略图的轮播图.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>带缩略图的图片切换效果</title>
  6 | 	<style>
  7 | 		body {
  8 | 			background: black;
  9 | 		}
 10 | 		#container {
 11 | 			width: 390px;
 12 | 			height: 480px;
 13 | 			position: relative;
 14 | 			margin: 30px auto;
 15 | 			text-align: center;
 16 | 			border: 1px solid white;
 17 | 			background: #eee;
 18 | 		}
 19 | 		ul {
 20 | 			padding: 0;
 21 | 			margin: 0;
 22 | 		}
 23 | 		li {
 24 | 			list-style: none;
 25 | 		}
 26 | 		#showbox {
 27 | 			width: 390px;
 28 | 			height: 480px;
 29 | 			background: url('3-img/loader_ico.gif') center center no-repeat;
 30 | 		}
 31 | 		#container a {
 32 | 			position: absolute;
 33 | 			height: 40px;
 34 | 			width: 40px;
 35 | 			border-radius: 40px;
 36 | 			line-height: 40px;
 37 | 			color: white;
 38 | 			text-align: center;
 39 | 			font-size: 30px;
 40 | 			background: #ea7c1c;
 41 | 			opacity: 0.4;
 42 | 			filter:alpha(opacity:40);
 43 | 			top: 50%;
 44 | 			margin-top: -20px;
 45 | 			text-decoration: none;
 46 | 		}
 47 | 		#container a:hover {
 48 | 			opacity: 0.9;
 49 | 			filter:alpha(opacity: 90);
 50 | 		}
 51 | 		#prev {
 52 | 			left: 10px;
 53 | 		}
 54 | 		#next {
 55 | 			right: 10px;
 56 | 		}
 57 | 		#dots {
 58 | 			width: 200px;
 59 | 			margin: 0 auto;
 60 | 			text-align: center;
 61 | 			padding: 3px;
 62 | 			position: absolute;
 63 | 			top: 500px;
 64 | 			left: 50%;
 65 | 			margin-left: -102px;
 66 | 		}
 67 | 		#dots li {
 68 | 			display: inline-block;
 69 | 			width: 15px;
 70 | 			height: 15px;
 71 | 			background: gray;
 72 | 			border-radius: 15px;
 73 | 			margin: 0 5px;
 74 | 			cursor: pointer;
 75 | 			position: relative;
 76 | 		}
 77 | 		#dots .mini {
 78 | 			position: absolute; 
 79 | 			width: 39px;
 80 | 			height: 48px;
 81 | 			bottom: 25px;
 82 | 			border: 2px solid #c2ead7;
 83 | 			left: -12px;
 84 | 		}
 85 | 	</style>
 86 | 	<script>
 87 | 		window.onload = function(){
 88 | 			var oShowbox = document.getElementById('showbox'),
 89 | 				oPrev = document.getElementById('prev'),
 90 | 				oNext = document.getElementById('next'),
 91 | 				oUl = document.getElementById('dots'),
 92 | 				aLi = oUl.getElementsByTagName('li'),
 93 | 				arrPic = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png'],
 94 | 				num = 0;
 95 | 
 96 | 			oShowbox.src = arrPic[num];
 97 | 			aLi[num].style.background = '#ea7c1c';
 98 | 
 99 | 			oNext.onclick = function(){
100 | 				num++;
101 | 				if(num > (arrPic.length - 1)) {
102 | 					num = 0;
103 | 				};
104 | 				oShowbox.src = arrPic[num];
105 | 				for(var i=0; i<aLi.length; i++) {
106 | 					aLi[i].style.background = '';
107 | 					aLi[num].style.background = '#ea7c1c';
108 | 				}
109 | 			}
110 | 
111 | 			oPrev.onclick = function(){
112 | 				num--;
113 | 				if(num < 0) {
114 | 					num = arrPic.length-1;
115 | 				}
116 | 				oShowbox.src = arrPic[num];
117 | 				for(var i=0; i<aLi.length; i++) {
118 | 					aLi[i].style.background = '';
119 | 					aLi[num].style.background = '#ea7c1c';
120 | 				}
121 | 			}
122 | 
123 | 
124 | 			for(var i=0; i<aLi.length; i++) {
125 | 				aLi[i].index = i;
126 | 				aLi[i].onmouseover = function(){
127 | 					aLi[this.index].innerHTML = '<img class="mini" src="' + arrPic[this.index] + '" />';
128 | 				}
129 | 				aLi[i].onmouseout = function(){
130 | 					aLi[this.index].innerHTML = '';
131 | 				}
132 | 				aLi[i].onclick = function(){
133 | 					for(var j=0; j<aLi.length; j++) {
134 | 						aLi[j].style.background = '';
135 | 					}
136 | 					aLi[this.index].style.background = '#ea7c1c';
137 | 					oShowbox.src = arrPic[this.index];
138 | 					num = this.index;
139 | 				}
140 | 			}
141 | 		}
142 | 
143 | 	</script>
144 | </head>
145 | <body>
146 | 	<div id="container">
147 | 		<img src="" id="showbox">
148 | 		<a id="prev" href="javascript:">&lt;</a>
149 | 		<a id="next" href="javascript:">&gt;</a>
150 | 		<ul id="dots">
151 | 			<li></li>
152 | 			<li></li>
153 | 			<li></li>
154 | 			<li></li>
155 | 		</ul>
156 | 	</div>
157 | </body>
158 | </html>


--------------------------------------------------------------------------------