javascript中的BOM对象

简介: 1.window对象所有的浏览器都支持window对象概念上讲,一个html文档对应一个window对象功能上讲,控制浏览器窗口使用上讲,window对象不需要创建对象,直接使用2.window对象方法:2.

1.window对象
所有的浏览器都支持window对象

概念上讲,一个html文档对应一个window对象
功能上讲,控制浏览器窗口
使用上讲,window对象不需要创建对象,直接使用

2.window对象方法:

2.1 alert()
显示一个带有一段消息和一个确认按钮的警告框

例子:

window.alert("hello world");        //在浏览器窗口弹出一个"hello world"对话框

用浏览器打开,显示如下:

img_181c0c1160d1aa0bcd33b84158b77e78.png

2.2 confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框

例子:

var res=confirm("确定删除??");      
window.alert(res);  //浏览器窗口弹出一个"确认删除"对话框,等待用户选择

用浏览器打开,显示如下:

img_a104ecfa8c8ca8e0a1469eb9743625dc.png

2.3 prompt()
显示可提示用户输入的对话框

prompt()可以使用两个参数,第一个参数为提示信息,第二个参数为输入默认值,返回值是用户输入的内容

例子一:

var res=prompt("Input a num:");
window.alert(res);

用浏览器打开,显示如下:

img_ec831b17348c9275b73e5606f6a93680.png

例子二:

var res=prompt("Input a num:","1234");
window.alert(res);

用浏览器打开,显示如下:

img_75b96216a3264f302c47b6f34d4e6f5b.png

2.4 open()
打开一个新的浏览器窗口或查找一个已经命名的窗口

可用三个参数,参数一为新打开的窗口的网址,参数二为新窗口的名字,可不填,参数三为新打开的窗口的尺寸

例子一:

window.open("http://www.baidu.com");

用浏览器打开,浏览器会再打开一个窗口打开百度的首页

例子二:

//新打开一个宽度为300px,高度为150px的窗口,网址为百度
window.open("http://www.baidu.com","",'width=300,resizable=no,height=150');

用浏览器打开,显示如下:

img_baf24f5f1f557b80a6314aa192fe233f.png

2.5 close()
关闭浏览器窗口

例子:

window.close(); //会关闭当前的浏览器窗口

2.6 setInterval()
按照指定的周期(以毫秒计)来调用函数或计算表达式

setInterval()方法会不停的调用函数,直到clearInterval()被调用或窗口被关闭

由setInterval()返回的id值可用作clearInterval()方法的参数

语法:

setInterval(code,millisec)

其中,code为要调用的函数或要执行的代码段,millisec为周期性执行的时间间隔,单位为毫秒

2.7 clearInterval()

取消由setInterval()设置的timeout

例子:

<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
    function show_time(){
        var time1=new Date().toLocaleString();
        var temp=document.getElementById("ID1");
        temp.value=time1;
    }
    var ID;
    function begin(){
        if (ID==undefined){
            show_time();
            ID=setInterval(show_time,1000);
        }
    }
    function end(){
        clearInterval(ID);
        ID=undefined;
    }
</script>

用浏览器打开,显示如下:

img_fcf7bfd3d49db47df7eb14669cbe82e4.png

在输入框中单击,输入框中会显示出当前的时间,一秒钟更新一次

显示如下:

img_b2a8bd9087dfd3a49e315be29318facc.png

直到单击停止按钮,计时才会停止,再次单击输入框后,输入框内的时间会以一秒钟的频率更新,直到再次单击停止按钮

2.8 setTimeout()
在指定的毫秒数后调用函数或计算表达式

例子一:

<input type="button" value="alert_box" onclick="time_msg()">
<script>
    var times;
    function time_msg(){
        var time1=setTimeout("window.alert('5 seconds!')",5000);
    }
</script>

用浏览器打开,显示如下:

img_a36653ec047f5314e7ccc5bf168f8383.png

等待5秒钟后,会弹出如下对话框:

img_36b97093dfddfd44b41e2da0ac6e52c5.png

例子二:

<input type="text" id="txt">
<input type="button" value="start count" onclick="time_count()">
<script>
    var times;
    var count=0;
    function time_count(){
        document.getElementById("txt").value=count;
        count +=1;
        times=setTimeout("time_count()",1000)
    }
</script>

当计时按钮被点击后,输入框中就从0开始计数,一秒钟一次

如图所示:

img_2f69356b00b234f5cafe541562d335e7.png

2.9 clearTimeout()
取消由setTimeout()方法设置的timeout

例子:

<input type="text" id="txt">
<input type="button" value="start" onclick="time_count()">
<input type="button" value="stop" onclick="stop_count()">
<script>
    var times;
    var count=0;
    function time_count(){
        document.getElementById("txt").value=count;
        count +=1;
        times=setTimeout("time_count()",1000)
    }
    function stop_count(){
        clearTimeout(times);
    }

生成一个计时器,单击开始按钮,输入框中会开始计时,直到单击停止按钮才会暂停,再次单击开始,输入框中的秒数会从上次暂停的时间继续计时

如图所示:

img_1ef87120d47e0e5098b0ad45702d71c4.png

目录
相关文章
|
2月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
2月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
2月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
2月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
30 1
JavaScript中对象的数据拷贝
|
2月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
3月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
51 4
|
3月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
55 1
|
3月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
30 2
|
3月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
43 2
|
3月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
57 0