Bom 浏览器对象模型
window document history location
window 对象
/*
window里面的方法或者属性写的时候可以不写window对象
定义的全局变量和方法
弹框
alert()提示信息框–警告框
prompt("")
prompt带输入框的提示框,点击确定 该方法的返回值或者默认值
返回值是字符串类型
confirm("");
提示信息提示框 返回值是 true和false
/
/
网页打开关闭方法
open()打开指定的网页
close() 关闭当前网页
/*
**获取用户网页选择的内容**
getSelection()
console.log(getSelection());
**获取非行内样式方法**
getComputedStyle(obj)
getComputedStyle(obj).width
window 相关尺寸问题
innerHeight 可视区域宽高
innerWidth
console.log(innerHeight);
console.log(innerWidth);
screen 屏幕尺寸
实际的宽和高
screen.availHeight
screen.availWidth
screen.height;
screen.width;
**备注:宽和高其它的获取方式
下面两个获取的也是可视区域的宽高**
**documentElement(dom元素) 获取实际的宽和高使用offset
获取不包含边框的宽和高,使用clientHeight clientWidth**
//document.documentElement.clientHeight;
// document.documentElement.clientwidth;
// document.body.clientHeight
// document.body.offsetHeight
// document.body.offsetWidth
样式里面的宽高
navigator 对象是获取当前设备的相关信息的
console.log(Navigator);
**window 对象里面的计时器
一次性计时器 setTimeout 延迟多长时间去执行 返回的是数字
循环计时器
帧计时器(按照电脑屏幕的刷新频率执行)**
var time = setTimeout(function(){
console.log(1);
},1000);
console.log(time); */
setTimeout(showData,1000);
function showData(){
console.log(1);
setTimeout("showData"(),1000);
function showData(){
console.log(1);
}
计时器里面的this指针
setTimeout(function(){
console.log(this);//window
},1000);
给计时器传值
计时器调用方法需要传递实参 在计时器后面直接写值
setTimeout(function(data){
console.log(data);
},1000,10);
setTimeout 做成循环计时器
使用的是函数的递归来实现(函数自身调用自身)
var count = 0;
var time;
loadtime();
function loadtime(){
count++;
console.log(conunt);
if(count>10){
return;//递归在这里满足条件 直接跳出,也可以终止计时器
//关闭计时器
clearTimeout(time);//关闭计时器
}
time =setTimeout(loadtime,1000);
console.log("time"+time);
}
**循环计时器setInterval 和 setTimeout使用方式一样**
var count = 0;
var time = setInterval(function() {
count++;
console.log(count);
if(count>5){
clearInterval(time);
}
}, 1000);
requestAnimationFrame() 事件不可设置 1000/60 类似 setTimeout
使用递归来做成循环计时器
cancelAnimationFrame(time);关闭计时器
var count = 0;
var time;
loop();
function loop(){
count++;
console.log(count);
if(count>50){
cancelAnimationFrame(time);
return;
}
time = requestAnimationFrame(loop);
}
**requestAnimationFrame 兼容性写法**
var requestAnimation = requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFram || msRequestAnimationFram || function(callback){
setTimeout(callback,1000/60);
}
var cancelAnimation = cancelAnimation ||webkitAnimationFrame || mozAnimationFram || msRequestAnimationFram || function(number){
clearTimeout(number);
}
var count = 0;
var time;
loop();
function loop(){
count++;
console.log(count);
if(count>30){
cancelAnimation(time);
return;
}
time = requestAnimation(loop);
}
requestAnimationFrame 在浏览器失去焦点的时候 会自动暂停
setInterval setTimeout 不会自动暂停
**window 转码解码方法
btoa 转码
atob 解码
不能直接对汉字进行转码解码**
var str = "dsadsa";
console.log(window.atob(str));
console.log(window.btoa(str));
下面是对汉字的解码转码
console.log(window.unescape("张三"));//解码
console.log(window.escape("张三"));//转码
console.log(atob(unescape(encodeURIComponent("李四"))));
汉字转 base64位转码解码
var s = "里斯";
var b64 = btoa(encodeURIComponent(s));
console.log(decodeURIComponent(atob)(b64));
**window 事件
加载完成事件**
//加载完成事件**
window.onload = function(){
}
//浏览器窗口发生变化事件
window.onresize = function(){
}
//关闭时间
windiw.onclose = function(){
}
//加载失败事件
window.onerror = function(){
}
window.onmousedown = function(){
}