《JavaScript第八章》

最新推荐文章于 2024-07-27 15:20:55 发布

软件2201 方琏琏

最新推荐文章于 2024-07-27 15:20:55 发布

阅读量23

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ReviewI/article/details/134361517

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、BOM简介

Brower object model

浏览器器对象模型.可以获取一些浏览器自带的功能

由于没有统一的BOM标准，每个浏览器都有自己的BOM实现方法，

BOM的浏览器兼容性较差。常见的BOM对象有：

window

document

location

二、window对象讲解

window对象是全局对象又称顶级对象.可以省略不写

常见的方法:

console.log() 、 alert

console可以写成window.console。

alert()可以写成window.alert()。

prompt()可以写成window.prompt()。

open()可以写成window. open()。

close()可以写成window.close()。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button id="btn">点击我跳转到另外一个页面</button>

<a href="1_BOM简介.html">点击我跳转到另外一个页面</a>

//open表示开启一个新窗口重新开启一个窗口而a标签是在当前窗口完成覆盖.

document.getElementById("btn").onclick = function(){

// window.open("1_BOM简介.html");

open("1_BOM简介.html");

}

//close方法表示直接关闭浏览器

document.getElementById("close").onclick = function(){

// window.open("1_BOM简介.html");

close();

}

</script>

</body>

</html>

三、 location对象

location对象常用于路径相关的用法

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button id="btn">点击我跳转页面</button> <br>

<button id="btn1">点击我获取当前页面的网址</button> <br>

<button id="btn2">点击我刷新网页</button>

//常见用法1: 跳转到指定页面等同于A标签的功能

document.getElementById("btn").onclick = function(){

location.href = "1_BOM简介.html";

}

//常见用法2: 获取当前页面的URL地址

document.getElementById("btn1").onclick = function(){

console.log(location.href);

}

//客串知识点: 编码和乱码的区别:

//乱码值得是两个字符串采用的编码不一致,导致数据乱套.

//数据呈现出无法阅读的字样 .

//编码:将占据空间较大的汉字转成占据空间较小的字母的编码形式

//解码:将字母又转回汉字.

//如何对字符串进行编码解码的操作

var str = "%E5%AF%B9%E8%B1%A1";

str = decodeURI(str);//进行解码

console.log(str);

var str = "对象";

str = encodeURI(str);//进行编码

console.log(str);

//常见用法3: 刷新当前网页

document.getElementById("btn2").onclick = function(){

location.reload();

}

</script>

</body>

</html>

四、定时器的基本用法

定时器: 每间隔多少时间毫秒自动执行函数的一种机制.

例如5秒后退出系统例如轮播图每隔1秒进行图片的转变

定时器的种类: 分为延时定时器和重复定时器

延时定时器: 等待多少时间执行一次函数就GG

重复定时器: 每隔多少时间都执行一次函数无限循环除非代码写了关闭的条件

五、延迟定时器的用法

语法如下:

1. setTimeout(function(){ 代码块 }, xx); xx毫秒

2. setTimeout(aa, xx); 注意aa表示函数名不要加括号

function aa(){

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// 等待多少时间执行一次函数就GG

// setTimeout(function(){

// console.log("你好~~~");

// },2000)

// function aa(){

// console.log("你好~~");

// }

// setTimeout(aa,3000);

setTimeout(function(){

close();

},5000)

</script>

</body>

</html>

六、重复定时器

重复定时器: 每隔多少时间都执行一次函数

无限循环除非代码写了关闭的条件

重复定时器的语法如下:

1. setInterval(function(){ 代码块 }, xx); xx毫秒

2. setInterval(aa, xx); 注意aa表示函数名不要加括号

function aa(){

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button id="btn">点击我停止定时器</button>

setInterval(function(){

console.log("~~");

},1000);

setInterval(aa,1000);

function aa(){

console.log("~~~");

}

</script>

</body>

</html>

如何关闭定时器

1.需要先定义定时器的名字

2.加上关闭的条件

3.通过clearInterval(xxx); xxx表示定时器的名字

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button id="btn">点击我停止定时器</button>

var dsq ; //假设该变量是存储定时器

dsq = setInterval(function(){

console.log("~~");

},1000);

document.getElementById("btn").onclick = function(){

clearInterval(dsq);

}

</script>

</body>

</html>

软件2201 方琏琏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript第八章》

浏览器器对象模型.可以获取一些浏览器自带的功能由于没有统一的BOM标准，每个浏览器都有自己的BOM实现方法，BOM的浏览器兼容性较差。
复制链接

扫一扫

专栏目录