JavaScript的学习----2.操作BOM对象
BOM：Brouse Object Model即浏览器模型对象。BOM提供了独立于内容的，可以和浏览器窗口进行交互的对象模型。
BOM可实现的功能有：弹出新的浏览器窗口；移动，改变和关闭浏览器窗口的大小，以及页面的前进和后退；
1.Window对象和常用属性：
1.1alter（）：
注意自定义的alter()会覆盖原有的alter，自定义的方法都属于window
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Title</title> 5 6 <!--自定义alter（）方法，自定义的方法都属于window--> 7 <script> 8 function alter(){ 9 console.log("自定义的alter方法") 10 } 11 //自定义的alter会覆盖原有的alter方法。 12 </script> 13 14 15 </head> 16 <body> 17 18 </body> 19 </html>
1.2location 的href属性，自动跳转：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--location的属性 href--> <script> window.location.href="https://www.baidu.com"; </script> </head> <body> <a href="javascript:location='https://www.baidu.com'">点击跳转到百度</a> </body> </html>
1.3 confirm（）关闭的弹窗提示，带有返回值， close（）关闭；open（url）是弹出新的指定的url
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!----> <script> //confirm()显示一个带有提示信息的对话框，可接受回复 var flag=confirm("你真的要退出么？？"); console.log(flag); //关闭浏览器页面 flag=close(); console.log(flag); //弹出一个新的指定的URL页面 open("https://www.baidu.com"); //返回当前主机名，和端口号 location.hoat; location.hostname; </script> </head> <body> </body> </html>
2.document对象 ；
getElementById ：根据指定ID获得标签；
innerHTML：在标签内写入HTML；
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 1.getElementById innerHTML在指定标签中写入HTML 2.根据id给p标签中写入HTML --> </head> <body> <!--demo1--> <p id="p1"></p> <script> function f(){ document.getElementById("p1").innerHTML="<h1>你好啊！</h1>"; } f(); </script> <!--demo2--> <p id="p1"></p> <input type="button" value="显示" onclick=show()> <input type="button" value="隐藏" onclick=hiddentest()> <script> function show(){ document.getElementById("p1").innerHTML="<h1>你好sao啊！</h1>"; } function hiddentest(){ document.getElementById("p1").innerText=""; } </script> <!--demo3，一个留言板案例--> <textarea cols="40" rows="15">请输入留言内容：</textarea> <p> <input type="button" value="点击提交留言" onclick="f()"> </p> <hr> <div id="msg" style="border: 1px solid red" ></div> <p id="p2"></p> <script> function f(){ var a=0; var are = document.getElementsByTagName("textarea"); document.getElementById("p2").innerHTML="<br>"; document.getElementById("p2").innerHTML=are[0].value; //are[0]-->获得到了该标签 //are[0].value -->标签内的内容 // console.log(are[0].value) // var msg = are[0].value.app; // document.write(are[0].value); // var a=document.getElementsByTagName("textarea"); // document.write(a[0].value); } </script> </body> </html>
3.Date对象：
new Date（）：获得一个时间对象
定时函数：setTimeout("",等待的秒数)
setInterval("",时间间隔) ：每隔时间间隔执行
setTimeout("",时间间隔) ：只在时间间隔后执行一次
清除函数： clearInterval(setInterval（）的返回的ID值）
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--Date对象 var now=new Date() getDate() getHours() <!--定时函数：setTimeout("",等待的秒数) setInterval("",时间间隔) ：每隔时间间隔执行一次 setTimeout("",时间间隔) ：只在时间间隔后执行一次--> <!--清除函数： clearInterval(setInterval（）的返回的ID值)--> </head> <body> <div id="myclock"></div> <input type="button" value="start" onclick="startTime()"> <input type="button" value="stop" onclick="stopTime()"> <script> var st; function showtime() { var now=new Date(); var h=now.getHours(); var m=now.getMinutes(); var s=now.getSeconds(); //console.log("现在时间是："+h+"时"+m+"分"+s+"秒"); document.getElementById("myclock").innerHTML="<h1>现在时间是：</h1>"+h+"时"+m+"分"+s+"秒"; } //showtime(); function startTime(){ st= setInterval("showtime()",1000); //console.log(st); 返回值是1 } //startTime(); function stopTime(){ clearInterval(st); } //setTimeout("stopTime()",4000); </script> </body> </html>
4.Math对象的随机数测试：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>随机数测试: <span id="color"></span> <input type="button" value="点击变颜色" onclick="RandomTest()"> </div> <script> function RandomTest() { //num是一个【0,6】的数 var num=Math.ceil(Math.random()*7)-1; var array=Array("红色","蓝色","白色","黑色","紫色","黑色","黄色"); document.getElementById("color").innerText=array[num]; } //RandomTest(); </script> </body> </html>
