html部分（大综合）：
<body>
<div id="div-color1"></div>
<input type="button" value="背景变黄" onclick="changColor(this)" />
<input type="button" value="背景变红" onclick="changColor(this)"/>
<input type="button" value="背景变黑" onclick="changColor(this)"/>
<input type="button" value="恢复原样" onclick="changColor(this)"/>
<div id="div-color2"></div>
<input type="button" value="背景变窄" onclick="Change(this)"/>
<input type="button" value="背景变黄" onclick="Change(this)"/>
<input type="button" value="背景变高" onclick="Change(this)"/>
<input type="button" value="恢复原样" onclick="Change(this)"/>
<br /><br />
<input type="text" value="你拍一 我拍一" id="name"/>
<input type="button" value="改变文字" onclick="changname()"/>
<input type="button" value="添加title属性(鼠标经过)" id="name1" onmouseover="addtitle()"/>
<br /><br />
<input type="button" value="循环出现提示框5次" onclick="xunhuan()"/>
<br /><br />
<input type="button" value="批量修改样式" onclick="yangshi()"/>
<div id="div-max">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
<br /><br />
<p>1.字符串相加</p>
<input type="text" id="txt1" />+<input type="text" id="txt2" /><input type="button" value="求和" onclick="qiuhe()" />
<br /><br />
<p>2.字符串相加</p>
<input type="text" id="txt3" />+<input type="text" id="txt4" /><input type="button" value="求和" onclick="qiuhe1()" />
<br /><br />
<p>3.判断是否NaN</p>
<input type="text" id="num" /><input type="button" value="检测" onclick="jc()" />
<br /><br />
<p>4.相加3</p>
<input type="text" id="txt5" placeholder="支持整数运算"/>+<input type="text" id="txt6" placeholder="支持整数运算"/><input type="button" value="求和" onclick="qiuhe2()" />
<br /><br />
<p>5.问候</p>
<input type="text" id="xingming" placeholder="姓名"/>
<select id="xuanze">
<option>性别</option>
<option value="男" >男</option>
<option value="女" >女</option>
</select>
<input type="button" value="问候" onclick="wenhou()" />
<br /><br />
<p>6.单双数</p>
<input type="text" placeholder="数字" id="ds" /><input type="button" value="判断单双" onclick="danshuang()" />
<p>7.日历</p>
<ul id="u1">
<li onmousemove="rili(1)" onmouseout="xiaoxi(1)"><h2 id="H1">1<p>JAN</p></h2></li>
<li onmousemove="rili(2)" onmouseout="xiaoxi(2)"><h2 id="H2">2<p>FER</p></h2></li>
<li onmousemove="rili(3)" onmouseout="xiaoxi(3)"><h2 id="H3">3<p>MAR</p></h2></li>
<li onmousemove="rili(4)" onmouseout="xiaoxi(4)"><h2 id="H4">4<p>APR</p></h2></li>
<li onmousemove="rili(5)" onmouseout="xiaoxi(5)"><h2 id="H5">5<p>MAY</p></h2></li>
<li onmousemove="rili(6)" onmouseout="xiaoxi(6)"><h2 id="H6">6<p>JUN</p></h2></li>
<li onmousemove="rili(7)" onmouseout="xiaoxi(7)"><h2 id="H7">7<p>JUL</p></h2></li>
<li onmousemove="rili(8)" onmouseout="xiaoxi(8)"><h2 id="H8">8<p>AUG</p></h2></li>
<li onmousemove="rili(9)" onmouseout="xiaoxi(9)"><h2 id="H9">9<p>SEP</p></h2></li>
<li onmousemove="rili(10)" onmouseout="xiaoxi(10)"><h2 id="H10">10<p>OCT</p></h2></li>
<li onmousemove="rili(11)" onmouseout="xiaoxi(11)"><h2 id="H11">11<p>NOV</p></h2></li>
<li onmousemove="rili(12)" onmouseout="xiaoxi(12)"><h2 id="H12">12<p>DEC</p></h2></li>
<div id="foot12">
<div id="yue1" style="display: none;"><h3>1月活动</h3><p>这是一月活动内容</p></div>
<div id="yue2" style="display: none;"><h3>2月活动</h3><p>这是二月活动内容</p></div>
<div id="yue3" style="display: none;"><h3>3月活动</h3><p>这是三月活动内容</p></div>
<div id="yue4" style="display: none;"><h3>4月活动</h3><p>这是四月活动内容</p></div>
<div id="yue5" style="display: none;"><h3>5月活动</h3><p>这是五月活动内容</p></div>
<div id="yue6" style="display: none;"><h3>6月活动</h3><p>这是六月活动内容</p></div>
<div id="yue7" style="display: none;"><h3>7月活动</h3><p>这是七月活动内容</p></div>
<div id="yue8" style="display: none;"><h3>8月活动</h3><p>这是八月活动内容</p></div>
<div id="yue9" style="display: none;"><h3>9月活动</h3><p>这是九月活动内容</p></div>
<div id="yue10" style="display: none;"><h3>10月活动</h3><p>这是十月活动内容</p></div>
<div id="yue11" style="display: none;"><h3>11月活动</h3><p>这是十一月活动内容</p></div>
<div id="yue12" style="display: none;"><h3>12月活动</h3><p>这是十二月活动内容</p></div>
</div>
</ul>
<br /><br /><br />
<p>8.数组输出练习</p>
<div id="div-sz">
<p>已知数组内容：1.这是第一句，2.这是第二句，3.这个第三句，4.这是第四句</p>
<input type="button" value="提取1" onclick="tiqu(1)" />
<input type="button" value="提取2" onclick="tiqu(2)" />
<input type="button" value="提取3" onclick="tiqu(3)" />
<input type="button" value="提取4" onclick="tiqu(4)" />
<input type="button" value="全部弹出提取" onclick="tiqu(5)" />
</div>
<div id="div-xs">
显示：
</div>
<br /><br />
<p>9.鼠标经过变换</p>
<ul id="u2">
<li class="u2" onmouseover="show_lm(1)" >栏目一</li>
<li class="u2" onmouseover="show_lm(2)" >栏目二</li>
<li class="u2" onmouseover="show_lm(3)" >栏目三</li>
<li class="u2" onmouseover="show_lm(4)" >栏目四</li>
</ul>
<div id="div_lm">
<div id="tag1" class="tag" style="display: none">栏目一的内容 栏目一的内容 栏目一的内容 栏目一的内容</div>
<div id="tag2" class="tag" style="display: none">栏目二的内容 栏目二的内容 栏目二的内容 栏目二的内容</div>
<div id="tag3" class="tag" style="display: none">栏目三的内容 栏目三的内容 栏目三的内容 栏目三的内容</div>
<div id="tag4" class="tag" style="display: none">栏目四的内容 栏目四的内容 栏目四的内容 栏目四的内容</div>
</div>
<br /><br />
<p>9.鼠标点击变换</p>
<ul id="u2">
<li class="u3" onclick="show_lm1(1)" >栏目一</li>
<li class="u3" onclick="show_lm1(2)" >栏目二</li>
<li class="u3" onclick="show_lm1(3)" >栏目三</li>
<li class="u3" onclick="show_lm1(4)" >栏目四</li>
</ul>
<div id="div_lm">
<div id="tagg1" class="tag" style="display: none">栏目一的内容 栏目一的内容 栏目一的内容 栏目一的内容</div>
<div id="tagg2" class="tag" style="display: none">栏目二的内容 栏目二的内容 栏目二的内容 栏目二的内容</div>
<div id="tagg3" class="tag" style="display: none">栏目三的内容 栏目三的内容 栏目三的内容 栏目三的内容</div>
<div id="tagg4" class="tag" style="display: none">栏目四的内容 栏目四的内容 栏目四的内容 栏目四的内容</div>
</div>
<p>11.innerHTML的基本使用</p>
<input type="text" id="div_text" placeholder="在这里输入文字"/><input type="button" onclick="tijiaohou()" value="提交"/>
<div id="d2">
提交后在这里显示：
</div>
<br /><br />
<p>12.innerHTML,字符串，判断的基本使用</p>
<input type="text" id="div_text1" placeholder="在这里输入文字"/>+<input type="text" id="div_text2" placeholder="在这里输入文字"/><input type="button" onclick="tijiaohou1()" value="提交"/>
<div id="d3">
提交后在这里显示：
</div>
<br /><br />
</body>
- 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
- 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
2.CSS样式（css1.css）：
#div-color1{
width: 150px;
height: 150px;
margin-bottom: 30px;
background-color: blue;
}
#div-color2{
width: 150px;
height: 150px;
margin-bottom: 30px;
background-color: blue;
}
#div{
width: 230px;
height: 60px;
}
#div1{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div2{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div3{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div4{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#div5{
width: 50px;
height: 50px;
float: left;
margin-left: 5px;
border: 1px red solid;
}
#u1{
width: 246px;
height: 375px;
background-color:#EAE9E9;
border: 1px gray solid;
}
ul li {
text-align: center;
float: left;
width: 59px;
height:54px;
color: white;
font-size: 12px;
margin-top: 10px;
margin-left: 15px;
background-color: black;
}
#foot12{
float: left;
width: 206px;
height: 67px;
margin: 0 auto;
margin-top: 15px;
margin-left: 15px;
border: 1px white solid;
background-color: #F1F1F1;
}
.u2{
float: left;
width: 53px;
height:30px;
text-align: center;
background-color: #5BC0DE;
}
.u3{
float: left;
width: 53px;
height:30px;
text-align: center;
background-color: #5CB85C;
}
#div_lm{
margin-top: 40px;
width: 300px;
height:100px;
background-color:#D9EDF7 ;
}
.tag{
width: 100px;
}
- 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
- 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
3.CSS样式（base.css）:
html,body,head,ul,li,ol,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,img{
margin: 0;
padding: 0;
}
form,input,select,textarea{margin: 0;padding: 0;}
img{vertical-align: middle;}
li{list-style: none;}
a{text-decoration: none;}
.clear{clear: both;font-size: 0px;}
.left{float: left;}
.right{float: right;}