BOM浏览器，导航，弹窗，cookie，计时

12.BOM

12.1常用对象

Window：窗口，浏览器的窗口。

我们定义的全局变量和全局函数都是window对象的属性和方法。

 

var a=1;
function tes(){
    var a=1;
    alert(a);
    alert(window.a);
}

 

去哪聚变量时window的属性。全局函数时window方法。

浏览器body的宽度：window.innerWidth;

浏览器body的高度：window.innerHeight

varp1=document.getElementById("p1");
var width =window.innerWidth;
var height=window.innerHeight;
p1.innerHTML="窗口宽度:"+width+"窗口高度:"+height;

可以获取目前浏览器的宽度和高度

常用的方法：

Open：打开一个新的浏览器。要穿三个参数，要打开的路径,打开方式：在本身打开还是新的打开的参数，三，对于新打开的浏览器可以定义窗口的宽高。

var my=window.open("https://www.baidu.com","_blank","height=200,width=300");

 

close()：关闭一个窗口。

my.close();

 

 

 

 

function openWin2(){
    myWindow.close();
}

moveTo():移动一个窗口。以窗口的左上角为坐标起点（少用）

 

 

 

function openWin3(){
    //一个窗口的左上角为移动窗口的坐标
    myWindow.moveTo(200,200);
    myWindow.focus();
}

 

focus：使窗口获得焦点

myWindow.resizeTo(1000,1500);

resizeTo：改变大小

 

screen：屏幕也是window下面的一个对象，在使用的时候可以用window。Screen，也可以把window省略掉。

 

Location：地址

常用的属性：href完整路径

            Port端口号

            pathname路径名

 

varhref=location.href;
document.write("完整路径："+href+"<br>");
var port=location.port;
document.write("端口号："+port+"<br>");
var path=location.pathname;
document.write("路径名:"+path+"<br>");
var pro=location.protocol;
document.write("协议:"+pro+"<br>")

 

 

刷新：普通刷新和强制刷新

function newLoca1(){
    location.reload();//如果传值为true那么就是强制刷新
}

 

history:历史记录

记录当前窗口的历史，可以进行页面的转换

Back：返回上一页

Forward：进入下一页

Go：进入确定的下一页（要传参）

function goBack(){
    history.back();
}
function goBack1(){
    location.assign("http://blog.csdn.net/lllllllllaaa");
}
function goBack2(){
    history.forward();
}
function goBack3(){
    history.go(-1);
}

 

 

 

12.2弹窗

常用的弹窗：

第一种：

Alert：警告提示框！也可以是window对象下的方法，window可以不写。（没有返回值）

var str= prompt("请输入内容!",”啦啦啦”)

alert("警告提示框!");

 

第二种：

Prompt：（“提示的信息”，“默认值”）；信息提示输入框，也可以是window对象下的方法，window可以不写。当点击了确定后才返回值，取消则为空。（有返回值）

第三种：

varisRight=confirm("是否确定删除？");
   document.write(typeof(isRight)+"<br>"+isRight);

Confirm确认框，当确定是返回true，取消false

  

 

 

12.3cookie：

作用：将信息储存在本地浏览器

Cookie的作用：在本地浏览器存储数据，用于记住账号

Cookie的组成

键值对的形式

存储数据：”usersid：123456  , psd：123132”

有效期：“expires=今天以后的时间”;

 

 

 

获取cookie：

通过document . Cookie就能得到浏览器之前存储的cookie。是一个字符串。将这个字符串进行解析，得到内容。

   var usermima=document.getElementById("usermima").value;
   var username=document.getElementById("username").value;
    var date=newDate();
    date.setDate(date.getDate()+7);

    var cooketext="usermima="+usermima;+";"+"expires="+date;
    var cooketext2="username="+username;+";"+"expires="+date;
    document.cookie=cooketext;
    document.cookie=cooketext2;
    alert(document.cookie);
}

 

 

清除：将储存的cookie的有效期改为过去的某一天，就能清除cookie

function removeCookie(){
    var date=newDate();
    date.setDate(date.getDate()-7);
     var cookieText="username=;expires"+date;
     var cookieText2="usermima=;expires"+date;
    document.cookie=cookieText;
    document.cookie=cookieText2;
}

 

 

 

 

13.4计时

 

setInterval（“函数”，“毫秒数”）；//计时器，就是个多久时间就调用一次函数。

var tier=setInterval("getTime()",1000);
function getTime(){
    var shijian=document.getElementById("shijian");
    /*shijian.innerHTML=newDate().toLocaleString();*/
    var time=newDate();
    var hour=time.getHours();
    var minute=time.getMinutes();
    var second=time.getSeconds();
    shijian.innerHTML=hour+":"+minute+":"+second;
   

clearInterval（计时器）；//停止一个计时器。

案例：六秒倒计时：

var time=setInterval("shijian()",1000);
var a=6;
function shijian(){
    var shijian=document.getElementById("shijian");
    if(a==0){
        clearInterval(time);
        alert("倒计时结束！")
    }else{
        shijian.innerHTML=a--;
    }
}

 

 

延时器：setTimeout（“函数名”，“毫秒数”）；//，就是隔了多久就调用一个函数。

<p id="p1">您的电话已欠费（三秒后停止）</p>
</body>
<script>
    var timer=setTimeout("ala()",3000);
    function ala(){
        var p1=document.getElementById("p1");
        p1.innerHTML="";
    }