目录
01-动态给页面上添加div.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>01-动态给页面上添加div.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
02-删除替换克隆标签.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>02-删除替换克隆标签.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#one{
border: 1px solid blue;
background-color: green;
width: 300px;
height: 150px;
}
#two{
border: 1px solid blue;
background-color: aqua;
width: 250px;
height: 100px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="one" >
xxxxxx
</div>
<div id="two" >
yyyyyy
</div>
<input type="button" value="删除元素" onclick="delet()"/>
<input type="button" value="替换元素" onclick="replace()"/>
<input type="button" value="克隆和替换" onclick="clone()"/>
</body>
</html>
03-全选全不选反选.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03-全选全不选反选.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
</script>
</head>
<body>
您的爱好很广泛!!!
<br>
<input type="checkbox" id="input" />全选/全不选
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="游泳" />游泳
<input type="checkbox" name="items" value="唱歌" />唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选" />
<input type="button" name="checkall" id="checkallNo" value="全不选" />
<input type="button" name="checkall" id="check_revsern" value="反选" />
</body>
</html>
04-新闻字体.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>04-新闻字体.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.out{
border: 1px red solid;
width: 300px;
}
.max{
font-size: 32px;
color:red;
}
.mid{
font-size: 22px;
color:black;
}
.min{
font-size: 14px;
color:blue;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="out">
<div>
<a href="javascript:void(0)" onclick="">大</a>
<a href="javascript:void(0)" onclick="">中</a>
<a href="javascript:void(0)" onclick="">小</a>
</div>
<div id="news" class="min">
5月17日电 据公安部网站消息,5月17日中午,国务委员、
公安部部长郭声琨与越南中央政治局委员、
公安部部长陈大光通话,要求越方立即采取有力措施,坚决制止一切暴力活动,
严惩打砸抢不法分子,切实保护中方在越机构、企业和人员的人身财产安全。
</div>
</div>
</body>
</html>
05-表格增删.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>05-表格增删.html</title>
</head>
<script type="text/javascript">
</script>
<body>
<center>
<br>
<br> 添加用户:<br>
<br> 姓名: <input type="text" name="name" id="name" /> 电话: <input type="text"
name="tel" id="tel" /> 住址: <input type="text" name="addr" id="addr" /><br>
<br>
<button id="addUser">提交</button>
<br>
<br>
<hr>
<br>
<br>
<table id="usertable" border="1" cellpadding="5" cellspacing="0">
<tr>
<th>姓名</th>
<th>电话</th>
<th>住址</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>110</td>
<td>上海</td>
<td><a href="#" onclick="deleteMyRow(this);">删除</a>
</td>
</tr>
</table>
</center>
</body>
</html>
06-动态生成表格.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>06-动态生成表格.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table {
border: 1px red solid;
width: 300px;
border-collapse: collapse;
}
td {
border: 1px blue solid;
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
function demo() {
var rows = document.getElementById("row").value;
var cols = document.getElementById("col").value;
one = document.getElementById('one');
var tab = '<table>';
alert(tab);
for(var i = 0; i < rows; i++) {
tab += '<tr>'
alert(tab);
for(var j = 0; j < cols; j++) {
tab += "<td style='background:gray'>" + i + j + "</td>";
alert(tab);
}
tab += '</tr>'
alert(tab);
}
tab += '</table>';
alert(tab);
one.innerHTML = tab;
}
</script>
</head>
<body>
<div id="one">
</div>
输入行:<input type="text" id="row" /><br /> 输入列:
<input type="text" id="col" /><br />
<input type="button" value="创建表格" onclick="demo()" />
</body>
</html>
07-表格隔行变色.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>07-表格隔行变色.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table {
border: 1px red solid;
width: 500px;
margin: auto;
}
td {
border: 1px blue solid;
margin: 10px;
padding: 10px;
text-align: center;
}
th {
background-color: maroon;
}
.one {
background-color: blue;
}
.two {
background-color: green;
}
.over {
background-color: aqua;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr class="one">
<td>高杰</td>
<td>18</td>
<td>闵行</td>
</tr>
<tr class="two">
<td>李刚</td>
<td>16</td>
<td>上海</td>
</tr>
<tr>
<td>赵士龙</td>
<td>22</td>
<td>东莞</td>
</tr>
<tr>
<td>鲁宾</td>
<td>29</td>
<td>北京</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
</table>
</body>
</html>
08-左到右右到左.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>08-左到右右到左.html</title>
<style type="text/css">
<!--
BODY {
font-family: "宋体";
font-size: 12px;
margin: 0px 0px 0px 0px;
overflow-x: no;
overflow-y: no;
background-color: #B8D3F4;
}
td {
font_size: 12px;
}
.default_input {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}
.default_input2 {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}
.nowrite_input {
border: 1px solid #849EB5;
height: 18px;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}
.default_list {
font-size: 12px;
border: 1px solid #849EB5;
}
.default_textarea {
font-size: 12px;
border: 1px solid #849EB5;
}
.nowrite_textarea {
border: 1px solid #849EB5;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}
.wordtd5 {
font-size: 12px;
text-align: center;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd {
font-size: 12px;
text-align: left;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd_1 {
font-size: 12px;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color: #fff;
}
.wordtd_2 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}
.wordtd_3 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}
.inputtd {
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.inputtd2 {
text-align: center;
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.tablebg {
font-size: 12px;
}
.tb {
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2 {
line-height: 22px;
text-align: center;
background-color: #F6F6F6;
}
.td3 {
background-color: #B8D3F4;
text-align: center;
line-height: 20px;
}
.td4 {
background-color: #F6F6F6;
line-height: 20px;
}
.td5 {
border: #000000 solid;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
}
.tb td {
font-size: 12px;
border: 2px groove #ffffff;
}
.noborder {
border: none;
}
.button {
border: 1px ridge #ffffff;
line-height: 18px;
height: 20px;
width: 45px;
padding-top: 0px;
background: #CBDAF7;
color: #000000;
font-size: 9pt;
font-family: "宋体";
}
.textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color: transparent;
text-align: left
}
-->
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div
style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"
style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度--> <select name="first" size="10"
multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle"><input name="add" id="add" type="button" class="button"
value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" /> <input
name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left"><select name="second" size="10" multiple="multiple"
class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
09-二级联动.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>09-二级联动.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="province" name="province">
<option value="none">--请选择省--</option>
</select>
<select id="city" name="city">
<option value="none">--请选择市--</option>
</select>
</body>
</html>
var china = {
"provinces":[{
"name" : "吉林省",
city:["长春","吉林市","四平","松原","通化"]
},{
"name" : "辽宁省",
city:["沈阳","大连","鞍山","抚顺","铁岭"]
},{
"name" : "山东省",
city:["济南","青岛","威海","烟台","潍坊"]
},{
"name" : "上海市",
city:["闵行区","徐汇区"]
},{
"name" : "安徽省",
city:["合肥市","六安市"]
}]
};
10-注册页面.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>10-注册页面.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
</script>
</head>
<body>
<fieldset>
<legend>注册页面</legend>
<!-- 在form标签中有个默认的事件 -->
<form action="http://127.0.0.1:9090" method="post" onsubmit="return _validata();">
<table>
<tr>
<td>用户名称:<font color="red">*</font>
</td>
<td><input id="user" type="text" name="user" value="请输入用户名" onclick="func()"
onblur="checkuser()" /> <span style="color: red" id="userspan"></span></td>
</tr>
<tr>
<td>用户密码:</td>
<td><input id="pwd" type="text" name="pwd" onblur="checkpwd()" /> <span id="pwdspan"></span>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td><input id="repwd" type="text" name="repwd" onblur="checkrepwd()" /> <span
id="repwdspan"></span></td>
</tr>
<tr>
<td>选择性别:</td>
<td><input type="radio" name="sex" value="nan" onblur="checksex()" />男 <input type="radio"
name="sex" value="nv" onblur="checksex()" />女 <span id="sexpan"></span></td>
</tr>
<tr>
<td>选择爱好:</td>
<td><input type="checkbox" name="hobby" value="C" />C <input type="checkbox" name="hobby"
value="C++" />C++ <input type="checkbox" name="hobby" value="Java" />Java <input
type="checkbox" name="hobby" value="PHP" />PHP <input type="checkbox" name="hobby"
value=".net" />.net <span id="hspan"></span></td>
</tr>
<tr>
<td>选择国家:</td>
<td><select name="country">
<option>---请选择国家----</option>
<option value="CN">中国</option>
<option value="US">美国</option>
<option value="EN">英国</option>
</select></td>
</tr>
<tr>
<td>自我评价:</td>
<td><textarea rows="10" cols="40" name="desc">
</textarea></td>
</tr>
<tr>
<td><input type="submit" value="注册" /></td>
<td><input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>