#JavaScript操作BOM对象
BOM:浏览器对象模型（Browser Object Model）
window对象常用的方法有哪些？并举例说明其用法
访问页面中带有ID的元素使用什么方法？
定时函数有几种，其作用分别是什么？
如何在页面上实现前进、后退？
课件
1BOM模型
BOM可实现功能
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退
2Window对象
常用属性
常用方法
confirm()方法
open()方法
3History对象
4Location对象
34应用
5Document对象
常用方法
方法1
方法2
JavaScript内置对象
Array：用于在单独的变量名中存储一系列的值
String：用于支持对字符串的处理
Math：用于执行常用的数学任务
它包含了若干个数字常量和函数
随机选择颜色
Date：用于操作日期和时间
方法
时钟特效
定时函数
总结
代码
1确认对话框-confirm
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>确认对话框</title>
</head>
<body>
<script type="text/javascript">
var flag=confirm("确认要删除此条信息吗?");
if(flag==true){
alert("删除成功!");
}else{
alert("你取消了删除");
}
</script>
</body>
</html>
2window对象操作窗口window.open/close
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>广告页面</title>
<style type="text/css">
body,img{margin: 0;padding: 0;}
img{border: 0;}
</style>
</head>
<body>
<img src="images/adver.jpg" />
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>window对象操作窗口</title>
<style type="text/css">
body,ul,li,div,p,h1,h2{margin: 0;padding: 0;}
.content{width: 746px; margin: 0 auto;}
.logo{margin: 10px 0;}
.logo span{
display: inline-block;
float: right;
width: 60px;
height: 30px;
line-height: 30px;
font-size: 14px;
font-family: "微软雅黑";
background: #ff0000;
color: #ffffff;
text-align: center;
border-radius: 10px;
margin-top: 5px;
cursor: pointer;
font-weight: bold;
}
</style>
</head>
<body onload="open_adv();">
<div class="content">
<div class="logo">
<img src="images/dd_logo.jpg"><span onclick="close_plan();">关闭</span>
<img src="images/dd_logo.jpg"><span onclick="open_adv();">打开</span>
</div>
<img src="images/shopping.jpg"/>
</div>
<script type="text/javascript">
/*弹出窗口*/
function open_adv(){
window.open("adv.html");
}
/*关闭窗口*/
function close_plan(){
window.close();
}
</script>
</body>
</html>
3location和history对象.href=’xxx.html’/reload和.back
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回主页面</a>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>主页面</title>
<style type="text/css">
body{
margin: 0px auto;
text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鲜花" /><br />
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>鲜花详情页面</title>
<style type="text/css">
body{
font-size:12px;
line-height:20px;
margin: 0px 10px;
}
p{font-size:14px;
font-weight:bold;
}
</style>
</head>
<body>
<img src="images/flow.jpg" />
<p style="text-align:right;"><a href="javascript:history.back()">返回主页面</a></p>
<p>服务提示：</p>非节日期间，可指定时间段送达；并且允许指定送达收货人的最快时间为两小时；节日期间，只保证当日送达。<br />
配送范围：<br />
鲜花配送范围：北京、上海、深圳、天津、广州、重庆等各大中城市。<br />
蛋糕、果篮配送范围：全国大中城市。<br />
绿植配送范围：仅限于直辖市，省会城市市区。<br />
更多详细的配送区域与相应配送费率请点击这里！<br />
配送方式：<br />
专业鲜花、蛋糕礼品速递机构，送货上门。 <br />
服务时间：<br />
全年365天，节假日不休息，24小时接单； 每日送花时间：8:00-20：00。<br />
其它时间送花酌情加收10-30服务费用。 <br />
替换原则：<br />由于地域或季节的限制，需要更换主花材时，我们将电话向订货人提出更换建议，假如在有效配送时间内得不到订货人的确认，我们将采用同等价值或相同寓意的花材代替。实际送花以图片为参考，以商品规格文字说明为主。鲜花为手工做品，实际花束可能会与图示有些出入，但我们保证鲜花的主花材品种、新鲜程度、数量、颜色与说明一致。<br />
</body>
</html>
4判断页面来源并跳转- if(preUrl==""){
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>领奖页面</title>
<style type="text/css">
body,h1{margin: 0;padding: 0;}
.prize{text-align: center;}
</style>
</head>
<body>
<div class="prize">
<img src="images/d1.jpg" alt="中奖" />
<h1><a href="praise.html">马上去领奖啦！</a></h1>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>奖品显示页面</title>
<style type="text/css">
body{margin: 0;}
</style>
</head>
<body>
<script type="text/javascript">
var preUrl=document.referrer; //载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入，5秒后将自动跳转到登录页面</h2>");
setTimeout("location.href='login.html'",5000);//使用setTimeout延迟5秒后自动跳转
}
else{
document.write("<h2>大奖赶快拿啦！笔记本！数码相机！</h2>");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>登录页面</title>
<style type="text/css">
body{margin: 0;}
</style>
</head>
<body>
<img src="images/login.jpg" alt="登录图片"/>
</body>
</html>
5document对象的应用getElementBy|?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用document对象操作页面</title>
<style type="text/css">
body,input,div,p,{margin: 0;padding: 0;}
body{font-size: 14px; font-family: "微软雅黑"; line-height: 25px;}
.content{width: 550px; margin: 0 auto;}
.content img{ float: left; width: 150px;}
.r{float: left; width: 400px;}
input[name="changeBook"]{
width: 100px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 14px; font-family: "微软雅黑";
margin: 10px 0 10px 0;
}
input[name="season"]{
width: 50px; text-align: center;
}
</style>
</head>
<body>
<div class="content">
<img src="images/book.jpg" alt="岛上书店"/>
<div class="r">
<div id="book">书名：岛上书店</div>
<input name="changeBook" value="换换名称" type="button" onclick="alterBook();" /><br>
四季名称：
<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" /><br><br>
<input name="b2" type="button" value="input内容" onclick= "all_input()" />
<input name="b3" type="button" value="四季名称" onclick="s_input()" />
<input name="b4" type="button" value="清空页面内容" onclick="clearAll()" />
<p id="replace"></p>
</div>
</div>
<script type="text/javascript">
function alterBook(){
document.getElementById("book").innerHTML="现象级全球畅销书";
}
function all_input(){
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
}
function s_input(){
var aInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
}
function clearAll(){
document.write("");
}
</script>
</body>
</html>
6时钟特效Date,getHours
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>时钟特效</title>
</head>
<body>
<div id="myclock"></div>
<script type="text/javascript">
function disptime(){
var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();//获得分钟
var ss = today.getSeconds();//获得秒
/*设置div的内容为当前时间*/
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
disptime();
</script>
</body>
</html>
7选择颜色random
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择颜色</title>
<style type="text/css">
#color{font-family: "微软雅黑";
font-size: 16px;
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<body>
<div>
本次选择的颜色是：<span id="color"></span>
<input type="button" value="选择颜色" onclick="selColor();">
</div>
<script type="text/javascript">
function selColor(){
var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
var num=Math.ceil(Math.random()*7)-1;
document.getElementById("color").innerHTML=color[num];
}
</script>
</body>
</html>
8定时函数setInterval
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定时函数</title>
</head>
<body>
<input name="s" type="button" value="显示提示消息" onclick="timer()" />
<script type="text/javascript">
function timer(){
setInterval("alert('3 seconds')",3000);
}
</script>
</body>
</html>
9时钟特效动起来了6,8结合区别setTimeout
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>时钟特效</title>
</head>
<body>
<div id="myclock"></div>
<script type="text/javascript">
function disptime(){
var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();//获得分钟
var ss = today.getSeconds();//获得秒
/*设置div的内容为当前时间*/
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
/*使用setInterval()每间隔指定毫秒后调用disptime()*/
var myTime = setInterval("disptime()",1000);
</script>
</body>
</html>
10清除时钟特效clearInterval
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>时钟特效</title>
</head>
<body>
<div id="myclock"></div>
<input type="button" onclick="javaScript:clearInterval(myTime)" value="停止">
<script type="text/javascript">
function disptime(){
var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();//获得分钟
var ss = today.getSeconds();//获得秒
/*设置div的内容为当前时间*/
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
/*使用setInterval()每间隔指定毫秒后调用disptime()*/
var myTime = setInterval("disptime()",1000);
</script>
</body>
</html>
995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
