点击刷新
Bom对象：
● window对象：浏览器窗口对象
● Navigator：浏览器对象
● Screen：浏览器所处客户端的显示屏屏幕对象
● History：浏览器当前窗口的访问历史对象记录
● Location：浏览器当前窗口的地址栏对象
每个对象都有对应的属性和方法，通过这些属性和方法我们可以获取浏览器的信息。在这五个部分中，Window对象尤为重要,根据图片的区域划分，可以很清楚的看出,Window对象其中就已经包含了History.Location对象，还有一个非常重要的Document对象，但由于其重要性太高，所以前面课程我们将其单独区分出来，称为DOM对象。
而另外两个:Navigator、Screen对象，使用到的次数较少，下面我们对于BOM中的内容主要就涉及Window、History. Location三个对象。
window对象：不同于一般的对象，BOM中的Window对象不需要创建就可以直接使用，使用其中的方法直接调用即可，类似于我们已知的静态方法:
window.方法名（）
● Open/close方法
● open的格式
● window.open([url,][name,][features,][replace])
● url:要打开的网页路径
● Name:窗口名称（通常使用target属性值）
● Features:窗口特征，属性列表
● Replace:是否替换浏览历史条目
● Close方法：window.close();不同浏览器支持度不同，但是都支持 关闭由js打开的浏览器窗口
一、添加
<body>
<input type="text" name="" id="content">
<input type="button" name="" id="add" value="添加">
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var add=document.getElementById("add")
add.onclick=function(){
if (test()) {
if (confirm("你确定要添加吗")==true) {
// 获取节点
var li=document.createElement("li")
//获取输入框的内容
var content = document.getElementById("content")
li.innerHTML=content.value
// 获取ul
var ul = document.getElementById("list")
//将li添加到ul中
ul.appendChild(li)
alert("添加成功")
} else {
alert("不添加")
}
}else{
alert("格式不正确")
}
// 用来验证文本框输入的值的格式是不是只包含数字和字母
function test(){
// 使用正则表达式：只能是数字和字母，并且不能为空
var reg=/\b[a-zA-Z0-9]{1,}\b/
var content=document.querySelector("#content")
// test()返回一个布尔值：当满足正则表达式时，返回true，反之则返回false
if(reg.test(content.value)){
return true
}else{
return false
}
}
}
</script>
</body>
二、计时器轮播图
在此文档中，我使用了少量的javascript代码，编写了一个自动轮播，自动轮播最主要的还是通过计时器来完成自动轮播哦，下面来看HTML代码吧！
定时器
● setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
● setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
<style>
#div0{
width: 500px;
height: 300px;
margin: 0 auto;
text-align: center;
position: relative;
}
#div0 img{
width: 500px;
height: 300px;
}
ul{
display: flex;
justify-content: space-between;
width: 400px;
height: 30px;
position: absolute;
bottom: 0;
left: 10px;
list-style: none;
}
ul li{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
}
.active{
background-color: red;
}
</style>
</head>
<body>
<div id="div0">
<img src="img/bg1.jpg" alt="">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var index=1
function changePic(){
var arr=["bg1.jpg","bg2.jpg","bg3.jpg","bg4.jpg","bg5.jpg","bg6.jpg"]
//如何换图片
// 如何获取图片img
var img=document.querySelector("#div0 img")
// 更改img的src来实现图片切换
img.src = "img/" + arr[index]
// 获取所有的li标签
var list=document.querySelectorAll("ul li")
//将所有li上面的active进行清除
for(var i=0;i<list.length;i++){
list[i].classList.remove("active")
}
list[index].classList.add("active")
index++
if (index>5) {
index=0
}
// console.log(index)
}
setInterval(changePic,1000);
</script>
</body>
三、跳转
Location对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问。
Location 对象属性
| 属性 | 描述 |
|---|---|
| hash | 返回一个URL的锚部分 |
| host | 返回一个URL的主机名和端口 |
| hostname | 返回URL的主机名 |
| href | 返回完整的URL |
| pathname | 返回的URL路径名。 |
| port | 返回一个URL服务器使用的端口号 |
| protocol | 返回一个URL协议 |
| search | 返回一个URL的查询部分 |
Location 对象方法
| 方法 | 说明 |
|---|---|
| assign() | 载入一个新的文档 |
| reload() | 重新载入当前文档 |
| replace() | 用新的文档替换当前文档 |
<body>
<input type="button" id="assign" value="assign">
<input type="button" id="reload" value="reload">
<input type="button" id="replace" value="replace">
<input type="button" id="href" value="href">
<script>
assign.onclick=function(){
// assign():可以打开新的页面，并且可以返回，可以产生历史记录
location.assign("https://www.baidu.com")
}
reload.onclick=function(){
// reload():页面刷新
location.reload()
}
replace.onclick=function(){
// reload():用新文档替换当前的文档，可以实现打开新的页面的功能，但不能返回，故没有产生历史记录
location.replace("https://www.baidu.com")
}
href.onclick=function(){
// location.href="https://www.baidu.com"
console.log(location.host)
console.log(location.hostname)
}
</script>
</body>
History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
History 对象属性
| 属性 | 说明 |
|---|---|
| length | 返回历史列表中的网址数 |
History 对象方法
| 方法 | 说明 |
|---|---|
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go() | 加载 history 列表中的某个具体页面 |
1、
<body>
1.html<input type="button" id="btn" value="跳转到2.html">
<script>
btn.onclick=function(){
location.href="demo3-2.html"
}
</script>
</body>
2、
<body>
2.html
<input type="button" value="后退" id="btn">
<input type="button" value="跳转到demo3-3.html" id="btn2">
<input type="button" value="forward" id="btn3">
<input type="button" value="go" id="btn4">
<script>
btn.onclick=function(){
//后退到历史记录列表上的url
history.back()
}
btn2.onclick=function(){
//跳转到demo3-2.html
location.href="demo3-3.html"
}
btn3.onclick=function(){
// 前进到历史记录列表的下一个url
history.forward()
}
btn4.onclick=function(){
// 跳转到第（）个页面上
history.go(1)
}
</script>
</body>
3、
<body>
3.html
<input type="button" value="后退" id="btn">
<input type="button" value="跳转到demo3-1.html" id="btn2">
<script>
btn.onclick=function(){
// 后退
history.back()
}
btn2.onclick=function(){
// 跳转到第（）个页面上 -2返回前两个页面
history.go(-2)
}
</script>
</body>
© 著作权归作者所有
发表评论
