一、浏览器对象模型（BOM）
浏览器对象模型主要包括window、history、location和document等对象，其中window对象是整个BOM的顶层对象。
window对象下主要包括如下对象：
（1）document:窗口中当前显示的文档对象；
（2）history:保存窗口最近加载的URL；
（3）location:当前窗口的URL；
window对象的常用方法：
（1）prompt():显示可提示用户输入的对话框；
（2）alert():显示带有一个提示消息和一个确定按钮的警示框；
（3）confirm():显示一个带有提示信息、确定和取消按钮的确认框；
（4）close():关闭浏览器窗口；
（5）open():打开一个新的浏览器窗口，加载给定URL所指定的文档；
（6）setTimeout():在设定的毫秒数后调用函数或计算表达式；
（7）setInterval():按照设定的周期（以毫秒计）来重复调用函数或表达式；
（8）clearInterval():取消重复设置，与setInterval对应；
history对象方法：
（1）back():后退一个页面，相当于浏览器后退按钮；
（2）forward():前进一个页面，相对于浏览器前进按钮；
（3）go():打开一个指定位置的页面；
location对象属性和方法:
（1）href属性:获取或设置网页地址；
（2）reload方法:重新加载当前页面，相当于浏览器的刷新按钮；
一、window对象各种对话框
编写一个网页，点击不同的按钮分别实现alert,prompt,confirm对话框和实现打开关闭浏览器窗口；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Window的常用方法</title>
<script type="text/javascript">
function myAlert()
{
alert("您好!");
}
function myPrompt()
{
var sex = prompt("请输入您的性别:","男"); //参数1：提示内容，参数2：默认值
if(sex == "男")
document.getElementById("promptInfo").innerHTML = "<h1>帅哥,你好</h1>";
if(sex == "女")
document.getElementById("promptInfo").innerHTML = "<h1>美女,你好</h1>";
}
function myConfirm()
{
var boolFlag = confirm("您确定要删除此数据吗");
if(boolFlag == true)
{
document.getElementById("confirmInfo").innerHTML = "<h1>删除请求已发送</h1>";
}
}
function myOpen()
{
window.open("Demo01_adv.html","adv","height=500,width=800,location=no,menubar=no,toolbar=0,resizable=no");
}
function myClose()
{
var boolFlag = confirm("您确定要狠心关闭我吗?");
if(boolFlag == true)
{
window.close();
}
}
</script>
</head>
<body>
<input type="button" value="alert对话框" onclick="myAlert();"><br/><br/>
<input type="button" value="prompt可输入信息的对话框" onclick="myPrompt();">
<span id="promptInfo"></span>
<br/><br/>
<input type="button" value="confirm确定取消对话框" onclick="myConfirm();">
<span id="confirmInfo"></span>
<br/><br/>
<input type="button" value="open打开一个新窗口" onclick="myOpen();">
<br/><br/>
<input type="button" value="close关闭当前窗口" onclick="myClose();">
</body>
</html>
二、setTimeout实现抽奖功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setTimeout实现抽奖功能</title>
<style type="text/css">
#myTable{margin: 0px auto; width: 500px; height: 500px; }
#myTable td{border: solid 1px red; width: 100px; height: 100px;
text-align:center; font-weight: bold;}
</style>
<script type="text/javascript">
//alert(Math.random());
function GetLuckyResult()
{
var num = Math.ceil(Math.random()*25);
var obj = document.getElementById("td" + num);
obj.style.backgroundColor = "#FF0000";
obj.style.color = "black";
document.getElementById("info").innerHTML = obj.innerHTML;
}
function MyStart()
{
document.getElementById("info").innerHTML = "正在抽奖中...";
for(var i = 1;i<=25;i++)
{
var obj = document.getElementById("td" + i);
obj.style.backgroundColor = "white";
obj.style.color = "black";
}
setTimeout("GetLuckyResult()",3000);
}
</script>
</head>
<body>
<div style="text-align: center;">
<input type="button" value="开始抽奖" onclick="MyStart();">
<span id="info"></span>
</div>
<br/>
<table id="myTable">
<tr>
<td id="td1">谢谢参与</td>
<td id="td2">谢谢参与</td>
<td id="td3">谢谢参与</td>
<td id="td4">谢谢参与</td>
<td id="td5">谢谢参与</td>
</tr>
<tr>
<td id="td6">谢谢参与</td>
<td id="td7">谢谢参与</td>
<td id="td8">谢谢参与</td>
<td id="td9">谢谢参与</td>
<td id="td10">谢谢参与</td>
</tr>
<tr>
<td id="td11">谢谢参与</td>
<td id="td12">谢谢参与</td>
<td id="td13">500万大奖</td>
<td id="td14">谢谢参与</td>
<td id="td15">谢谢参与</td>
</tr>
<tr>
<td id="td16">谢谢参与</td>
<td id="td17">谢谢参与</td>
<td id="td18">谢谢参与</td>
<td id="td19">谢谢参与</td>
<td id="td20">谢谢参与</td>
</tr>
<tr>
<td id="td21">谢谢参与</td>
<td id="td22">谢谢参与</td>
<td id="td23">谢谢参与</td>
<td id="td24">谢谢参与</td>
<td id="td25">谢谢参与</td>
</tr>
</table>
</body>
</html>
三、setTimeout实现时间的延时切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setTimeout实现时间的延时切换图片</title>
<script type="text/javascript">
function changeImg()
{
document.getElementById("myImg").src = "img/knfd.jpg";
}
setTimeout("changeImg()",3000);
</script>
</head>
<body>
<img id="myImg" src="img/536.jpg" width="300" height="300">
</body>
</html>
四、setInterval实现抽奖功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval实现抽奖功能</title>
<style type="text/css">
#myTable{margin: 0px auto; width: 500px; height: 500px; }
#myTable td{border: solid 1px red;
width: 100px; height: 100px;
text-align:center; font-weight: bold;}
</style>
<script type="text/javascript">
var MyInterval;
var LuckyCount = 1;
function GetLuckyResult()
{
for(var i = 1;i<=25;i++)
{
var obj = document.getElementById("td" + i);
obj.style.backgroundColor = "white";
obj.style.color = "black";
}
var num = Math.ceil(Math.random()*25);
var obj = document.getElementById("td" + num);
obj.style.backgroundColor = "#FF0000";
obj.style.color = "black";
if(LuckyCount >= 10)
{
clearInterval(MyInterval);
document.getElementById("info").innerHTML = obj.innerHTML;
}
LuckyCount++;
}
function MyStart()
{
LuckyCount = 1;
document.getElementById("info").innerHTML = "正在抽奖中...";
MyInterval = setInterval("GetLuckyResult()",50);
}
</script>
</head>
<body>
<div style="text-align: center;">
<input type="button" value="开始抽奖" onclick="MyStart();">
<span id="info"></span>
</div>
<br/>
<table id="myTable">
<tr>
<td id="td1">谢谢参与</td>
<td id="td2">谢谢参与</td>
<td id="td3">谢谢参与</td>
<td id="td4">谢谢参与</td>
<td id="td5">谢谢参与</td>
</tr>
<tr>
<td id="td6">谢谢参与</td>
<td id="td7">谢谢参与</td>
<td id="td8">谢谢参与</td>
<td id="td9">谢谢参与</td>
<td id="td10">谢谢参与</td>
</tr>
<tr>
<td id="td11">谢谢参与</td>
<td id="td12">谢谢参与</td>
<td id="td13">500万大奖</td>
<td id="td14">谢谢参与</td>
<td id="td15">谢谢参与</td>
</tr>
<tr>
<td id="td16">谢谢参与</td>
<td id="td17">谢谢参与</td>
<td id="td18">谢谢参与</td>
<td id="td19">谢谢参与</td>
<td id="td20">谢谢参与</td>
</tr>
<tr>
<td id="td21">谢谢参与</td>
<td id="td22">谢谢参与</td>
<td id="td23">谢谢参与</td>
<td id="td24">谢谢参与</td>
<td id="td25">谢谢参与</td>
</tr>
</table>
</body>
</html>
五、setInterval实现图片的自动切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval实现图片的自动切换</title>
<script type="text/javascript">
var myInterval;
function changeImg()
{
var obj = document.getElementById("myImg");
if(obj.src.indexOf("img/536.jpg") >= 0)
obj.src = "img/knfd.jpg";
else if(obj.src.indexOf("img/knfd.jpg") >= 0)
obj.src = "img/51.jpg";
else if(obj.src.indexOf("img/51.jpg") >= 0)
obj.src = "img/ym.jpg";
else if(obj.src.indexOf("img/ym.jpg") >= 0)
obj.src = "img/536.jpg";
}
function MyPlay()
{
myInterval = setInterval("changeImg()",1000);
}
function myStop()
{
clearInterval(myInterval);
}
</script>
</head>
<body>
<img id="myImg" src="img/536.jpg" width="300" height="300"><br><br>
<input type="button" value="播放" onclick="MyPlay();">
<input type="button" value="停止" onclick="myStop();">
</body>
</html>
六、setInterval实现时钟效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval实现时钟效果</title>
<script type="text/javascript">
function ShowTime()
{
var myDate=new Date(); //获取系统时间
var myYear= myDate.getFullYear(); //取年
var myMonth=myDate.getMonth()+1; //取月
var myDay= myDate.getDate(); //取日
var myHour = myDate.getHours(); //时
var myMinute = myDate.getMinutes(); //分
var mySeconds = myDate.getSeconds(); //秒
var myWeekDay=myDate.getDay(); //取星期
if(myWeekDay == 0) myWeekDay=" 星期日 ";
else if(myWeekDay == 1) myWeekDay=" 星期一 ";
else if(myWeekDay == 2) myWeekDay=" 星期二 ";
else if(myWeekDay == 3) myWeekDay=" 星期三 ";
else if(myWeekDay == 4) myWeekDay=" 星期四 ";
else if(myWeekDay == 5) myWeekDay=" 星期五 ";
else if(myWeekDay == 6) myWeekDay=" 星期六 ";
document.getElementById("lblTime").innerHTML = myYear+"年"+myMonth+"月"+myDay+"日"
+ " " + myWeekDay + " "+ myHour + ":" + myMinute + ":" + mySeconds;
}
setInterval("ShowTime()",1000);
</script>
</head>
<body>
<h1 id="lblTime">当前时间:</h1>
</body>
</html>
七、history对象实现网页的前进后退
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是第一个页面</h1>
<a href="Demo04_02.html">我要跳转到第二个页面</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是第二个页面</h1>
<a href="Demo04_03.html">我要跳转到第三个页面</a>
<br/><br/>
<a href="javascript:history.back();">后退</a>
<br/><br/>
<a href="javascript:history.forward();">前进</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history对象</title>
</head>
<body>
<h1>我是第三个页面</h1>
<br/><br/>
<a href="javascript:history.back();">后退</a>
<br/><br/>
<a href="javascript:history.go(-2);">后退二步</a>
</body>
</html>
八、location对象实现页面刷新和跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script type="text/javascript">
function MyRefresh()
{
location.reload();
}
function ChangeUrl()
{
var objValue = document.getElementById("webUrl").value;
if(objValue.length == 0)
return;
location.href = objValue;
}
</script>
</head>
<body>
<input type="button" value="刷新" onclick="MyRefresh();" />
<select id="webUrl" onchange="ChangeUrl();">
<option value="">--请选择--</option>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.alibaba.com">阿里巴巴</option>
<option value="http://www.qq.com">腾讯</option>
</select>
</body>
</html>
二、文档对象模型（DOM）
文档对象模型（DOM）:与BOM关注浏览器的整体不同，DOM（Document Object Model）只关注浏览器所载入
的文档；
DOM把html文档看成由元素、属性和文本组成的一棵倒立的树；
一、修改标题、前景和背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改标题,背景颜色和前景颜色</title>
<script type="text/javascript">
function changeTitle()
{
document.title = document.getElementById("txtTitle").value;
}
function changeFgColor()
{
document.fgColor = document.getElementById("selFgColor").value;
}
function changeBgColor()
{
document.bgColor = document.getElementById("clBgColor").value;
}
</script>
</head>
<body>
<input type="text" id="txtTitle" /> <input type="button" value="修改标题" onclick="changeTitle();" />
文字颜色:
<select id="selFgColor" onchange="changeFgColor();">
<option value="white">白色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
<option value="yellow">黄色</option>
<option value="black">黑色</option>
</select>
背景颜色:
<input type="color" id="clBgColor" onchange="changeBgColor();" />
<br/><br/>
<p>
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，
最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
</p>
</body>
</html>
二、getElementById访问页面元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById访问页面元素</title>
<style type="text/css">
#txtTitle,#txtContent{ width: 100%;}
#txtContent{ height: 80px;}
#lblContent{ line-height: 30px;}
</style>
<script type="text/javascript">
function SetArticle()
{
var objTitle = document.getElementById("txtTitle");
var objContent = document.getElementById("txtContent");
var strContent = objContent.value;
while(true)
{
strContent = strContent.replace("\n","<br/>");
if(strContent.indexOf("\n") == -1)
break;
}
document.getElementById("lblTitle").innerHTML = objTitle.value;
document.getElementById("lblContent").innerHTML = strContent;
}
</script>
</head>
<body>
故事标题:<input type="text" id="txtTitle">
<br>
故事内容:<br>
<textarea id="txtContent"></textarea><br>
<input type="button" value="确定" onclick="SetArticle();" />
<br><br>
<h1 id="lblTitle"></h1>
<div id="lblContent"></div>
</body>
</html>
三、设置样式表
方案一：使用style属性进行设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JS设置样式表内容</title>
<style type="text/css">
#txtTitle,#txtContent{ width: 100%;}
#txtContent{ height: 80px;}
#lblContent{ line-height: 30px;}
</style>
<script type="text/javascript">
function SetArticle()
{
var objTitle = document.getElementById("txtTitle");
var objContent = document.getElementById("txtContent");
var strContent = objContent.value;
while(true)
{
strContent = strContent.replace("\n","<br/>");
if(strContent.indexOf("\n") == -1)
break;
}
document.getElementById("lblTitle").innerHTML = objTitle.value;
document.getElementById("lblContent").innerHTML = strContent;
}
//此种处理方式导致JS代码臃肿，可以将样式写在样式表中，直接切换className来实现
function setStyle()
{
var obj = document.getElementById("lblContent");
obj.style.borderColor = "red";
obj.style.borderStyle = "solid";
obj.style.borderWidth = 3;
obj.style.color = "green";
}
</script>
</head>
<body>
故事标题:<input type="text" id="txtTitle">
<br>
故事内容:<br>
<textarea id="txtContent"></textarea><br>
<input type="button" value="确定" onclick="SetArticle();" />
<input type="button" value="修改样式" onclick="setStyle();">
<br><br>
<h1 id="lblTitle"></h1>
<div id="lblContent"></div>
</body>
</html>
方案二：使用className设置样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JS设置样式表内容</title>
<style type="text/css">
#txtTitle,#txtContent{ width: 100%;}
#txtContent{ height: 80px;}
#lblContent{ line-height: 30px;}
.myContent{ border:solid 3px red; color: green;}
</style>
<script type="text/javascript">
function SetArticle()
{
var objTitle = document.getElementById("txtTitle");
var objContent = document.getElementById("txtContent");
var strContent = objContent.value;
while(true)
{
strContent = strContent.replace("\n","<br/>");
if(strContent.indexOf("\n") == -1)
break;
}
document.getElementById("lblTitle").innerHTML = objTitle.value;
document.getElementById("lblContent").innerHTML = strContent;
}
//此种处理方式导致JS代码臃肿，可以将样式写在样式表中，直接切换className来实现
function setStyle()
{
var obj = document.getElementById("lblContent");
obj.className = "myContent";
}
</script>
</head>
<body>
故事标题:<input type="text" id="txtTitle">
<br>
故事内容:<br>
<textarea id="txtContent"></textarea><br>
<input type="button" value="确定" onclick="SetArticle();" />
<input type="button" value="修改样式" onclick="setStyle();">
<br><br>
<h1 id="lblTitle"></h1>
<div id="lblContent"></div>
</body>
</html>
四、checkbox全选
方案一：使用getElementsByName获取所有CheckBox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByName获取checkbox进行全选</title>
<style type="text/css">
#myTable{ width: 900px; margin: 0px auto; background-color: #008000;}
#myTable td,#myTable th{ background-color: white;}
</style>
<script type="text/javascript">
function SelCheckBoxAll()
{
var objs = document.getElementsByName("stuItem");
var objAll = document.getElementById("selAll");
for(var i = 0;i < objs.length; i++)
{
objs[i].checked = objAll.checked;
}
}
</script>
</head>
<body>
<table cellspacing="1" id="myTable">
<tr>
<th width="20"><input type="checkbox" id="selAll" onchange="SelCheckBoxAll();" /></th>
<th width="200">姓名</th>
<th width="200">性别</th>
<th width="200">专业</th>
<th width="200">爱好</th>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>刘备</td>
<td>男</td>
<td>软件开发</td>
<td>抽烟</td>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>关羽</td>
<td>男</td>
<td>国际贸易</td>
<td>喝酒</td>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>张飞</td>
<td>男</td>
<td>园林设计</td>
<td>烫头发</td>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>赵云</td>
<td>男</td>
<td>平面设计</td>
<td>抽烟</td>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>黄忠</td>
<td>男</td>
<td>影视制作</td>
<td>玩游戏</td>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>小乔</td>
<td>女</td>
<td>高级护理</td>
<td>唱歌</td>
</tr>
</table>
</body>
</html>
方案二：使用getElementsByTagName获取所有CheckBox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByTagName获取checkbox进行全选</title>
<style type="text/css">
#myTable{ width: 900px; margin: 0px auto; background-color: #008000;}
#myTable td,#myTable th{ background-color: white;}
#myDiv{width: 900px; margin: 0px auto; height: 30px; line-height: 30px;
text-align: center;}
</style>
<script type="text/javascript">
function SelCheckBoxAll()
{
var objs = document.getElementsByTagName("input");
var objAll = document.getElementById("selAll");
for(var i = 0;i < objs.length; i++)
{
objs[i].checked = objAll.checked;
}
}
</script>
</head>
<body>
<table cellspacing="1" id="myTable">
<tr>
<th width="20"><input type="checkbox" id="selAll" onchange="SelCheckBoxAll();" /></th>
<th width="200">姓名</th>
<th width="200">性别</th>
<th width="200">专业</th>
<th width="200">爱好</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>刘备</td>
<td>男</td>
<td>软件开发</td>
<td>抽烟</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>关羽</td>
<td>男</td>
<td>国际贸易</td>
<td>喝酒</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>张飞</td>
<td>男</td>
<td>园林设计</td>
<td>烫头发</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>赵云</td>
<td>男</td>
<td>平面设计</td>
<td>抽烟</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>黄忠</td>
<td>男</td>
<td>影视制作</td>
<td>玩游戏</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>小乔</td>
<td>女</td>
<td>高级护理</td>
<td>唱歌</td>
</tr>
</table>
</body>
</html>
五、访问父子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点信息访问</title>
<style type="text/css">
#father{ width: 1000px; height: 600px; margin: 0px auto;
border: solid 10px red; text-align: center; }
#mySelf{ width: 800px; height: 400px; margin: 0px auto;
border: solid 10px red; text-align: center;}
#son1,#son2{width: 300px; height: 300px; float: left; margin-left: 50px;
border: solid 10px red; text-align: center;}
</style>
<script type="text/javascript">
//不知道父节点的id,name,tagname的情况下，可采用如下方法
function setFather(objName)
{
var obj = document.getElementById(objName);
var objFather = obj.parentNode;
objFather.style.borderColor = "green";
}
//不知道子节点的id,name,tagname的情况下，可采用如下方法
function setSons(objName)
{
var obj = document.getElementById(objName);
var objSons = obj.childNodes;
for(var i = 0;i<objSons.length;i++)
{
if(objSons[i].nodeType == 1) //判断是否为元素节点
objSons[i].style.borderColor = "green";
}
}
</script>
</head>
<body>
<div style="height: 30px; line-height: 30px; text-align: center;">
<!--<input type="color" id="myColor">-->
<input type="button" value="设置爸爸边框颜色" onclick="setFather('mySelf');" />
<input type="button" value="设置儿子边框颜色" onclick="setSons('mySelf');" />
</div>
<div id="father">
<h2>爸爸</h2>
<div id="mySelf">
<h2>我自己</h2>
<div id="son1">
<h2>大儿子</h2>
</div>
<div id="son2">
<h2>二儿子</h2>
</div>
</div>
</div>
</body>
</html>
六、动态添加和删除节点
案例一：动态添加删除DIV标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加和删除节点</title>
<script type="text/javascript">
var newNode = document.createElement("div");
function createNode()
{
newNode.style.border = "solid 2px red";
newNode.innerHTML = "这是使用JS创建的DIV节点";
document.body.appendChild(newNode);
}
function removeNode()
{
document.body.removeChild(newNode);
}
</script>
</head>
<body>
<input type="button" value="添加DIV节点" onclick="createNode();" />
<input type="button" value="删除DIV节点" onclick="removeNode();" />
</body>
</html>
案例二：动态添加删除复杂页面内容（添加删除工作经历）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加和删除节点</title>
<style type="text/css">
.myArea{ width: 100%; height: 80px;}
.myDiv{ line-height: 30px;}
</style>
<script type="text/javascript">
var workIndex = 1;
function AddRow()
{
workIndex++;
var objContainer = document.getElementById("myContainer");
var obj = document.createElement("div");
obj.id = "div"+workIndex;
obj.className = "myDiv";
obj.innerHTML = "公司名称:<input type=\"text\" /> ";
obj.innerHTML += "职位:<input type=\"text\" /> ";
obj.innerHTML += "<a href=\"javascript:RemoveRow('div"+workIndex+"')\">删除工作经历</a> ";
obj.innerHTML += "<br /> ";
obj.innerHTML += "工作职责及工作内容描述: ";
obj.innerHTML += "<textarea class=\"myArea\"></textarea><hr /> ";
objContainer.appendChild(obj);
}
function RemoveRow(objName)
{
var obj = document.getElementById(objName);
var objContainer = document.getElementById("myContainer");
objContainer.removeChild(obj);
}
</script>
</head>
<body>
<h2>工作经历</h2>
<hr/>
<div id="myContainer">
<div class="myDiv" id="div1">
公司名称:<input type="text" />
职位:<input type="text" />
<a href="javascript:RemoveRow('div1')">删除工作经历</a>
<br />
工作职责及工作内容描述:
<textarea class="myArea"></textarea>
<hr />
</div>
</div>
<div style="line-height: 30px; text-align: right;">
<a href="javascript:AddRow();">添加工作经历</a>
</div>
</body>
</html>
七、滚动图片效果
滚动图片效果一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动图片</title>
<style type="text/css">
#container{ width: 640px; height: 160px; border: solid 1px gray;
margin: 50px auto; background-color:gainsboro; font-size: 0px;
overflow: hidden;}
#container img{ margin: 0px; padding: 0px;}
</style>
</head>
<body>
<div id="container" onmouseover="StopInterval();" onmouseout="StartInterval();">
<div id="myDiv" style="width: 5000px;">
<img src="MoveImg/1.jpg" />
<img src="MoveImg/2.jpg" />
<img src="MoveImg/3.jpg" />
<img src="MoveImg/4.jpg" />
<img src="MoveImg/5.jpg" />
<img src="MoveImg/6.jpg" />
<img src="MoveImg/7.jpg" />
<img src="MoveImg/1.jpg" />
<img src="MoveImg/2.jpg" />
<img src="MoveImg/3.jpg" />
<img src="MoveImg/4.jpg" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
var myInterval;
// var direction = "left";
function MyMove(){
// var container = document.getElementById("container");
// if (container.scrollLeft == 0) direction = "left"
// if (container.scrollLeft == 480) direction = "right"
// if (direction == "left") container.scrollLeft += 2;
// if (direction == "right") container.scrollLeft -= 2;
var container = document.getElementById("container");
container.scrollLeft+=2;
if(container.scrollLeft >= 160*7)
container.scrollLeft=0;
}
myInterval = setInterval("MyMove()",20);
function StartInterval()
{
myInterval = setInterval("MyMove()",20);
}
function StopInterval()
{
clearInterval(myInterval);
}
</script>
滚动图片效果二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动图片</title>
<style type="text/css">
#container{ width: 640px; height: 160px; border: solid 1px gray;
margin: 50px auto; background-color:gainsboro; font-size: 0px;
overflow: hidden;}
#container img{ margin: 0px; padding: 0px;}
</style>
</head>
<body>
<div id="container" onmouseover="StopInterval();" onmouseout="StartInterval();">
<div id="myDiv" style="width: 5000px;">
<img src="MoveImg/1.jpg" />
<img src="MoveImg/2.jpg" />
<img src="MoveImg/3.jpg" />
<img src="MoveImg/4.jpg" />
<img src="MoveImg/5.jpg" />
<img src="MoveImg/6.jpg" />
<img src="MoveImg/7.jpg" />
<img src="MoveImg/1.jpg" />
<img src="MoveImg/2.jpg" />
<img src="MoveImg/3.jpg" />
<img src="MoveImg/4.jpg" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
function MyMove(){
var container = document.getElementById("container");
container.scrollLeft+=2;
if(container.scrollLeft >= 160*7)
container.scrollLeft=0;
if(container.scrollLeft % 160 == 0)
setTimeout("MyMove()",2000);
else
setTimeout("MyMove()",10);
}
MyMove();
</script>
