JS-----第六章BOM编程_js chardet-CSDN博客

本文链接：https://blog.csdn.net/weixin_68509156/article/details/125142821

BOM编程

BOM:Browser Object Model，浏览器对象模型。

BOM编程: 在浏览器中，js代码是通过内嵌在浏览器中的javascript解释器来运行的。在浏览器加载页面的时候，如果页面中有js代码，js解释器会将浏览器

的各个部分封装成对应的对象，然后通过访问这些对象的属性和方法来实现特定的功能，这就是BOM编程。

1.window对象

window对象是一个顶层对象，其中包含很多属性和方法，其中的属性也对应一些子对象:document,history,location,screen等等。

属性/方法	说明
history	历史记录对象
location	地址栏对象
document	文档对象
screen	客户窗口屏幕
event	事件对象
stauts	状态条
open	打开子窗口的方法
close	关闭窗口的方法
alert	消息提示框
prompt	输入提示框
confirm	确认框

2.history历史记录对象

history记录了用户在浏览器中的浏览器记录，通过history可以访问用户的浏览记录历史信息。对应于浏览器工具栏上的前进和后退按钮。

方法:

history.forward():前往下一页

history.back():返回上一页

history.go(索引）:跳到某一页

<!DOCTYPE html>
<html>
 <head>
  <title> new document 1 -A </title>
  <meta charset="gbk"/>

 </head>

 <body>
  <h3>这是Noname1-A页面</h3>
  <a href="Noname1-B.html">Noname1-B页面</a>
   <!--
    history.forward(): 前进到历史记录中的下一个页面
  -->
  <input type="button" value="下一个页面" onclick="window.history.forward()"/>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title> new document 1 -B </title>
  <meta charset="gbk"/>
 </head>

 <body>
  <h3>Noname1-B页面</h3>
  <!--
    history.back(): 后退到历史记录中的上一个页面
  -->
  <input type="button" value="回退上一页" onclick="history.back()"/>
 </body>
</html>

3.location地址栏对象

URL ：统一资源占位符，定位符

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

window.location.href	改变当前页面的地址（有历史）
window.location.replace	替换当前页面的地址（无历史）
window.location.reload();	重新加载当前页面

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
  //当下拉框选项切换的时候，跳转网站
  function goWebSite()
  {
    //获取选中的网站
    var site = document.getElementById("website").value;
    //alert(site);
    //选中的站点数据不为空时，才跳转网站
    if(site!="")
    {
        //通过浏览器的地址栏对象，跳转页面
        window.location.href=site;
    }
  }
  </script>
 </head>

 <body>
  网址:
  <!--
  onchange:下拉选项切换时触发的事件
  -->
  <select id="website" onchange="goWebSite()">
    <option value="">请选择</option>
    <option value="http://www.baidu.com">百度</option>
    <option value="http://www.taobao.com">淘宝</option>
    <option value="http://www.jd.com">京东</option>
  </select>
 </body>
</html>

4.window对象的常用方法

window.alert();//弹出消息框
window.prompt();//输入消息框
window.confirm();//确认框
window.setTimeout(函数名,延时时间); //延迟指定时间(毫秒)调用一次函数
window.setInterval(函数名,延时时间); //每隔特定时间(毫秒)，重复调用函数

定时器方法

setTimeout(函数名,延时时间):延迟指定的时间后，执行一次函数

setInterval(函数名,延迟时间):每隔指定的延迟时间，就执行一次函数

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
  function test()
  {
    alert(123);
    //使用递归方式调用函数，实现每隔指定时间，调用一次的效果
    //等价于setInterval
    setTimeout("test()",3000);
  }
  //调用函数
  //test();

  //延迟调用
  //延迟时间是毫秒数:1s = 1000ms
  //延迟指定时间(毫秒数),调用一次函数
  //setTimeout(test,3000);
  //调用函数加双引号,函数后要加括号。函数外没有双引号时，直接写函数名
  setTimeout("test()",3000);

  //每隔指定时间调用一次函数
  //setInterval(test,3000);

  </script>
 </head>

 <body>
  
 </body>
</html>

电子时钟

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 #time
 {
    width:300px;
    height:100px;
    line-height:100px;
    border:2px solid black;
    text-align:center;
    font-size:20px;
 }
  </style>

  <script type="text/javascript">

  //显示系统时间
  function showTime()
  {
    //创建新的日期对象，用于获取当前的系统时间,并存入变量d中
    var d = new Date();
    //通过d获取系统日期的各个部分
    var year = d.getFullYear();
    //月份默认:0-11
    var month = d.getMonth()+1;
    var day = d.getDate();

    var hour = d.getHours();
    var min = d.getMinutes();
    var sec = d.getSeconds();
    //获取div元素
    var div = document.getElementById("time");
    //设置div的内容
    div.innerHTML=year+"年"+month+"月"+day+"日"+" "+
                  hour+"时"+min+"分"+sec+"秒";

    //递归调用，实现循环处理的效果
    t = setTimeout(showTime,1000);
  }

  //定义变量，用于存储定时器对象
  var t;
  //通过开始函数，实现循环调用
  //函数命名要避免系统的关键字
  function startTime()
  {
    //setTimeout:会创建出一个定时器对象，我们可以保存这对象。
    //使用保存的对象，可以清除定时器
    //t = setTimeout(showTime,1000);
    showTime();
  }

  //停止计时
  function stopTime()
  {
    //将定时器对象清除，结束定时器效果
    clearTimeout(t);
  }
  </script>
 </head>

 <body>
  <input type="button" value="开始" onclick="startTime()"/>
  <input type="button" value="停止" onclick="stopTime()"/>
  <hr/>
  <div id="time"></div>
 </body>
</html>

短信倒计时

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="gbk"/>
  <script type="text/javascript">
    // 发送短信
    function sendMsg(){
        alert("发送一条验证码");

        // 让按钮处于禁用状态
        var btn = document.getElementById("btnSend");
        btn.disabled=true; //设置按钮禁用
        console.log(btn);

        var i=10;
        //倒计时
        var t = setInterval(function(){
                i--;
                //i等于0,解封
                if(i==0){
                    btn.disabled=false;
                    //清理定时器，不进行倒计时
                    clearTimeout(t);
                    btn.value="发送验证码";
                    return; //终止方法执行
                }
                btn.value="发送验证码("+i+"s)";
            },1000)
    }
  </script>
 </head>

 <body>
  <!--
  disabled="disabled" : 禁用按钮
  -->
  <input type="button" 
         value="发送验证码" 
         onclick="sendMsg()"
         id="btnSend"
         />
 </body>
</html>

5.HTML页面常用事件

onclick:元素的单击事件

onload:页面加载完成事件

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">
	//页面加载事件 window.onload
	//需求:页面显示之后，动态的设置标题和内容
	/*
	var bt = prompt("请输入新闻标题:","");
	var nr = prompt("请输入新闻内容:","");
	document.getElementById("title").innerHTML=bt;
	document.getElementById("content").innerHTML=nr;
	*/

	function test(){
		var bt = prompt("请输入新闻标题:","");
		var nr = prompt("请输入新闻内容:","");
		//innerHTML(元素内部内容)/outerHTML(包含元素自己的标签在内的内容):用于非表单元素
		//value:用于表单元素的设值和取值
		document.getElementById("title").innerHTML=bt;
		document.getElementById("content").innerHTML=nr;

		//对比
		alert(document.getElementById("title").innerHTML);
		alert(document.getElementById("title").outerHTML);
	}

	//页面加载完成事件,test做事件绑定时，不要加括号
	//等页面中的所有元素都加载完成的时候，会触发该事件，并自动调用事件绑定的函数
	//window.onload=test; //这是事件函数绑定

	//绑定页面加载事件，关联一个匿名函数
	window.onload=function(){
		alert(123);
	}
  </script>
 </head>

 <body>
	<h1 id="title"></h1>
	<p id="content"></p>
 </body>
</html>

事件对象：IE事件对象模型，W3C事件对象

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	#mydiv{
		width:100px;
		height:100px;
		border:2px solid red;
	}
	#myspan{
		border:2px solid black;
	}
  </style>
  <script type="text/javascript">

	function test(e){
		//alert(123);
		
		//ie事件模型对象: window.event,
		// 包含了事件发生时的相关信息,比如鼠标事件,鼠标单击的位置,单击的目标
		// id:  mydiv ===> document.getElementById("mydiv")
		// window.event.clientX:鼠标点击事件，x轴坐标
		//  window.event.clientY:鼠标点击事件，y轴坐标
		//  window.event.target：触发事件的目标元素
		//  window.event.target.tagName: 事件元素的标签名(body,html,span,div)
		//mydiv.innerHTML=window.event.clientX+" "+window.event.clientY+"<br/>";
		//mydiv.innerHTML+=window.event.target.tagName;

		//w3c事件模型对象: 通过事件绑定的函数，传入事件对象参数
		//e:代表w3c事件模型的事件对象
		//  e.pageX:鼠标点击事件，x轴坐标
		//  e.pageY:鼠标点击事件，y轴坐标
		//  e.target：触发事件的目标元素
		//  e.target.tagName: 事件元素的标签名(body,html,span,div)
		mydiv.innerHTML=e.pageX+" "+e.pageY;
		mydiv.innerHTML+=e.target.tagName;
	}

	//绑定文档的单击事件
	document.onclick=test;
  </script>
 </head>

 <body>
  <input type="button" value="测试按钮"/>
  <div id="mydiv"></div>
  <span id="myspan">这是一个内容</span>
 </body>
</html>