BOM
master what is BOM
master BOM to the core: -window object
master the control of the window object, pop-up window method
BOM (Browser Object Model) browser object model
It provides the main objects:
window navigator screen history location document event
Global variables: variables that can be called anywhere in the script
allGlobal variables and global methods are grouped on the window
<body>
<div id="box">
<span>iphone6s</span>
<input type="button" value="删除" id="btn">
</div>
<script>
var age=15;
function sayAge(){
alert('我'+window.age);
}
// 声明一个全局变量
window.username="marry"; //相当于 var username="marry";
// 声明一个全局方法
window.sayName=function(){
alert("我是"+this.username);
}
//sayAge();
//window.sayName();
// confirm()
// 获取按钮,绑定事件
var btn=document.getElementById("btn");
btn.onclick=function(){
// 弹出确认对话框
var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！");
if(result){
document.getElementById("box").style.display="none";
}
}
// 弹出输入框
//var message=prompt("请输入您的星座","天蝎座");
//console.log(message);
</script>
</body>
Return value: Boolean value, when the point is determined, comfirm() returns true, otherwise it returns false
<body>
<input type="button" value="退 出" id="quit">
<script>
window.onload = function(){
// 打开子窗口，显示newwindow.html
window.open("D:/little_tools/vip/html/test.html","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
var quit = document.getElementById("quit");
// 点击关闭当前窗口
quit.onclick = function(){
window.close();
}
}
</script>
</body>
JavaScript is a single-threaded language, and single-threaded means that the executed code must be executed in order.
Master timeout calls and intermittent calls.
//setTimeout("alert('hello')",4000);
var fnCall=function(){
alert("world"); //自定义函数
}
var timeout1=setTimeout(function(){
alert("hello"); //匿名函数
},2000)
//SetTimeout方法返回一个ID值，通过它用clearTimeout()取消超时调用
clearTimeout(timeout1);
//setTimeout(fnCall,5000);
setTimeout() executes the code only once, if you want to call it multiple times, you can let the code call setTimeout() again
Intermittent calls executed periodically
/* var intervalId=setInterval(function(){
console.log("您好"); //打印9次
},1000)
// 10秒之后停止打印
setTimeout(function(){
clearInterval(intervalId);
},10000);*/
var num=1,
max=10,
timer=null;// 超时调用的ID是个对象，null释放内存
// 每隔1秒针num递增一次，直到num的值等于max清除
/* timer=setInterval(function(){
console.log(num);
num++;
if(num>max){
clearInterval(timer);
}
},1000)*/
// 使用超时调用实现
function inCreamentNum(){
console.log(num); // 1 2 3 10
num++;
if(num<=max){
setTimeout(inCreamentNum,1000); //
}else{
clearTimeout(timer);
}
}
timer=setTimeout(inCreamentNum,1000);
location object The
location object provides information related to the document loaded in the current window, and also provides some
navigation functions. It is not only an attribute of the window object, but also an attribute of the document object.
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
height:400px;background:#ccc;}
.box2{
height:600px;background:#666;}
</style>
</head>
<body>
<div class="box1" id="top"></div>
<div class="box2"></div>
<input type="button" id="btn" value="返回顶部">
<script>
//console.log(location.href);
//console.log(location.hash); //给网页后加#top可以取到#top
var btn=document.getElementById("btn");
btn.onclick=function(){
location.hash="#top";
}
console.log(location.pathname);
</script>
</body>
location changes the location of the browser.
Master location operations, location.replace() and location.reload() functions
<input type="button" value="刷新" id="reload">
<script>
/* setTimeout(function(){
//location.href='index6.html';
// window.location='index6.html'; 这两种会产生回退按钮，下面replace则不会
location.replace("index6.html");
},1000)*/
document.getElementById("reload").onclick=function(){
location.reload(true);
}
</script>
History object in BOM
The history object saves the history of the user visiting the page in the browser
<p><input type="button" value="后退" id="btn"></p>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
history.back();
history.go(-2);//回退2步
}
</script>
The Screen object contains information about the client's display screen.
console.log("页面宽："+screen.availWidth);
console.log("页面高："+screen.availHeight);
console.log("pageWidth:"+window.innerWidth);
console.log("pageHeight:"+window.innerHeight);
Navigator object UserAgent: used to identify the content of information such as browser name, version, engine, and operating system.
//console.log(navigator.userAgent);
// 判断浏览器
function getBrowser(){
var explorer = navigator.userAgent,
browser;
if(explorer.indexOf("MSIE")>-1){
browser = "IE";
}else if(explorer.indexOf("Chrome")>-1){
browser = "Chrome";
}else if(explorer.indexOf("Opera")>-1){
browser = "Opera";
}else if(explorer.indexOf("Safari")>-1){
browser = "Safari";
}
return browser;
}
var browser = getBrowser();
console.log("您当前使用的浏览器是："+browser);
// 判断终端
function isPc(){
var userAgentInfo = navigator.userAgent,
Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
flag = true,i;
console.log(userAgentInfo);
for(i=0;i<Agents.length;i++){
if(userAgentInfo.indexOf(Agents[i])>-1){
flag = false;
break;
}
}
return flag;
}
var isPcs = isPc();
console.log(isPcs);
The indexOf() method returns the position of the first occurrence of a specified string value in the string, if it does not appear before, it returns -1
IE does not support console.log(), use alert()
NEXT:
A little chestnut!