BOM
1.BOM是什么
供应了自力页面内容，与浏览器相干的一系列对象，治理窗口之间通讯
2.Window对象
具有两重角色，对象等于许可JS接见浏览器窗口的一个对象，和ECMAScript范例中的Global全局对象，在浏览器运转JS逻辑时，在全局作用域定义的对象，变量和函数
<body>
<form action="#">
<input type="text" id="username">
<input type="submit">
</form>
<script>
var form = document.forms[0];
form.addEventListener('submit',function (event) {
console.log('该表单已被提交');
});
</script>
</body>window对象的属性
<script>
// BOM中其他对象是作为window对象的属性存在
console.log(window.navigator);
console.log(window.location);
console.log(window.history);
console.log(window.document);
console.log(window);
// window对象的self属性-示意window对象自身(是只读属性)
console.log(window.self);// 照样window对象
console.log(window.innerWidth, window.innerHeight);
// window对象的innerWidth和innerHeight - 浏览器窗口的内部宽度和高度
</script>window对象的要领
<style>
#qh {
width: 300px;
height: 200px;
border: 1px solid black;
display: none;
}
</style>
</head>
<body>
<!-- 点击按钮时，翻开提示框 -->
<button id="btn">按钮</button>
<div id="qh"></div>
<script>
// 提示框
// window.alert('xxxx');
// 肯定框
// var flag = window.confirm('你肯定退出吗？');
// alert(flag);
// 输入框
/*var result = window.prompt('请输入你的用户名:');
alert(result);*/
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
var dialog = document.getElementById('qh');
dialog.style.display = 'block';
});
/*
* window.setTimeout()和window.clearTimeout()要领
* 该组要领示意耽误实行
* window.setInterval()和window.clearInterval()要领
* 该组要领示意轮回(周期)实行
*/
</script>Navigator对象
<body>
<script>
console.log('浏览器代码名: ' + navigator.appCodeName);
console.log('浏览器称号: ' + navigator.appName);
console.log('浏览器平台和版本信息: ' + navigator.appVersion);
console.log('运转浏览器操作系统平台: ' + navigator.platform);
console.log(navigator.userAgent);
</script>
</body>定时器
延时实行
setlnterval（）要领设置个定时器，将该定时器只实行一次函数
`<script>
console.log('this is message...');
/*
setTimeout(function, delay)要领
* 设置个定时器
* 参数
function-示意耽误实行的代码逻辑
delay-示意耽误实行时候，单元为毫秒
* 返回值-示意当时器的标识
* 注重-打乱代码默许的递次实行流程
*/
var t = setTimeout(function(){
console.log('you my timeout...');
},10000);
// clearTimeout(t);
console.log('you my message too...');
</script>`
周期实行
以setlnterval()要领，反复挪用个函数或实行段代码
<script>
console.log('you my message...');
/*
setInterval(function, delay)要领
* 设置个周期实行的定时器
*
function - 示意耽误实行的代码逻辑
delay - 示意耽误实行的时候，单元为毫秒
* 返回值 - 示意当前定时器的标识
*/
/*setInterval(function(){
console.log('you my interval...');
},1000);*/
/*function fun(){
console.log('you my interval...');
setTimeout(fun,1000);
}
fun();*/
(function fun(){
console.log('you my interval...');
setTimeout(fun,1000);
// setTimeout(arguments.callee,1000);
})();
console.log('this is message too...');
</script>