您的位置：首页 > Web前端 > JavaScript

javascript基础笔记（十七）之js的bom对象

2016-11-10 21:16 671 查看

<span style="font-size:18px;">js的bom对象
**bom : broswer object mode1:浏览器对象模型
**有哪些对象？
**navigator：获取客户机的信息（浏览器的信息）
**screen
//screen对象
document.write("<hr/>");
document.write("高等于："+screen.width);
document.write("<br/>");
document.write("宽等于："+screen.height);

**location :请求的URL地址、
-href属性
***获取到请求的URL地址
-document.write(location.href);
**设置URL地址
--页面上安置一个按钮，按钮上绑定一个事件，当我点击
这个按钮页面就可以跳转到另外一个页面
****      <input  type="button" value="tiaozhuan"  onclick="href1();" />
----鼠标点击事件onclick=“ 鼠标点击事件（方法）”

**history：请求的url历史记录
--1、创建三个页面a.html 写一个超链接到b.html
2、创建b.html超链接到c.html
3、创建c.html
----到访问的上一个页面
history.back();
history.go(-1);

----到访问的下一页面
history.forward();
history.go(1);

**window(重点)
*窗口对象
*javascript层次级中的 顶层对象所有的bom对象都是在
window里面操作)

**方法
--window.alert();页面弹出一个框
--confirm()表示确认框（确认提示框）
--prompt(text,defaultText):输入对话框
---输入框现在很少使用了
-- window.prompt("please Input:","0");
--window.prompt("显示的内容","输入框里面的默认值");
--open(): 表示可以打开一个新的窗口
**open("URL","name","fea","");
**open("打开的新窗口的地址url","","窗口特征,比如窗口的高度和宽度")
--创建一个按钮，点击这个按钮，打开一个新的窗口
window.open("实现九九乘法表.html","","width=200,height=100");

colse()--关闭窗口（浏览器兼容性比较差不好用）
---window.close();

----做定时器
**setInterval("js代码",毫秒数);
每两秒就执行一次alert方法
window.setInterval("alert('123');",2000);

**setTimeout("js代码",毫秒数)：
--表示在毫秒数之后执行，但是只会执行一次
window.setTimeout("alert('abc');","4000");

**clearintval()：表示清除setInterval设置的定时器
var id1=setInterval("alert('123')",2000);//通过setInterval会有一个返回值
clearInterval(id1);清除掉它

**clearTimeout()：表示清除setTimeout设置的定时器
var id2=setTimeout("alert('abc');",4000);
clearTimeout(id2);</span>

代码：对照笔记看代码

nivigator

screen

location

history

<!DOCTYPE html >
<html>
<head>
<title> js的BOM信息 </title>

</head>

<body>
<input  type="button" value="tiaozhuan"  onclick="href1();" />
<script type="text/javascript">
//href
function href1(){
//alert("aaaa");
location.href="实现九九乘法表.html";//引号里面填地址
}

//navigator获取浏览器的版本
document.write(navigator.appName);
//screen对象
document.write("<hr/>");
document.write("高等于："+screen.width);
document.write("<br/>");
document.write("宽等于："+screen.height);
//loaction
document.write("<hr/>");
document.write(location.href);
</script>
</body>
</html>

以下代码介绍这些方法：

comfirm()

prompt()

open()

close()

<!DOCTYPE html>
<html>
<head>
<title> BOM对象2</title>
</head>
<body>
<input type="button" value="open" onclick="open1()">
<script type="text/javascript">
//演示confirm
/* var flag=window.confirm("是否删除?");
//alret(flag);
if(flag==true){
alert("删除成功！");
}else{
alert("删除失败！");
}
*/

//window.prompt("please Input:","0");

//open方法

function  open1(){
window.open("实现九九乘法表.html","","width=200,height=100");
}

//close()方法
//setInterval方法

</script>
</body>
</html>

以下代码介绍这些方法：

setInterval()
setTimeout()

clearInterval()

clearTimeout()

<!DOCTYPE html>
<html>
<head>
<title> HTML示例</title>
</head>
<body>
<input type="button" value="interval" onclick="clear1();" />
<br/>
<input type="button" value="timeout"onclick="clear2();" />
<script type="text/javascript">
//演示setInterval方法
var id1=setInterval("alert('123')",2000);

//演示setTimeout方法
var id2=setTimeout("alert('abc');",4000);
//4秒钟之后执行代码，但是只会执行一次。

//清除setInterval
function clear1(){
clearInterval(id1);
}
//清除setTimeout
function  clear2(){
clearTimeout(id2);
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 前端设计网页设计脚本语言 js的BOM对象

相关文章推荐

新的分享

章节导航