day19
JavaScript BOM
BOM(browser object model)浏览器对象模型
BOM对象有：
window
navigator
screen
history
location
document
event
window
widnow是浏览器的一个实例，在浏览器中，window兑现有上冲角色，
它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定
的Global对象。
全局变量：
window声明 window.变量名=值
关键字声明 var 变量名=值
全局函数:
window声明 window.函数名=function(){}
关键字声明 function 函数名(){}
所有的全局变量和全局方法都被归在window上
语法：window.alert("content")
功能：显示带有一段消息和一个确认按钮的警告框
语法：window。confirm("message")
功能：显示一个带有指定消息和OK取消按钮的对话框
返回值：如果用户点击确定按钮，则confirm()返回true
如果用户点击取消按钮，则confirm()返回false
语法：window.prompt("text","defaultText")
参数说明：
text:要在对话框中显示的纯文本(而不是HTML格式的文本)
defaultText：默认的输入文本
返回值：如果用户单击提示框的取消按钮，则返回null
如果用户点击确定按钮，额返回输入字段当前显示的文本
语法：window.open(pageURL,name,parameters) window.close()
功能：打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明：
pageURL：子窗口路径
name：子窗口句柄(name声明了新窗口的名称，方便后期通过name对子窗口进行引用)
paramters：窗口参数(个参数用逗号分隔)
超时调用
语法：setTimeout(code,millisec)
功能：在指定的毫秒数后调用函数或计算表达式
参数说明：
1，code：要调用的函数或要执行的JavaScript代码串
2，millisec：在执行代码前需等待的毫秒数
setTimeout方法返回一个ID值通过它取消超时调用
清除超时调用
语法：clearTImeout(id_of_settimeout)
功能：取消由setTimeout()方法设置的timeout
参数说明：
1，id_of_setttimeout:由setTimeout()返回的ID值，该值表示要取消
的延迟执行代码块
间歇调用
语法：setInterval(code,millisec)
功能：每隔指定的时间执行一次代码
参数说明：
1，code：要调用的函数或要执行的代码串
2，millisec：周期性执行或调用code之间的时间间隔，以毫秒计算
清除间歇调用
语法：clearInterval(id_of_setinterval)
功能：取消由setInterval()方法设置的interval
参数说明：
1，id_of_setinterval:由setInterval()返回的ID值
window01.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // var age = 12; window.age = 12; function SayAge() { alert("我"+age); } window.username = "shink"; window.SayUser = function () { alert("user:"+this.username); } SayAge(); window.SayUser(); </script> </body> </html>
window02.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .name{ display: none; } </style> </head> <body> <div class="box" id="box"> 法式小面包 <input type="button" value='删除' id="btn"> </div> <div class="name" id="n"></div> <script> var btn = document.getElementById('btn'); btn.onclick = function () { /* document.getElementById("box").style.display = "none";*/ var result = confirm("确定要删除吗？"); if (result) { document.getElementById('box').style.display = "none"; } } var message = prompt("请输入您的名字："); if (message != null) { var n = document.getElementById('n'); n.innerHTML = "您的名字是:"+message; console.log(n.innerHTML) n.style.display = "block"; } </script> </body> </html>
window03.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" id="quit" value="退出"> <script> window.open("newwindow.html","newwindow","width=400,height=200,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,localtion=no,status=no"); var quit = document.getElementById('quit'); quit.onclick = function () { window.close(); } </script> </body> </html>
window04.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> setTimeout(function () { alert('hello'); },3000); var say = function say() { alert('say'); } var id_timeout = setTimeout(say,2000); clearTimeout(id_timeout); </script> </body> </html>
window05.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> /*var id_interval = setInterval(function () { console.log("hello"); },1000); setTimeout(function () { clearInterval(id_interval) },10000);*/ var num = 1; var max = 10; var timer = null; //实现控制台输出1-10 //用超时调用实现 /*var a =function () { console.log(num); num++ if (num<=max) { setTimeout(a,1000); } else { clearTimeout(timer); } } timer = setTimeout(a,1000);*/ //用间歇调用实现 timer = setInterval(function () { console.log(num++); if (num>max) { clearInterval(timer); } },1000); </script> </body> </html>