ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

《寒假去世十 第九章》

2022-02-20 14:03:14  阅读:189  来源: 互联网

标签:返回 去世 第九章 js 对象 寒假 var ##### yes



#### 第二章: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+"&nbsp;&nbsp;";
        }
        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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有