-
Notifications
You must be signed in to change notification settings - Fork 0
/
works.html
150 lines (147 loc) · 8.67 KB
/
works.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body, div, dl, dt, dd {
margin: 0;
padding: 0;
}
a:link, a:visited {
color: #FFFFFF;
text-decoration: none;
}
#wrap {
background: #FFFFFF;
margin: 20px auto 0;
width: 300px;
border: 12px solid #CCCCCC;
border-radius: 10px;
padding: 4px;
}
#wrap dl {
color: #fff;
}
#wrap dt {
background: #99CC00;
font-family: Tahoma;
font-size: 14px;
font-style: normal;
font-weight: 700;
}
#wrap dd {
background: #77CCFF;
font-size: 12px;
display: none;
}
#wrap dt, #wrap dd {
height: 30px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px solid #FFFFFF;
}
#wrap .current {
background: #0099FF;
}
</style>
<script>
window.onload = function () {
var getWrap = document.getElementById("wrap");
var aDt = getWrap.getElementsByTagName("dt");
for (var i = 0; i < aDt.length; i++) {
aDt[i].onclick = function () {
var aDd = this.parentNode.getElementsByTagName("dd");
for (var i = 0; i < aDd.length; i++) {
if (aDd[i].style.display == "block") { //如果显示则让它消失
aDd[i].style.display = "none";
this.className = "";
}
else {
aDd[i].style.display = "block";
this.className = "current"; //只有当dd显示的时候dt才变色
}
}
}
}
}
</script>
</head>
<body>
<div id="wrap">
<dl>
<dt>第一课(13)</dt>
<dd>1)<a href="https://tang-yue.github.io/zhinengshe-js/works/lesson1/01.html" target="_blank">全选反选不选</a></dd>
<dd>2)<a href="https://tang-yue.github.io/zhinengshe-js/works/lesson1/02.html" target="_blank">改input里的文字</a></dd>
<dd>3)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson1/03.html" target="_blank">点击按钮变div的颜色</a></dd>
<dd>4)<a href=http://tang-yue.github.io/zhinengshe-js/works/lesson1/04.html" target="_blank">点击弹出菜单栏</a></dd>
<dd>5)<a href=http://tang-yue.github.io/zhinengshe-js/works/lesson1/05.html" target="_blank">导航栏</a></dd>
<dd>6)<a href=http://tang-yue.github.io/zhinengshe-js/works/lesson1/06.html" target="_blank">传递两个参数变div的属性</a></dd>
<dd>7)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson1/07.html" target="_blank">提取行间事件</a></dd>
<dd>8)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson1/08.html" target="_blank">样式优先级</a></dd>
<dd>9)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson1/09.html" target="_blank">鼠标提示框</a></dd>
<dd>10)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson1/10.html" target="_blank">选项卡</a></dd>
<dd>11)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson1/11.html" target="_blank">表格布局的简易日历-变动整个div</a></dd>
<dd>12)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson1/12.html" target="_blank">表格布局的简易日历-变动innerHTML</a></dd>
<dd>13)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson1/13/13.html" target="_blank">网页换肤实践</a></dd>
</dl>
<dl>
<dt>第二课(6)</dt>
<dd>1)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson2/01.html" target="_blank">两个数字求和</a></dd>
<dd>2)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson2/02.html" target="_blank">argument传参求和</a></dd>
<dd>3)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson2/03.html" target="_blank">隔行变色</a></dd>
<dd>4)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson2/04.html" target="_blank">css函数获取更改行间样式</a></dd>
<dd>5)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson2/05.html" target="_blank">getStyle函数</a></dd>
<dd>6)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson2/06.html" target="_blank">sort数组排序</a></dd>
</dl>
<dl>
<dt>第三课(4)</dt>
<dd>1)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson3/01.html" target="_blank">定时器的使用</a></dd>
<dd>2)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson3/02.html" target="_blank">延时提示框</a></dd>
<dd>3)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson3/03/03.html" target="_blank">数码时钟</a></dd>
<dd>4)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson3/04/04.html" target="_blank">无缝滚动</a></dd>
</dl>
<dl>
<dt>第四课(7)</dt>
<dd>1)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson4/01.html" target="_blank">class封装函数</a></dd>
<dd>2)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson4/02.html" target="_blank">表格搜索</a></dd>
<dd>3)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson4/03.html" target="_blank">隔行变色</a></dd>
<dd>4)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson4/04.html" target="_blank">添加和删除表格</a></dd>
<dd>5)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson4/05.html" target="_blank">表格排序</a></dd>
<dd>6)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson4/06.html" target="_blank">元素的属性操作</a></dd>
<dd>7)<a href="http://tang-yue.github.io/zhinengshe-js/works/lesson4/07.html" target="_blank">子节点</a></dd>
</dl>
<dl>
<dt>第五课(14)</dt>
<dd>1)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/01.html" target="_blank">json的用法</a></dd>
<dd>2)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/2/02.html" target="_blank">运动基础</a></dd>
<dd>3)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/2/03.html" target="_blank">分享到侧边栏</a></dd>
<dd>4)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/2/04.html" target="_blank">淡入淡出</a></dd>
<dd>5)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/5/05.html" target="_blank">缓冲运动</a></dd>
<dd>6)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/5/06.html" target="_blank">对联悬浮框</a></dd>
<dd>7)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/5/07.html" target="_blank">右侧悬浮框</a></dd>
<dd>8)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/5/08.html" target="_blank">运动的停止条件</a></dd>
<dd>9)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/9/09.html" target="_blank">多物体变宽度</a></dd>
<dd>10)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/9/10.html" target="_blank">多物体变透明度</a></dd>
<dd>11)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/9/11.html" target="_blank">多物体一个变宽度一个变高度</a></dd>
<dd>12)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/9/12.html " target="_blank">任意值运动框架</a></dd>
<dd>13)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/13/13.html" target="_blank">flash图片播放</a></dd>
<dd>14)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson5/14/14.html" target="_blank">幻灯片上下滑动</a></dd>
</dl>
<dl>
<dt>第六课(11)</dt>
<dd>1)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson6/01.html" target="_blank">带框的拖拽</a></dd>
<dd>2)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson6/02.html" target="_blank">高级拖拽</a></dd>
<dd>3)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson6/03.html" target="_blank">高级拖拽的磁性吸附</a></dd>
<dd>4)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson6/04.html" target="_blank">简易拖拽</a></dd>
<dd>5)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson6/05.html" target="_blank">键盘控制div的移动</a></dd>
<dd>6)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson6/06.html" target="_blank">事件绑定函数</a></dd>
<dd>7)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson6/07.html" target="_blank">完美拖拽</a></dd>
<dd>8)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson6/08.html" target="_blank">右键菜单</a></dd>
<dd>9)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson6/09.html" target="_blank">只能输入数字的输入框</a></dd>
<dd>10)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson6/10.html" target="_blank">自定义滚动条控制文字</a></dd>
<dd>11)<a href="http://www.tang-yue.github.io/zhinengshe-js/works/lesson6/11.html" target="_blank">自定义滚动条控制物体的大小透明度</a></dd>
</dl>
</div>
</body>
</html>