目录
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">
window.onload=function () {
//页面上神马都没有
//创建div标签
var divobj=document.createElement("div");
divobj.style.width="200px";
divobj.style.height="200px";
divobj.style.backgroundColor="red";
//放到某一个节点下
document.body.appendChild(divobj);
}
</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">
//我们现在要去删除第一个div
//已经有单击事件
function delet() {
//移除该标签
//先要获取该标签
var oneobj=document.getElementById("one");
//所有标签他都不能自己操作自己
//先获取父标签
var bodyobj=oneobj.parentNode;
//可以删除
bodyobj.removeChild(oneobj);
}
function replace() {
//移除该标签
//先要获取该标签
var oneobj=document.getElementById("one");
//所有标签他都不能自己操作自己
//获取替换的对象
var twoobj=document.getElementById("two");
//先获取父标签
var bodyobj=oneobj.parentNode;
//可以删除
bodyobj.replaceChild(twoobj,oneobj);
}
function clone() {
//移除该标签
//先要获取该标签
var oneobj=document.getElementById("one");
//所有标签他都不能自己操作自己
//获取替换的对象
var twoobj=document.getElementById("two");
//先获取父标签
var bodyobj=oneobj.parentNode;
//可以删除
bodyobj.replaceChild(twoobj.cloneNode(true),oneobj);
}
</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">
window.onload=function () {
//首先要给全选这个按钮绑定事件
//现货区该标签对象
var chechall=document.getElementById("checkall");
chechall.onclick=function () {
//拿到的是一个name属性为items的集合
var items=document.getElementsByName("items");
//选中状态
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
}
var checkallNo=document.getElementById("checkallNo");
checkallNo.onclick=function () {
//拿到的是一个name属性为items的集合
var items=document.getElementsByName("items");
//选中状态
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
}
var check_revsern=document.getElementById("check_revsern");
check_revsern.onclick=function () {
//拿到的是一个name属性为items的集合
var items=document.getElementsByName("items");
//选中状态
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
}
}
}
</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">
function big(){
var news=document.getElementById("news");
news.className="max";
}
function mid(){
var news=document.getElementById("news");
news.className="mid";
}
function small(){
var news=document.getElementById("news");
news.className="min";
}
</script>
</head>
<body>
<div class="out">
<div>
<a href="javascript:void(0)" onclick="big()">大</a>
<a href="javascript:void(0)" onclick="mid()">中</a>
<a href="javascript:void(0)" onclick="small()">小</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">
function deleteMyRow(a) {
a.parentNode.parentNode.remove();
}
function addUser() {
var name = document.getElementById("name");
var id = document.getElementById("tel");
var addr = document.getElementById("addr");
var rowNums = document.getElementById("usertable").rows.length;
var irow = document.getElementById("usertable").insertRow(rowNums);
var cell0 = irow.insertCell(0);
var cell1 = irow.insertCell(1);
var cell2 = irow.insertCell(2);
var cell3 = irow.insertCell(3);
cell0.innerHTML = name.value;
cell1.innerHTML=id.value;
cell2.innerHTML=addr.value;
cell3.innerHTML="<a href='#' onclick='deleteMyRow(this)'>删除</a>";
}
</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" onclick="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">
window.onload = function() {
var tab=document.getElementById("info");
var len = document.getElementById("info").rows.length;
for(var i = 3; i <= len - 2; i++) {
if(i % 2 == 1) tab.rows[i].className = "one";
else tab.rows[i].className = "two";
}
tab.rows[i].className = "over";
}
</script>
</head>
<body>
<table id="info">
<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">
function single(a, b,c) {
try {
for(i = 0; i <= a.options.length; i++) {
if(a.options[i].selected) {
var sel = a.options[i];
b.options.add(new Option(sel.text, sel.value));
a.options[i].remove(i);
i = i - 1;
if(c==true) break;
}
}
} catch(e) {}
}
</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="-->" onclick="single(document.getElementById('first'),document.getElementById('second'),true)" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" onclick="single(document.getElementById('first'),document.getElementById('second'))" />
<input name="remove" id="remove" type="button" class="button" value="<--" onclick="single(document.getElementById('second'),document.getElementById('first'),true)"/>
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" onclick="single(document.getElementById('second'),document.getElementById('first'))" />
</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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS实现二级联动菜单</title>
</head>
<body>
<form name="form1" method="post" action="">
省份：<select name="province" id="province" onchange="changeSelect(this.selectedIndex)"></select>
地区：<select name="city" id="city"></select>
</form>
</body>
</html>
<script type="text/javascript">
var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省"];
var arr_city = [
["请选择城市/地区"],
["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],
['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],
['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],
['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],
['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],
['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市']
];
//网页加载完成，初始化菜单
window.onload = init;//传入函数地址
function init(){
//首先获取对象
var province = document.form1.province;
var city = document.form1.city;
//指定省份中<option>标记的个数
province.length = arr_province.length;
//循环将数组中的数据写入<option>标记中
for(var i=0;i<arr_province.length;i++){
province.options[i].text = arr_province[i];
province.options[i].value = arr_province[i];
}
//修改省份列表的默认选择项
var index = 0;
province.selectedIndex = index;
//指定城市中<option>标记的个数
city.length = arr_city[index].length;
//循环将数组中的数据写入<option>标记中
for (var j = 0; j<arr_city[index].length;j++) {
city.options[j].text = arr_city[index][j];
city.options[j].value = arr_city[index][j];
}
}
function changeSelect(index){
//选择对象
var city = document.form1.city;
//修改省份列表的选择项
province.selectedIndex = index;
//指定城市中<option>标记的个数
city.length = arr_city[index].length;
//循环将数组中的数据写入<option>标记中
for (var j = 0; j<arr_city[index].length;j++) {
city.options[j].text = arr_city[index][j];
city.options[j].value = arr_city[index][j];
}
}
</script>