前端04-JSBom 弹出窗、打开窗口、关闭窗口、时间函数、history对象、location对象

弹出框

（1）消息框:alert， 常用。
                alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
（2）输入框:prompt，返回提示框中的值。
                prompt() 方法用于显示可提示用户进行输入的对话框。
                参数（可选）：
                    第一个参数：要在对话框中显示的纯文本。
                    第二个参数：默认的输入文本。
（3）确认框:confirm，返回 true/false.
            confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

<button type="button" onclick="fun()">按钮</button>
		<script type="text/javascript">
			function fun(){
				//消息框
				// alert("abc");
				
				//输入框
				// var uname = window.prompt("请输入用户名");
				// if(uname == "admin"){
				// 	alert("欢迎超级用户："+uname)
				// }else{
				// 	alert("欢迎用户："+uname)
				// }
				
				// 确认框
				var flag = confirm("确认删除这条记录吗？");
				if(flag){
					alert("删除成功");
				}else{
					alert("取消");
				}
			}
		</script>

 打开窗口

window.open();         打开一个空的窗口
window.open(url地址);  打开链接

<button type="button" onclick="fun()">打开窗口</button>
		 <script type="text/javascript">
		 	function fun(){
				//打开一个空的窗口
				// window.open();
				//打开一个在线地址
				// window.open("http://www.baidu.com");
				//打开一个本地地址
				// window.open("01-弹出框.html");
				// 当前窗口打开在线地址
				window.open("http://www.baidu.com","_self");
			}
		 </script>

关闭窗口

<button type="button" onclick="fun()">关闭窗口</button>
		<script type="text/javascript">
			function fun() {
				//关闭窗口
				window.close();
			}
		</script>

时间函数

setTimeOut       返回当前时间函数的唯一标识
         在指定毫秒数之后执行函数/程序
         清除时间函数：clearTimeOut(唯一标识);
                    
setInterval      返回当前时间函数的唯一标识
        以指定毫秒数为周期，循环执行函数/程序
        清除时间函数：clearInterval(唯一标识);

<button type="button" onclick="startTime()">开始</button>
		<button type="button" onclick="closeTime()">结束</button>
		
		<h2 id="h2"></h2> <!-- 放时间的标签-->
		<script type="text/javascript">
			//在指定毫秒数之后执行函数/程序
			// setTimeout(function(){
			// 	console.log("setTimeout 5秒");
			// },5000);
			
			//以指定毫秒数为周期，循环执行函数/程序
			// setInterval(function(){
			// 	console.log("setInterval 循环打印");
			// },2000);
			
			//开启时间函数，循环的写出时间
			function startTime(){
				id = setInterval(writeTime,1000);
			}
			
			//时间停止
			function closeTime(){
				//清除时间函数
				clearInterval(id);
			}
			
			//获取时间写出时间到页面中
			function writeTime(){
				//获取到当前时间
				var date = new Date();
				
				//格式化时间
				var str = format(date);
				
				//写出在页面中      设置元素的值/内容：对象.innerHTML = 值;
				if(date.getSeconds() == 0){
					//设置样式
					document.getElementById("h2").style.color = "red";
				}else{
					document.getElementById("h2").style.color = "black";
				}
					document.getElementById("h2").innerHTML = str;
				
			}
			
			
			//格式化时间的函数   2020-10-10 13:50:09
			function format(date){
				var year = date.getFullYear(); 
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds() < 10 ?  ("0"+date.getSeconds()) : date.getSeconds();
				
				var str = year +"-"+ month +"-"+ day +" "+ hour +":"+ minute +":"+ second;
				return str
			}
</script>

history对象

属性：length，返回浏览器历史列表中的 URL 数量。
            
          history对象的方法：
          back()：加载 history 列表中的前一个 URL。
          forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。
          go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面

<h2>2号页面</h2>
<a href="05-history对象-3.html">跳转到3号页面</a>
<button type="button" onclick="fun1()">back后退</button>
<button type="button" onclick="fun2()">forward前进</button>
		<script type="text/javascript">
			console.log(window.history.length);
			
			function fun1(){
				window.history.back();
			}
			function fun2(){
				window.history.forward();
			}
		</script>

location 对象

属性   href：设置或返回完整的 URL
          window.location.href   获取当前页面地址
                    
location 对象的方法
          reload()：重新加载当前文档。
          replace()：用新的文档替换当前文档。

<button type="button" onclick="window.location.reload()">重新加载</button>
<button type="button" onclick="window.location.replace('http://www.baidu.com')">
替换
</button>
		<script type="text/javascript">
			console.log(window.location.href);
			// window.location.href = "http://www.baidu.com";
		</script>