javascript中的BOM

最新推荐文章于 2024-04-08 20:36:59 发布

活在当下_未来可期

最新推荐文章于 2024-04-08 20:36:59 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： javascript BOM 弹窗 cookie 计时事件

本文链接：https://blog.youkuaiyun.com/Paranoid99/article/details/77149554

web前端专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍了浏览器对象模型(BOM)中常见的对象及其方法，如window对象的使用，包括弹窗、计时器等功能，并讲解了如何利用这些功能进行网页开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BOM：browser object model 浏览器对象模板

1常用对象

window：浏览器的窗口

我们定义的全局变量和全局函数都是window对象的属性和方法

var a = 1;
function test(){
  var a = 2 ;
    alert(a);
    alert(window.a);
}

全局变量是window的属性，全局函数是window的方法。

窗口body的宽度：window.innerWidth

窗口body的高度：window.innerHeight

常用的方法：

open：打开一个新的窗口。要传三个参数第一个为将要打开窗口的路径，第二个为打开方式，第三个为对于新打开浏览器的描述（宽和高等）。

var myWindow = window.open("http://www.baidu.com", "_blank","width=200,height=300");

close：关闭一个窗口。

myWindow.close();

moveto：移动一个窗口。以窗口的左上角为坐标起点

function removeWin(){
    //一个窗口的左上角为移动窗口的坐标
    myWindow.moveTo(200,200);
    myWindow.focus();     //窗口获得焦点
}

focus：使窗口获得焦点

resizeto：改变窗口的大小

myWindow.resizeTo(1000,1500); //调整窗口的大小

screen：屏幕，是window下面的一个对象，在使用的时候可以用window。screen，也可以把window省略。

屏幕的常用属性：宽，高；可用宽和可用高（可用高不包括任务栏）

var scrWidth= window.screen.width; //此处window可省略
var scrHeight= screen.height;
document.write("屏幕的宽："+scrWidth+"屏幕的高："+scrHeight+"<br>");
var scrAviWidth= screen.availWidth;
var scrAviHeight = screen.availHeight;
document.write("屏幕的宽："+scrWidth+"屏幕的高："+scrHeight+"<br>");

location：地址

常用属性：href完整路径 port端口号 pathname路径名 protocol协议

常用方法：

打开一个新的路径（窗口）

function newLocation(){
location.assign("http://www.runoob.com");
}

刷新：普通刷新和强制刷新

function reloadDoc(){
location.reload(); //如果传值为true那么就是强制刷新
}

history：历史记录

记录当前窗口的历史，可以进行页面的转换。

back：返回上一页

forward：进入下一页

go：进入确定的哪一页（-1时为回到上一页）

history.back();

history.forward();

history.go(-1);

2弹窗

alert()：警告提示框，也是window对象下的方法，window可以省略不写。

alert("提示的内容"); //警告提示框

显示结果：

prompt(“提示的信息”，“默认值”)：信息提示输入框，也是window对象下的方法，window可以省略不写。当点击了确定后才把值返回否则返回为空

var str = prompt("请输入内容","helloworld");//信息提示输入框

confirm(“提示的信息”)确认框，也是window对象下的方法，window可以省略不写，当点击确定的时候，返回true，如果点取消返回false。

var isRight= confirm("是否确定删除");
document.write(typeof(isRight) + isRight);

3cookie

cookie的作用：在本地浏览器存储数据。常用于记住账号等

cookie的组成：

键值对的形式

存储的数据：“userId=123456;psd=123345;”

有效期：“expires=今天以后的时间”

存储cookie：

按照cookie的格式写好一个字符串，然后将它赋值给document.cookie,浏览器就存了这个cookie。可以存储多个键值对，但是键的名字不能重复。

var psd = document.getElementById("psd").value;
    var date = new Date();
    date.setDate(date.getDate() + 7);
    var cookieText = "userId="+userId+";"+"expires="+date;
    var cookieText = "psd="+psd+";"+"expires="+date;
    document.cookie = cookieText;

获取cookie：

通过document.cookie就能得到浏览器之前存储的cookie，是一个字符串，将这个字符串进行解析，得到自己想要的内容。

var data = document.cookie;
var result = [];
result = data.split("; ");
var userIdData = result[0].split("=")[1];
var psdData = result[1].split("=")[1];

var userId = document.getElementById("userId");
userId.value= userIdData;
var psd =document.getElementById("psd");
psd.value= psdData;

清除cookie：

将存储的cookie的有效期改为过去的某一天，就清除了cookie

var date = newDate();
date.setDate(date.getDate() - 7 );
var cookieText = "psd=;expires=" + date;
document.cookie = cookieText;

4计时事件

setInterval(“函数”，“毫秒数”) 计时器，就是每隔多长时间就调用一次函数。

1000毫秒是1秒

时钟的演示：

<body>
    <p id="p1">时间</p>
</body>
<script>
    var timer = setInterval("getTime()",1000);
    function getTime(){
        var time = new Date();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        var p1 = document.getElementById("p1");
        p1.innerHTML = hour +":" + minute + ":" +second;
    }
</script>

clearInterval（计时器），//停止一个计时器

setTimeout(“函数名”，“毫秒数”)；//延时器，就是隔了多长时间后调用一次函数。

<body>
    <p id="p1">10</p>
</body>
<script>
    var timer = setInterval("countDown()",1000);
    var i = 10;
    function countDown(){
        if(i == 0){
            clearInterval(timer);
        }else{
            varp1 = document.getElementById("p1");
            p1.innerHTML = i;
            i--;
        }
    }
</script>