常见的BOM功能

最新推荐文章于 2021-08-21 21:21:38 发布
最新推荐文章于 2021-08-21 21:21:38 发布
阅读量2.9k 收藏 3
点赞数
分类专栏： BOM 文章标签： 浏览器 对话框 对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013861109/article/details/53763593
版权
window对象

window对象是BOM的核心，window对象指当前的浏览器窗口。

window对象方法:

方法描述
alert()显示带有一段消息和确认按钮的警告框
prompt()显示可提示用户的对话框
comfirm()显示带有一段消息以及确认按钮和取消按钮的对话框
open()打开一个新的浏览器窗口或查找一个已命名的窗口
close()关闭浏览器窗口
print()打印当前窗口内容
focus()把键盘焦点给予一个窗口
blur()把键盘焦从顶层窗口移开
moveBy()可相对窗口的当前坐标把他移动指定的像素
moveTo()把窗口的左上角移动到一个指定的坐标
resizeBo()按照指定的像素调整窗口大小
resizeTo()把窗口的大小调整到指定的高度和宽度
scrollBy()按照指定的像素来滚动内容
scrollTo()把内容滚动到指定的坐标
setInterval()每隔指定的时间执行代码
setTimeout()在指定的延迟时间之后来执行代码
clearInterval()取消setInterval()的设置
clearTimeout()取消setTimeout()的设置
<input type="button" id="but" onclick="but()" value="按钮">
<script type="text/javascript">
    function but() {
        window.open('http://www.huanghanlian.com/', '_blank', 'height=400,width=600,top=100,left=0');
    }
</script>

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

参数说明：

  1. 代码：要调用的函数或要执行的代码串。

  2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对”代码”的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval(“clock()”,1000)
或
setInterval(clock,1000)

例子1

<form>
    <input type="text" id="clock" size="50"  />
</form>
<script type="text/javascript">
var int = setInterval(clock, 100)

function clock() {
    var time = new Date();
    document.getElementById("clock").value = time;
}
</script>

例子2

<input type="text" id="clock" size="50"  />
<script type="text/javascript">
    var attime;

    function clock() {
        var time = new Date();
        attime = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
        document.getElementById("clock").value = attime;
    }
    setInterval(clock, 100)
</script>

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

<form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
<script type="text/javascript">
    function clock() {
        var time = new Date();
        document.getElementById("clock").value = time;
    }
    // 每隔100毫秒调用clock函数，并将返回值赋值给i
    var i = setInterval("clock()", 100);
</script>

计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

参数说明：

  1. 要调用的函数或要执行的代码串。
  2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

当我们打开网页3秒后，在弹出一个提示框，代码如下:

<script type="text/javascript">
    setTimeout("alert('Hello!')", 3000);
</script>

当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。

<form>
    <input type="button" value="start" onClick="tinfo()">
</form>
<script type="text/javascript">
    function tinfo() {
        var t = setTimeout("alert('Hello!')", 5000);
    }
</script>

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。

<form>
    <input type="text" id="txt" />
    <input type="button" value="Start" onClick="numCount()" />
</form>

<script type="text/javascript">
    var num = 0;
    function numCount() {
        document.getElementById('txt').value = num;
        num = num + 1;
        setTimeout("numCount()", 1000);
    }
</script>

或者

<form>
    <input type="text" id="txt" />
    <input type="button" value="Start" onClick="numCount()" />
</form>

<script type="text/javascript">
    var num = 0;
    function numCount() {
        document.getElementById('txt').value = num;
        num = num + 1;
        setTimeout(numCount, 1000);
    }
</script>

取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

语法:

clearTimeout(id_of_setTimeout)

参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 “Stop” 按钮来停止这个计数器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="text" id="txt">
        <input type="button" value="Stop" onClick="stopCount()">
    </form>

    <script type="text/javascript">
    var num = 0,
        i;

    function timedCount() {
        document.getElementById('txt').value = num;
        num = num + 1;
        i = setTimeout(timedCount, 1000);
    }
    setTimeout(timedCount, 1000);

    function stopCount() {
        clearTimeout(i);
    }
    </script>
</body>
</html>

例子2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<form>
    <input type="text" id="count" />
    <input type="button" value="Start" onClick="startCount()" />
    <input type="button" value="Stop" onClick="stopCount()"  />
</form>

<script type="text/javascript">
    var num = 0;
    var i;

    function startCount() {
        clearTimeout(i);
        document.getElementById('count').value = num;
        num = num + 1;
        i = setTimeout("startCount()", 1000);
    }

    function stopCount() {
        clearTimeout(i);
    }
</script>
</body>
</html>
History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：

window.history.[属性|方法]

**注意：**window可以省略。

History 对象属性

属性描述
length返回浏览器历史列表中的url数量

History 对象方法

对象描述
back()加载history列表中的前一个url
forward()加载history列表中的下一个url
go()加载history列表中的某个具体页面

使用length属性，当前窗口的浏览历史总长度

<script type="text/javascript">
    var HL = window.history.length;
    document.write(HL);
</script>

返回前一个浏览的页面

back()方法，加载 history 列表中的前一个 URL。

语法：

window.history.back();

比如，返回前一个浏览的页面，代码如下：

window.history.back();

注意：等同于点击浏览器的倒退按钮。

back()相当于go(-1),代码如下:

window.history.go(-1);


<input type="button" onclick="backs()" value="上一步">
<script type="text/javascript">
    function backs(){
        window.history.back();
    }
</script>

返回下一个浏览的页面

forward()方法，加载 history 列表中的下一个 URL。

如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法,代码如下:

window.history.forward();

注意：等价点击前进按钮。

forward()相当于go(1),代码如下:

window.history.go(1);

返回浏览历史中的其他页面

go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。

语法：

window.history.go(number);

参数：

number参数说明
1前一个，go(1)等价forward()
0当前页面
-1后一个，go(-1)等价back()

浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：

window.history.go(-2);

注意：和在浏览器中单击两次后退按钮操作一样。

同理，返回当前页面之后浏览过的第三个历史页面，代码如下：

window.history.go(3);
Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法:

location.[属性|方法]

location对象属性图示:

Paste_Image.png

location 对象属性：

属性描述
hash设置或返回从井号(#)开始的url(锚)
host设置或返回主机名和当前url的端口号
hostname设置或返回当前url的主机名
href设置或返回完整的url
pathname设置或返回当前url的路径部分
port设置或返回url的端口号
protocol设置或返回当前url的协议
search设置或返回从问号(?)开始的url(查询部分)
<script type="text/javascript">
    console.log(window.location.hash);
    console.log(window.location.host);
    console.log(window.location.hostname);
    console.log(window.location.href);
    console.log(window.location.pathname);
    console.log(window.location.port);
    console.log(window.location.protocol);
    console.log(window.location.search);
</script>

输出

?1:9 
?1:10 localhost
?1:11 localhost
?1:12 http://localhost/ajax_php/?1
?1:13 /ajax_php/
?1:14 
?1:15 http:
?1:16 ?1

location 对象方法:

属性描述
assign()加载新的文档
reload()重新加载当前文档
replace()用新的文档替换当前文档

//刷新
function reloadPage() {
window.location.reload()
}
//刷新

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性:

属性描述
appCodeName;浏览器代码名的字符串表示
appName;返回浏览器的名称
appVersion;返回浏览器的平台和版本信息
platform;返回运行浏览器的操作系统平台
userAgent;返回由客户机发送服务器的user-agent头部的值

查看浏览器的名称和版本，代码如下:

var browser = navigator.appName;
var version = navigator.appVersion;
var appCode = navigator.appCodeName;
var platSys = navigator.platform;
var usersAg = navigator.userAgent;
document.write("浏览器名称：" + browser + "<br />" + "平台和版本信息：" + version + "<br />" + "浏览器代码名称字符：" + appCode + "<br />" + "浏览器操作系统平台：" + platSys + "<br />" + "服务器头部的值：" + usersAg)

userAgent

返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

语法

navigator.userAgent

几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。

浏览器userAgent
ChromeMozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.87 Safari/537.36
FirefoxMozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
IE8Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)

使用userAgent判断使用的是什么浏览器

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>navigator</title>
    <script type="text/javascript">
        function validB() {
            var u_agent = navigator.userAgent;
            var B_name = "不是想用的主流浏览器!";
            if (u_agent.indexOf("Firefox") > -1) {
                B_name = "Firefox";
            } else if (u_agent.indexOf("Chrome") > -1) {
                B_name = "Chrome";
            } else if (u_agent.indexOf("MSIE") > -1 && u_agent.indexOf("Trident") > -1) {
                B_name = "IE(8-10)";
            }
            document.write("浏览器:" + B_name + "<br>");
            document.write("u_agent:" + u_agent + "<br>");
        }
    </script>
</head>
<body>
    <form>
    <input type="button" value="查看浏览器" onClick=validB()   >
    </form>
</body>
</html>
screen对象

screen对象用于获取用户的屏幕信息。

语法：

window.screen.属性

对象属性:

属性描述
availHeight窗口可以使用的屏幕高，单位像素
availWidth窗口可以使用的屏幕宽，单位像素
colorDepth用户浏览器表示的颜色位数，通常为32位(每像素的位数)
pixelDepth用户浏览器表示的颜色位数，通常为32位(每像素的位数)(IE不支持)
height屏幕的高，单位像素
width屏幕的宽，单位像素





navigator

document.write("窗口可以使用的屏幕宽高: ");
document.write(window.screen.availWidth + "*" + screen.availHeight);
document.write("
");
document.write("屏幕的宽高: ");
document.write(window.screen.width + "*" + window.screen.height);
document.write("
");
document.write("用户浏览器表示的颜色位数: ");
document.write(window.screen.colorDepth);
document.write("
");
document.write("用户浏览器表示的颜色位数（ps：IE不支持？亲测好像支持唉）: ");
document.write(screen.pixelDepth); 


</body>
</html>

BOM例子

<!DOCTYPE html>
<html>
<head>
    <title>浏览器对象</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
    <!--先编写好网页布局-->
    <h1>操作成功</h1>
    <p><span id="sd">5</span >秒后返回主页<a href="javascript:back();">返回</a> </p>

    <script type="text/javascript">
        var n = document.getElementById("sd").innerHTML;
        function count() {
            n--;
            document.getElementById("sd").innerHTML = n;
            if (n == 0) {
                location.assign("http://www.huanghanlian.com/");
            }

        }
        setInterval("count()", 1000);
        //通过window的location和history对象来控制网页的跳转。
        function back() {
            window.history.back();
        }
    </script>
</body>
</html>
深沉的简单
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BOM说明常见几种BOM
12-19
在产品的整个生命周期中，根据不同部门对BOM的不同需求，主要存在以下几种BOM：设计物料清单EBOM、计划物料清单PBOM、制造物料清单MBOM、成本物料清单CBOM 等。
BOM是什么? BOM核心有哪些?可以实现哪些功能?
最新发布
qq_74095822的博客
12-28 1557
BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！！！
BOM：03-BOM有什么作用？
weixin_44523387的博客
03-26 644
BOM是PDM/MRPⅡ/ERP信息化系统中最重要的基础数据，其组织格式设计和合理与否直接影响到系统的处理性能，因此，根据实际的使用环境，灵活地设计合理且有效的BOM是十分重要的。 BOM不仅是MRPⅡ系统中重要的输入数据，而且是财务部门核算成本，制造部门组织生产等的重要依据，因此，BOM的影响面最大，对它的准确性要求也最高。正确地使用与维护BOM是管理系统运行期间十分重要的工作。 此外，BOM还...
常用的BOM操作
我是渣渣
11-01 504
JavaScript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.b
BOM的概念及作用
weixin_46383743的博客
06-06 2364
Browser Object Model – BOM 浏览器 对象 模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM缺乏标准 BOM最初是Netscape浏览器标准的一部分 DOM是为了操作文档节点出现的API，document是其的一个对象 BOM是为了操作浏览器对象出现的API，window是其的一个对象 window对象 window对象是浏览器中的Global对象 var
JS浏览器BOM常见操作实例详解
10-15
本文将深入解析JS浏览器BOM的一些常见操作，并提供实例来帮助理解。 首先，我们来看一下如何获取浏览器窗口的尺寸。在大多数现代浏览器中，可以使用`window.innerHeight`和`window.innerWidth`来获取窗口的内部高度...
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
10-15
BOM中的`window`对象还提供了打开和关闭窗口的功能。`window.open(url, target)`方法用于打开新的窗口或标签，其中`url`参数指定要加载的URL，`target`决定新窗口的位置，如`_blank`表示新窗口，`_self`表示在当前...
硬件工程师BOM对比工具
10-02
1. **导入BOM文件**：将新旧两个版本的BOM文件导入工具，支持常见的文件格式如Excel或CSV。 2. **对比分析**：工具会自动识别并对比两份BOM中的差异，包括新增、删除、数量变化、供应商变更等。 3. **结果展示**：...
bom检测工具
08-23
1. 版本1.0.0：这表明这是该工具的初始版本，可能包含了基本的BOM检测和移除功能。 2. 支持的文件格式：虽然没有具体信息，但一般这样的工具会处理常见的文本和源代码文件。 3. 安装与使用：可能提供简单明了的...
ERP系统中BOM的作用
胡杨树
03-17 1983
  ERP系统中BOM的作用ERP的第一代诞生于1965年。数十年来，ERP经过长期的生产实践，吸收了许多国家先进制造业管理思想（如日本的“看板管理”等），不断发展延伸，形成了一种以生产经营、计划管理为主线，辅以CAD/CAM、Internet、GUI和EDI功能的当代企业管理方法。ERP系统中的主要功能模块，均是针对企业级资源管理而设计。　　在ERP系统中，一般包括以下模块：　　·BOM
BOM功能的讲解（最新ERP）
02-22
erp模块中关于bom的讲解。 bom是erp系统中，最先确立的功能。
bom例子
05-26
bom例子
bom表结构，例子(有五金厂，文具厂，电子厂)
05-22
完全的BOM结构，包含多层得BOM，并且有许多现成例子，有五金厂，电子厂，家具厂，玩具厂，电脑厂等物料BOM示范例子，告知你怎么建立BOM，完全可以对您现成得ERP，或SAP有帮助。
bom表详解自行车生产为例介绍bom表的组成，结合erp的说明
08-16
以自行车生产为例介绍bom表的组成，结合erp的说明
大型ERP系统BOM详细设计说明书
10-24
本详细设计说明书是在【BOM 需求说明书】和【BOM数据库设计说明书】的基础上 形成的，主要是详细说明模块内各功能的详细描述、界面表达、实现算法、数据信息关 联、业务流程，并精确地表达各功能的界面形式和实现算法（可使用伪代码）。任何对 需求说明书或数据库设计说明书的修改，都应该检查本说明书是否应该修正。
BOM——操作小案例
云中自有锦书
07-20 554
1.简单动画封装(使用回调函数) 补充：定时器知识点，打印顺序：1 3 2 console.log(1); setInterval(function(){ console.log(2); },0); console.log(3); <!DOCTYPE html> <html lang="zh-CN"> <head> <met...
BOM(包含案例）
qq_56303170的博客
08-21 1214
BOM BOM概述 BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性 BOM的构成 window对象是浏览器的顶级对象，它具有双重角色 它是js访问浏览器窗口的一个接口 它是一个全局对象。定义在全局作用域的变量、函数都会变为window对象的属性和方法 在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等 注意：window下的一
BOM知识点全面总结（附实例、图解）
weixin_45135068的博客
08-04 3734
目录 BOM概述 window对象的常见事件 2.1 窗口加载事件 2.2 调整窗口大小事件 定时器 3.1 两种定时器 3.2 setTimeout()定时器 3.3 停止setTimeout()定时器 3.4 setInerval()定时器 3.5 停止setInerval(0定时器 3.6 this js执行机制 4.1 js执行机制 4.2 同步跟异步 4.3 js执行机制 location对象 5.1 什么是location对象 5.2 URL 5.3 location对象的属性 5.4 loc
一个BOM展尾阶的例子
09-25 535
#program: bom_extract.4gl DATABASE dbDEFINE g_key CHAR(20), g_cnt SMALLINT, g_ac ARRAY[9...
*********高阶JS笔记
05-10
BOM（Browser Object Model）是浏览器对象模型的缩写，主要用来操作浏览器的一系列功能。JavaScript BOM提供了一些API，如创建新页面、弹出对话框、设置定时器、检测浏览器、获取URL信息等，并且它并没有被正式标准...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值