BOM模型
BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
BOM可实现功能
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口的大小
- 页面的前进、后退
window对象
常用属性
| 属性名称 | 说明 |
|---|---|
| history | 有关客户访问过的URL信息 |
| location | 有关当前URL的信息 |
//window.属性名= "属性值"
window.location="http://www.baidu.com" ;
常用方法
| 方法名称 | 说明 |
|---|---|
| prompt() | 显示可提示用户输入的对话框 |
| alter() | 显示带有一个提示信息和一个确定按钮的警示框 |
| confirm() | 显示一个带有提示信息、确定和取消按钮的对话框 |
| close() | 关闭浏览器窗口 |
| open() | 打开一个新的浏览器窗口，加载给定URL所指定的文档 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或者表达式 |
confirm()
confirm()：将弹出一个确认对话框
<script type="text/javascript">
var flag=confirm("确认要删除此条信息吗？");
if(flag==true)
alert("删除成功！");
else
alert("你取消了删除");
</script>
confirm()与alert ()、 prompt()区别
- alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
- prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
- confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
open()
window.open("弹出窗口的url","窗口名称","窗口特征”)
案例：制作提示消息
需求说明
1.单击“半闭”按钮时，关闭当前页面购物车页面
2.单击“移入收藏”弹出收藏提示
3.单击“删除”弹出确认删除提示
4.单击“结算”按钮，弹出结算信息页面窗口
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<script>
function closes()
{
window.close();
}
function love()
{
alert("成功加入收藏！");
}
function deletes()
{
var flag=confirm("确定要删除宝贝吗？");
if(flag)
{
alert("删除成功！");
}
}
function account()
{
var flag=confirm("您本次购买商品总计：35.00元；\n请确认以上信息是否有误！！！");
if(flag)
{
alert("您的订单已提交");
}
}
</script>
<input type="button" name="clo" value="关闭" onclick="closes()"/>
<input type="button" name="shou" value="移入收藏" onclick="love()"/>
<input type="button" name="delete" value="删除" onclick="deletes()"/>
<input type="button" name="account" value="结算" onclick="account()"/>
</body>
</html>
history对象和location对象
history对象
注意：
//浏览器中的“后退”，两者等价
history.back();
history.go(-1);
//浏览器中的“前进”，两者等价
history.forward();
history.go(1);
location对象
常用属性
| 名称 | 说明 |
|---|---|
| host | 设置或返回主机名和当前URL端口号 |
| hostname | 设置或返回当前URL主机名 |
| href | 设置或返回完整的URL |
常用方法
| 名称 | 说明 |
|---|---|
| reload() | 重新加载当前文档 |
| replace() | 用新的文档替换当前文档 |
示例：主页面使用href实现跳转和刷新本页
main.html：
<!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>
<a href="javascript:location.href='flower.html'">查看详情</a>
<a href="javascript:location.reload()">刷新本页</a>
</body>
</html>
flower.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>
Document对象
常用属性
| 名称 | 说明 |
|---|---|
| referrer | 返回载入当前文档的URL |
| URL | 返回当前文档的URL |
document.referrer
document.URL
Document对象应用
判断页面是否是链接进入
自动跳转到登录页面
var preUrl=document.referrer; //载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入，5秒后将自动
跳转到登录页面</h2>");
setTimeout("javascript:location.href='login.html'",5000);
}
常用方法
示例：Document对象访问页面元素
<!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>
JavaScript内置对象
Array
用于在单独的变量名中存储一系列的值
String
用于支持对字符串的处理
Date
用于操作日期和时间
/*
var 日期对象=new Date(参数)
参数格式：MM DD,YYYY,hh:mm:ss (M：月，D：日，Y：年)
*/
var today=new Date(); //返回当前日期和时间
var tdate=new Date("september 1,2013,14:58:12");
常用方法
示例：使用Date对象的方法显示当前时间的小时、分钟和秒
function disptime(){
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
disptime();
Math
用于执行常用的数学任务，它包含了若干个数字常量和函数
如何实现返回的整数范围为2~99？
var iNum=Math.floor(Math.random()*98+2);
定时函数
setTimeout()
//setTimeout("调用的函数",等待的毫秒数)
var myTime＝setTimeout("disptime() ", 1000 );
<input name="s" type="button" value="显示提示消息" onclick="timer()" />
function timer(){
var t=setTimeout("alert('3 seconds')",3000);
}
setInterval()
//setInterval("调用的函数",间隔的毫秒数)
var myTime＝setInterval("disptime() ", 1000 );
注意：如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()
clearTimeout()
//clearTimeout(setTimeOut()返回的ID值)
var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime);
clearInterval ()
//clearInterval(setInterval()返回的ID值)
var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime);
总结
7544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
