forked from laihuamin/jsExample
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (167 loc) · 9.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="g-wrap">
<h1 class="g-title">JS原生实例学习</h1>
<div class="g-content">
<ul class="m-nav">
<li>
<p class="nav-title" onclick="downSelect()"> 第一课（6）</p>
<ul class="u-nav">
<li><a target="_blank" href="html/firstOne.html">1)控制DIV属性</a></li>
<li><a target="_blank" href="html/firstTwo.html">2)网页换肤</a></li>
<li><a target="_blank" href="html/firstThree.html">3)函数接收参数并弹出</a></li>
<li><a target="_blank" href="html/firstFour.html">4)用循环将三个Div变成红色</a></li>
<li><a target="_blank" href="html/firstFive.html">5)鼠标移入/移出改变样式</a></li>
<li><a target="_blank" href="html/firstSix.html">6)记住密码框</a></li>
</ul>
</li>
<li>
<p class="nav-title">第二课</p>
<ul class="u-nav">
<li><a target="_blank" href="html/secondOne.html">1) 百度输入法</a></li>
<li><a target="_blank" href="html/secondTwo.html">2) 点击Div，显示其innerHTML</a></li>
<li><a target="_blank" href="html/secondThree.html">3) 求出数组中所有数字的和</a></li>
<li><a target="_blank" href="html/secondFour.html">4) 弹出层效果</a></li>
<li><a target="_blank" href="html/secondFive.html">5) 函数传参，改变Div任意属性的值</a></li>
<li><a target="_blank" href="html/secondSix.html">6) 图片列表：鼠标移入/移出改变图片透明度</a></li>
<li><a target="_blank" href="html/secondSeven.html">7) 简易选项卡</a></li>
<li><a target="_blank" href="html/secondEight.html">8) 简易JS年历</a></li>
<li><a target="_blank" href="html/secondNine.html">9) 单一按钮显示/隐藏一播放列表收缩展开</a></li>
<li><a target="_blank" href="html/secondTen.html">10) 提示框效果</a></li>
<li><a target="_blank" href="html/secondEleven.html">11) 鼠标移过，修改图片路径</a></li>
<li><a target="_blank" href="html/secondTWL.html">12) 复选框（checkbox）全选/全不选/返选</a></li>
</ul>
</li>
<li>
<p class="nav-title">第三课</p>
<ul class="u-nav">
<li><a target="_blank" href="html/thirdOne.html">1) 用typeof查看数据类型</a></li>
<li><a target="_blank" href="html/thirdTwo.html">2) 用parseInt解析数字，并求和</a></li>
<li><a target="_blank" href="html/thirdThree.html">3) 累加按钮，自加1</a></li>
<li><a target="_blank" href="html/thirdFour.html">4) 输入两个数字，比较大小</a></li>
<li><a target="_blank" href="html/third5.html">5) 页面加载后累加，自加1</a></li>
<li><a target="_blank" href="html/third6.html">6) 判断数字是否为几位数</a></li>
<li><a target="_blank" href="html/third7.html">7) 网页计算器</a></li>
<li><a target="_blank" href="html/third8.html">8) 简易网页时钟</a></li>
<li><a target="_blank" href="html/third9.html">9) 倒计时时钟（100秒）</a></li>
</ul>
</li>
<li>
<p class="nav-title">第四课</p>
<ul class="u-nav">
<li><a target="_blank" href="html/fourth1.html">1) 二级导航栏</a></li>
<li><a target="_blank" href="html/fourth2.html">2) 自动播放一幻灯片效果</a></li>
<li><a target="_blank" href="html/fourth3.html">3) 自动改变方向一幻灯片效果</a></li>
<li><a target="_blank" href="html/fourth4.html">4) agruments应用一求出函数参数的总合</a></li>
<li><a target="_blank" href="html/fourth5.html">5) css函数一设置/读取对象的属性</a></li>
<li><a target="_blank" href="html/fourth6.html">6) 当前输入框高亮显示</a></li>
<li><a target="_blank" href="html/fourth7.html"> 7) 数组练习：各种数组方法的使用</a></li>
<li><a target="_blank" href="html/fourth8.html"> 8) 事件练习：封装兼容性添加、删除事件的函数</a></li>
<li><a target="_blank" href="html/fourth9.html"> 9) 星级评分系统</a></li>
</ul>
</li>
<li>
<p class="nav-title">第五课</p>
<ul class="u-nav">
<li><a target="_blank" href="html/five1.html">1) 模拟select控件</a></li>
<li><a target="_blank" href="html/five2.html">2) 点击页面，显示单击的坐标</a></li>
<li><a target="_blank" href="html/five3.html">3) 用户按下键盘，显示keyCode</a></li>
<li><a target="_blank" href="html/five4.html">4) 阻止右键菜单（阻止默认事件）</a></li>
<li><a target="_blank" href="html/five5.html">5) 跟随鼠标移动（大图展示）</a></li>
<li><a target="_blank" href="html/five6.html">6) 自定义右键菜单</a></li>
<li><a target="_blank" href="html/five7.html">7) 用键盘控制Div</a></li>
<li><a target="_blank" href="html/five8.html">8) Div闪烁</a></li>
</ul>
</li>
<li>
<p class="nav-title">第六课</p>
<ul class="u-nav">
<li><a target="_blank" href="html/six1.html">1) 完美拖拽</a></li>
<li><a target="_blank" href="html/six2.html">2) 仿腾讯微博效果</a></li>
<li><a target="_blank" href="html/six3.html">3) 自定义多级右键菜单</a></li>
</ul>
</li>
<li>
<p class="nav-title">第七课</p>
<ul class="u-nav">
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
</ul>
</li>
<li>
<p class="nav-title">第八课</p>
<ul class="u-nav">
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
</ul>
</li>
<li>
<p class="nav-title">第九课</p>
<ul class="u-nav">
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
</ul>
</li>
<li>
<p class="nav-title">第十课</p>
<ul class="u-nav">
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
</ul>
</li>
<li>
<p class="nav-title">项目实例</p>
<ul class="u-nav">
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
</ul>
</li>
<li>
<p class="nav-title">YUI实例</p>
<ul class="u-nav">
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
</ul>
</li>
<li>
<p class="nav-title">KISSY实例</p>
<ul class="u-nav">
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
<li><a target="_blank" href="html/"></a></li>
</ul>
</li>
</ul>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>