js-BOM

js-BOM

JavaScript中常见的弹窗

 

alert("alert") 普通的弹窗，带有确定按钮的弹窗
prompt("看看我是什么？")  带有输入框的弹出框
/confirm("看看我是什么")   带有确定和取消按钮的弹窗

窗口的位置

window.screenLeft  距离屏幕左边的位置

window.screenX  兼容火狐

窗口的大小

innerWidth  页面的宽度

innerHeight  页面的高度

outerWidth  页面的宽度+border

outerHeight  页面的高度 + border

window.open

open("链接路径"，"宽高")

window.close()  窗口关闭

window.print() 调取打印机

location对象

location 对象，获取当前URL信息的对象
location.hash 获取url中#及#后面的内容 *
location.host 主机名:端口号 如http://127.0.0.1:8020
location.hostname 主机名
location.href 整个URL地址 *
location.origin 协议+主机名+端口号
location.pathname 路径名
location.port 端口号 *
location.protocol 协议
location.search 问号及问号后面的内容 *
location.reload() 重载当前URL *
location.replace("https://www.baidu.com") //替换当前URL地址 *

location.assign("https://www.baidu.com")  //跳转到指定URL和location.href等效 *

navigator对象

alert(navigator.appName) //浏览器名称
alert(navigator.appVersion) //浏览器的版本信息
alert(navigator.platform) // 浏览器所在的操作系统
alert(navigator.userAgent) //用户代理信息

判断浏览器
谷歌浏览器：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.92 Safari/537.36
火狐浏览器：Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
IE浏览器：MSIE
screen

alert(screen.width) //屏幕的宽度
alert(screen.height) //屏幕的高度

history历史

            document.getElementById("back").onclick=function(){
                history.back()  //back 后退
            }
            document.getElementById("go").onclick=function(){
                history.forward()   //forward 前进的
            } 

            //文本中点击按钮绑定历史事件
            document.getElementById("back").onclick=function(){
                history.back()
            }
            document.getElementById("go").onclick=function(){
                history.forward()   
            } 

cookie存储

存储数据的，当用户访问一个网址的时候，会创建一条cookie,存放大小有限，不安全，当浏览器关闭的时候，cookie消失

设置一条cookie
document.cookie="名字=值"
document.cookie="name=llr" //设置一条cookie

cookie是有有效期的

var time=new Date()
            console.log(time.getDate())
            time.setDate(time.getDate()+365) //设置日期 365天后
            document.cookie="name=llr;expires="+time

案例

            //设置cookie
            function setCookie(key,value,day){
                var oDate=new Date();
                oDate.setDate(oDate.getDate()+day);
                document.cookie=key+'='+value+';expires='+oDate
            }
            setCookie("user","张三",10)
            setCookie("age","20",10)
            
            //console.log(document.cookie)
            


            //获取cookie
            function getCookie(key){
                //user=张三; age=20
                var arr=document.cookie.split("; "); //注意空格
                //arr=['user=张三','age=20']
                for(var i=0;i<arr.length;i++){
                    var arr2=arr[i].split('=');
                    console.log(arr2)  //["age", "20"]
                    if(arr2[0]==key){
                        return arr2[1] 
                    }    
                }
                return ""
            }
            
            
            //删除cookie
            function removeCookie(key){
                setCookie(key,1,-1)
            }
            removeCookie("user")
            console.log(getCookie("user"))
            document.getElementById("box").innerHTML=getCookie("user")