BOM中document、history和location的主要方法使用

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四份文件