JavaScript-BOM-优快云博客

本文链接：https://blog.youkuaiyun.com/TxyITxs/article/details/104989231

<!DOCTYPE html>
<html>
  <head>
    <title>js9.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
	<input id="openBtn" type="button" value="打开按钮">
	<input id="closeBtn" type="button" value="关闭按钮">

	
	<!-- 轮播图 -->
	<img id="img" src="../Img/image.jpg" width="100%">
	
	<input id="a_btn" type="button" value="刷新按钮">
	
	<!-- histroy -->
	<input type="button" id="btn" value="历史记录"> 
	
	<a href="js8.html">js8网页</a>
	<input type="button" id="forward" value="前进">
	
	
	<script type="text/javascript">
	
		//打开窗口与关闭歘窗口
			var newWindow;
			var openbtn=document.getElementById("openBtn");
			
			openbtn.onclick=function()
			{	
				newWindow=open("https://www.baidu.com");
			}
			
			var closebtn=document.getElementById("closeBtn");
			closebtn.onclick=function()
			{	
				newWindow.close("https://www.baidu.com");
			}
			
		//wondow定时器	
		//setTimeout()、claerTimeout()、setInterval()、clearInterval()
		//在指定毫秒数后，指定周期后来调用函数或计算表达式，后面两个为循环定时器
		
		//setTimeout
		var fun1=function()
		{
			alert("2秒时间到了");
		}
		var id=setTimeout(fun1,2000);
		
		//下面为循环定时器代码，主要打开会进入循环
		var id1=setInterval(fun1,2000);
		
		//根据id关闭定时器
		clearTimeout(id);
		clearInterval(id1);
		
		
		//轮播图案例
		var count=0;
		var ImgChange =function changeImg()
		{
			var img= document.getElementById("img");
			if(count==1)
			{
				img.src="../Img/img.jpg";
				count++;
			}
			else
			{
				img.src="../Img/image.jpg";
				count = 1;
			}
				
		}
		//启动循环定时器
		setInterval(ImgChange,"3000");
		
		
		
		//window对象-属性
		
		//获取history，window。history
		var h1=history;
		alert(h1);
		
		//获取DOM对象
		window.document.getElementById("openBtn");

		//location:地址栏对象
		//reload()、属性href
		var flashBtn=document.getElementById("a_btn");
		
		flashBtn.onclick=function()
		{
			location.reload();
			locaton.href="https://ww.baidu.com";
		}
		
		var href=location.href;
		alert(href);
		
		
		
		//Histroy 历史记录对象
		//back forward、go，加载histroy列表中的前一个url，下一个url，某个具体的页面
		//属性：length，返回当前历史记录列表的url数量；
		//histroy,并不是浏览器的历史记录
		var btn1=document.getElementById("forward");
		btn1.onclick=function()
		{
			history.forward();
		}
		
		//go方法，参数为正，表示前进几个历史记录，为负，表示后退几个历史记录
	</script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>js10.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<style>
		p
		{
			text-align:center;
			
		}
		span
		{
			color:red;
		}
	</style>

  </head>
  
  <body>
    <p>
        <span id="time">5</span>秒之后，自动跳转首页。。。
    </p>
    
    <script type="text/javascript">
	    var second=5;
	    var t=document.getElementById("time");
		var time=function()
		{	    
			second--;
			t.innerHTML=second+"";
			
			if(second<=0)
			{
				location.href="https://www.baidu.com";
			}
		}
		
		setInterval(time,1000);
	</script>
  </body>
</html>