首页 > 其他分享> > 《寒假去世十第九章》

《寒假去世十第九章》

2022-02-20 14:03:14 作者：互联网

#### 第二章：JavaScript操作BOM对象

##### BOM模型

```js
BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于页面内容的、与浏览器窗口进行互动的对象结构

BOM可实现的功能有：
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退
```

##### ！window对象的常用属性

| 属性名称 | 说明 |
| -------- | ------------------------- |
| history | 有关客户访问过的URL的信息 |
| location | 有关当前URL的信息 |

```js
语法：
window.属性名= "属性值"
示例：
window.location="http://www.biadu.com" ;
```

##### ！！window对象的常用方法

| 方法名称 | 说明 |
| -------------- | ---------------------------------------------- |
| prompt() | 显示可提示用户输入的对话框 |
| alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 |
| confirm() | 显示一个带有提示信息、确定和取消按钮的对话框 |
| close( ) | 关闭浏览器窗口 |
| open( ) | 打开一个新的浏览器窗口,加载给定URL所指定的文档 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
| setlnterval( ) | 按照指定的周期（以毫秒计）来调用函数或表达式 |

##### confirm()方法

```js
<script type="text/javascript">
var flag=confirm("确认要删除此条信息吗?");
if(flag==true){
alert("删除成功!");
}else{
alert("你取消了删除");
}
</script>
```

##### open()方法

| 属性名称 | 说明 |
| ---------------------------- | ------------------------------------ |
| height、width | 窗口文档显示区的高度、宽度。以像素计 |
| left、top | 窗口的x坐标、y坐标。以像素计 |
| toolbar=yes \| no \|1 \|0 | 是否显示浏览器的工具栏。黙认是yes |
| scrollbars=yes / no \|1 \| 0 | 是否显示滚动条。黙认是yes |
| location=yes \| no \|1 \|0 | 是否显示地址地段。黙认是yes |
| status=yes \| no \|1 \| 0 | 是否添加状态栏。黙认是yes |
| menubar=yes \| no [1 \| 0 | 是否显示菜单栏。黙认是yes |
| resizable=yes \| no [1 \|0 | 窗口是否可调节尺寸。黙认是yes |
| titlebar=yes / no \|1 \| 0 | 是否显示标题栏。黙认是yes |

| 属性名称 | 说明 |
| ----------------------------- | ------------------------------------------------------------ |
| fullscreen=yes \| no \|1 \| 0 | 是否使用全屏模式显示浏览器。黙认是no。<br>处于全屏模式的窗口必须同时处于剧院模式 |

```js
简单使用：
window.open("adv.html","_blank","height=20,width=1,top=100");
```

##### history对象常用方法

| 名称 | 说明 |
| --------- | ---------------------------------- |
| back() | 加载history对象列表中的前一个URL |
| forward() | 加载history对象列表中的下一个URL |
| go() | 加载history对象列表中的某个具体URL |

```js
history.back() 等价于 history.go(-1) 浏览器中的“后退”

history.forward() 等价于 history.go(1) 览器中的“前进”
```

##### location对象常用属性

| 名称 | 说明 |
| -------- | --------------------------------- |
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置或返回当前URL的主机名 |
| href | 设置或返回完整的URL |

##### location对象常用方法

| 名称 | 说明 |
| --------- | ---------------------- |
| reload() | 重新加载当前文档 |
| replace() | 用新的文档替换当前文档 |

```js
<a href="javascript:location.href='flower.html'">跳转到指定页面</a>
<a href="javascript:location.reload()">刷新</a>
<a href="javascript:history.back()">返回上一个页面</a>
```

##### Document对象常用属性

| 名称 | 说明 |
| -------- | --------------------- |
| referrer | 返回载入当前文档的URL |
| URL | 返回当前文档的URL |

```js
语法：
   //获取载入本页面文档的地址
   document.referrer
   document.URL
```

##### Document对象的常用方法

| 名称 | 说明 |
| ---------------------- | ---------------------------------------- |
| getElementByld() | 返回对拥有指定id的第一个对象的引用 |
| getElementsByName() | 返回带有指定名称的对象 |
| getElementsByTagName() | 返回带有指定标签名的对象的集合 |
| write() | 向文档写文本、HTML表达式或JavaScript代码 |

```js
示例：
动态改变层、标签中的内容
document.getElementById("ABC").innerHTML="ABC";

获取具有相同name属性的元素
var aInput=document.getElementsByName("season");

获取具有相同标签的元素
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"  ";
}
document.getElementById("replace").innerHTML=sStr;
```

##### JavaScript内置对象

```js
Array：
       用于在单独的变量名中存储一系列的值
String：
       用于支持对字符串的处理
Math：
       用于执行常用的数学问题，包含了若干个数字常量和函数
Date：
       用于操作日期和时间
```

##### Date对象

```js
语法：
   var 日期对象=new Date()
   参数格式：MM DD,YYYY,hh:mm:ss
示例：
   var today=new Date(); //返回当前日期和时间
   var tdate=new Date("september 1,2019,14:58:12");
```

##### Date对象的常用方法

| 方法 | 说明 |
| ------------- | --------------------------------------------------- |
| getHours | 返回 Date 对象的一个月中的每一天，其值介于1～31之间 |
| getDay() | 返回 Date 对象的星期中的每一天，其值介于0～6之间 |
| getHours() | 返回 Date 对象的小时数，其值介于0～23之间 |
| getMinutes() | 返回 Date 对象的分钟数，其值介于0～59之间 |
| getSeconds() | 返回 Date 对象的秒数，其值介于0～59之间 |
| getMonth() | 返回 Date 对象的月份，其值介于0～11之间 |
| getFullYear() | 返回 Date 对象的年份，其值为4位数 |
| getTime() | 返回自某一时刻（1970年1月1日）以来的毫秒数 |

```js
重点：
1、getDay()：0－表示周日，1－表示周1，6－表示周6。
2、getMonth()：0－11，0表示1月分，11表示12月份。
```

##### Math对象常用方法

| **方法** | **说明** | **示例** |
| ----------------- | -------------------------- | ------------------------------------------------ |
| **ceil()—天花板** | **对数进行向上取整** | Math.ceil(25.5);返回26Math.ceil(-25.5);返回-25 |
| **floor()—地板** | **对数进行向下取整** | Math.floor(25.5);返回25Math.floor(-25.5);返回-26 |
| **round()** | **对数进行四舍五入** | Math.round(25.5);返回26Math.round(-25.5);返回-26 |
| **random()** | **返回(0~1)之间的随机数 ** | Math.random();例如：0.6273608814137365 |
```js
0-6随机数
var num=Math.ceil(Math.random()*7)-1;
```

##### 定时函数setTimeout()

```js
语法：
   setTimeout("调用的函数",等待的毫秒数)
示例：
   1秒(1000毫秒)之后执行函数disptime()一次
   var myTime＝setTimeout("disptime() ", 1000) );

<input name="s" type="button" value="显示提示消息" οnclick="timer()" />
function timer(){
setTimeout("alert('3秒')",3000);
}
```

##### 定时函数setInterval()

```js
语法：
setInterval("调用的函数",间隔的毫秒数)

示例：
每隔1秒(1000毫秒)执行函数disptime()一次
var myTime＝setInterval("disptime() ", 1000 );
```

```js
定时函数两者的区别；
1、setTimeout()在等待指定时间后执行函数，且只执行一次；
2、setInterval()是每指导间也不是时间后执行一次函数，循环执行，所以时钟例子使用setInterval();
```

##### 清除函数clearTimeout()

```js
语法：
   clearTimeout(setTimeOut()返回的ID值)
示例：
   var myTime＝setTimeout("disptime() ", 1000 );
   clearTimeout(myTime)；

语法：
clearInterval(setInterval()返回的ID值)
示例：
var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；
```

```js
清除函数两者之间的区别；
1、clearTimeout()清除由setTimeout()设置的定时；
2、clearInterval()清除由setInterval()设置的定时；
```

##### 时钟特效

```js
<div id="myclock"></div>
<input type="button" οnclick="javaScript:clearInterval(myTime)" value="停止">
<script type="text/javascript">
function disptime(){
var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();//获得分钟
var ss = today.getSeconds();//获得秒
/*设置div的内容为当前时间*/
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
/*使用setInterval()每间隔指定毫秒后调用disptime()*/
var myTime = setInterval("disptime()",1000);
</script>
```

##### JavaScript操作BOM对象总结

```js
window对象：
alert( )、confirm( )、close( )、open( )、
setTimeout( )、setInterval( )

history对象与location对象：
back( )、forward( )、go( )、
reload( )、replace( )

document对象：
getElementById( )、getElementsByName( )、getElementsByTagName( )

JavaScript内置对象：
Date对象：时钟特效、
Math对象
```

标签：返回,去世,第九章,js,对象,寒假,var,#####,yes
来源： https://blog.csdn.net/Cannibalflowers/article/details/123030179

《寒假去世十 第九章》

《寒假去世十第九章》