什么是BOM对象?
BOM对象又称浏览器对象模型,它是JavaScript的组成部分之一,BOM赋予了JavaScript程序与浏览器交互的能力。window对象是BOM的核心,用来表示当前浏览器窗口,其中提供了一系列用来操作或访问浏览器的方法和属性。
总的来说,BOM对象大致包含五个部分:
- Window对象:浏览器窗口对象
- Navigator:浏览器对象
- Screen:浏览器所处客户端的显示器屏幕对象
- History:浏览器当前窗口的访问历史记录对象
- Location:浏览器当前窗口的地址栏对象
每个对象都有对应的属性和方法,通过这些属性和方法我们可以获取浏览器的信息。在这五个部分中,Window对象尤为重要,根据图片的区域划分,可以很清楚的看出,Window对象其中就包含了History、Location对象,还有一个非常重要的Document对象,但由于其重要性太高,所以前面课程我们将其单独区分出来,成为DOM对象,
而另外两个:Navigator、Screen对象,使用到的次数较少。
confirm:确认框,当点击确认时,返回true。
案例举例:
html样式代码:
建立JavaScript代码:
var add = document.querySelector('#add');
add.onclick = function(){
if(confirm('您确定要添加吗?')){
// 创建节点吧
var li = document.createElement('li');
//获取文本框输入值
var content = document.querySelector('#content');
li.innerHTML = content.value;
//获取ul标签
var ul = document.getElementById('lists');
// 将li按教导ul中
ul.appendChild(li);
alert('添加成功');
}
}
// 声明一个新的window用来存储
var winddowNew;
openNew.onclick = function(){
// open():可以打开一个新的页面,返回window对象
newWindow = window.open("https://www.baidu.com");
}
closeNew.onclick = function(){
// close():关闭打开的窗口
clearInterval;
}
// 规范输入框中的输入规范
var content=document.querySelector("#content");
content.onchenage=function(){
var reg = /[\u4e00-\u9fa5]/
var str = this.value;
}
在输入框中输入内容,点击添加节点,弹出一个框,确定为true,取消为false;点击新窗口弹出一个百度页面。
Location中的一些 assign():可以打开新的页面,并且可以返回,可以产生历史记录
reload()实现页面刷新
replace()用新的文档替换当前的文档,可以实现打开新的页面的功能,但不能返回,故没有产生历史记录
href
assig.onclick = function(){
location.assign("https://www.baidu.com");
}
reload.onclick = function(){
location.reload();
}
replace.onclick = function(){
location.replace("https://www.baidu.com");
}
href.onclick = function(){
// location.href = "https://www.baidu.com";
console.log(location.host);
}
Js定时器:
js定时器有以下两个方法:
- setinterval():按照指定的周期(以毫秒记)来调用函数或计算表达式。方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。
- setTimeout():在指定的毫秒数后调用函数或计算表达式。
setinterval()语法:
setInterval(code,millisec,lang);
setTimeout() 语法:
setTimeout(code,millisec,lang);
通过案例进行总计:
定时轮播图小案例:
html样式:
js代码块:
var index = 1;
function change() {
var arr = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg'];
// 获取图片
var img = document.querySelector('#lunb img');
img.src = "./img/" + arr[index];
//轮播图下标点li;
// 首先获取li
var list = document.querySelectorAll('ul li');
for (var i = 0; i < list.length; i++) {
list[i].classList.remove('bgc');
}
list[index].classList.add('bgc');
index++;
if (index > 4) {
index = 0;
}
}
// 每隔一秒切换一张图片
setInterval(change, 1000);
效果图,一秒一换