js中的bom属性

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(){
                
            }

你可能感兴趣的:(js中的bom属性)