BOM
- Browser Object Model 浏览器对象模型;
BOM包含window,window包含document、history和location等 - window重要的方法(重点学习方法):
comfirm(弹窗显示,包含确定和取消)
var flag = window.confirm("今天天气如何?");
open(弹出新窗口)
window.open("内容自定");
setTimeout/setInterval:
setTimeout | setInterval |
---|---|
setTimeout(“函数名”,时间) | SetInterval(“函数名”,时间); |
位置应该在函数内部函数要先触发一次,在函数内部要执行 | 位置函数的外部不需要预先的触发,每隔一定时间自动执行一次函数 |
setTimeout方法的开始和暂停
<!-- 3.建一个层存放时间 -->
<div class="" id="divtime">
</div>
<input type="button" name="" id="btn" value="暂停" />
<script type="text/javascript">
let mytime;
//4.定义一个函数,并实现递归调用
function showtime() {
//2.调用时间,并把它放在层里面
document.getElementById("divtime").innerHTML = Date().toLocaleString();
//5.递归调用的实现
mytime=setTimeout("showtime()", 1000);
}
//1.跳动一次
setTimeout("showtime()",1000);
document.getElementById("btn").onclick=function(){
clearTimeout(mytime);
}
</script>
setInterval方法的开始和暂停
<div id="divtime">
</div>
<input type="button" name="" id="btn" value="暂停" />
<script type="text/javascript">
function showtime(){
//把时间放进层里
document.getElementById("divtime").innerHTML=Date().toLocaleString();
}
//自动播放函数showtime()里面的时间,并把它生成一个名为stop的对象
let stop=setInterval("showtime()",1000);
//当按钮被触发时,停止播放stop对像
document.getElementById("btn").onclick=function stoptime(){
clearInterval(stop);
}
</script>
轮播图练习
<!-- 存放照片的层 -->
<div id="">
<img id="divphoto" src="../img/60a2-kffctca8138674.jpg">
</div>
<script type="text/javascript">
//创建一个数组存放图片
let array = ["60a2-kffctca8138674.jpg", "3a54-kffctca9836413.jpg", "1428-kffctca9748591.jpg",
"a683-kffctca9746955.jpg", "c8a5-kffctca9871601.jpg"
];
let i = 0;
//创建一个方法,里面只实现一张图片的显示,由setinterval每个刷新一次就遍历数组的另一张图片
function showphoto() {
//防止下标溢出,实现无限循环
if (i>=array.length) {
i=0;
}
//不能在函数里面弄循环
document.getElementById("divphoto").src = "../img/" + array[i];
i++;
}
setInterval("showphoto()",1000);
</script>
location
网页之间跳转; js方式; url地址;获取url有关参数;
location.href 获取url
location.host 获取主机名+端口
location.hosthome 获取主机名
location.port 获取端口
location.search 得到get请求参数和值
(?username=knowno&password=knowno)
location.assign(“地址”); 跳转到新地址
location.replace(“地址”);跳转到新地址,不保留记录
history
back() 加载history列表的前一个url
forward() 加载history列表的后一个url
go() 刷新具体页面
history练习
<a href="main.html" target="ifr">main</a>
<a href="1.html" target="ifr">1</a>
<a href="2.html" target="ifr">2</a>
<a href="3.html" target="ifr">3</a>
<input type="button" name="" id="btnforward" value="前进" />
<input type="button" name="" id="btnback" value="后退" />
<input type="button" name="" id="btnrefresh" value="刷新" />
<hr >
<iframe src="main.html" width="100%" height="300" frameborder="0" name="ifr"></iframe>
<script type="text/javascript">
document.getElementById("btnback").onclick=function () {
history.back();
}
document.getElementById("btnforward").onclick=function () {
history.forward();
}
document.getElementById("btnrefresh").onclick=function () {
history.go();
}
</script>
另有main、1、2和3的html四份文件