javascript高级05

1.BOM---Browser Object Model 浏览器对象模型

window 对象是BOM的主要对象

window 对象中的主要属性：确定浏览器窗口的尺寸

window 对象中的主要方法：打开/关闭窗口的控制方法 / 各种操作弹框

window 对象中的主要子对象：

Screen屏幕子对象、Location url子对象 、History历史子对象 、Navigator--浏览器

 

2. 控制浏览器窗口尺寸的属性

 确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）

innerWidth--- 浏览器窗口的内部宽度

innerHeight ---浏览器窗口的内部高度

对于 Internet Explorer 8、7、6、5

document.documentElement.clientWidth

document.documentElement.clientHeight

<script>
        /*  window.onload = function () {
             var w = window.innerWidth;
             var h = window.innerHeight;
             alert(w + "*" + h);     //1440*757
         } */
        //对于 Internet Explorer 8、7、6、5
        window.onload = function () {
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;
            //alert(w + "*" + h);     //1440*780
            //对上面的简写
            var w = document.body.clientWidth;
            var h = document.body.clientHeight;
            //alert(w + "*" + h);     //1424*98
        }

 //实用的 JavaScript 方案（涵盖所有浏览器）：
        window.onload = function () {
            var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            alert(w + "*" + h); //1440*757
        }

3. 打开/关闭窗口的控制方法

window.open(URL,name,features,replace)

URL--一个可选的字符串，声明了要在新窗口中显示的文档的 URL

name--一个可选的字符串，该字符声明了新窗口的名称,这个名称可以用作标记 a 和 form 的属性 target 的值

features--一个可选的字符串，声明了新窗口要显示的标准浏览器的特征

replace---一个可选的布尔值,true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。

function openjavascript1() {
            // window.open('javascript01.html', 'test1', 'width=400,height=400', false)
            window.open("https://www.baidu.com/,false");
        }

关闭窗口的控制方法： close() 方法用于关闭浏览器窗口

 function closejavascript() {
            window.close();
        }

4. 各种操作弹框

警告框:window.alert("sometext");

确认框:window.confirm("sometext");

当你点击 "确认", 确认框返回 true

如果点击 "取消", 确认框返回 false。

 function testconfirm() {
            var flag = window.confirm('确认要关闭吗？');
            // alert(flag);  确认:true 取消:false
            if (flag) {
                window.close();

            }

提示框：window.prompt('sometext','defaultvalue');

sometext:提示语句

defaultvalue：默认值

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

 function testprompt() {
            var val = window.prompt('请输入姓名', 'admin');
            // alert(val);
            if (val != null) {
                window.alert("val==" + val);
            }
        }

5. screen屏幕子对象

1.总宽度和总高度 --- screen.width / screen.height

2.可用宽度和可用高度----screen.availWidth / screen.availHeight

3.色彩深度----screen.colorDepth

4.色彩分辨率----screen.pixelDepth

<script>
        window.onload = function () {
            var zongw = window.screen.width;
            var zongh = window.screen.height;
            document.write("<h3>可用总宽度和总高度==" + zongw + "*" + zongh + "</h3>")
            var availw = window.screen.availWidth;
            var availh = window.screen.availHeight;
            document.write("<h3>可用宽度和可用高度==" + availw + "*" + availh + "</h3>")
            var colorDepth = window.screen.colorDepth;
            var pixelDepth = window.screen.pixelDepth;
            document.write("<h3>色彩深度==" + colorDepth + "</h3>");
            document.write("<h3>色彩分辨率==" + pixelDepth + "</h3>");
        }
    </script>

6. Location url子对象

location.href 属性返回当前页面的 URL

 <input type="button" value="testhref" onclick="testhref();">

   function testhref() {
            // var url = window.location.href;
            // alert(url);
            window.location.href = 'success.html';

        }

location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）

 <input id="name" type="text"> <br>
    <input id="pass" type="password"> <br>
    <input type="button" value="登录" onclick="login();">

 function login() {
            var textobj = document.getElementById('name');
            var username = textobj.value;
            var passobj = document.getElementById('pass');
            var password = passobj.value;
            if (username == "zhangsan" && password == "123456") {         // = 表示赋值
                window.location.href = "success.html?username=" + username + "&password=" + password;

            } else {
                window.alert('用户名密码错误，请重新输入！')
                var textobj = document.getElementById('name');
                textobj.value = '';
                var passobj = document.getElementById('pass');
                passobj.value = '';
            }
        }

 <script>
        window.onload = function () {
            var query = window.location.search;
            //alert(query);  //?username=zhangsan

            // var newstr = query.substring(query.lastIndexOf('=') + 1, query.length);
            // alert(newstr);  //zhangsan
            // var harr = document.getElementsByTagName("h1");
            // harr[0].innerHTML = newstr + ",登陆成功";
            //query----?username=zhangsan&password=123456
            var infoarr = query.split("&");
            var username = ''
            var password = ''
            for (var index in infoarr) {
                var info = infoarr[index];  //?username=zhangsan
                var msgarr = info.split("=");
                if (msgarr[0] == "?username") {
                    username = msgarr[1];

                } if (msgarr[0] == "password") {
                    password = msgarr[1];
                }

            }
            var harr = document.getElementsByTagName('h1');
            harr[0].innerHTML = username + "----" + password
        }
    </script>

7. window History---历史对象

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击按钮向前相同

 <script>
        function testforward() {
            window.history.forward();
        }
    </script>


<body>
    <a href="next1.html">next1.html</a>
    <input type="button" value="--->" onclick="testforward();">
</body>

<script>
        function testback() {
            window.history.back();
        }
        function testforward() {
            window.history.forward();
        }
    </script>


 <h2>next1.html</h2>
    <a href="end.html">end.html</a>
    <input type="button" value="<---" onclick="testback()">
    <input type="button" value="--->" onclick="testforward()">

 <script>
        function testback() {
            window.history.back();
        }
    </script>

<body>
    <h2>end.html</h2>
    <input type="button" value="<---" onclick="testback();">
</body>

8. window Navigator--浏览器的信息

浏览器代号:Mozilla

浏览器名称:Netscape

浏览器版本:5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

启用Cookies:true

硬件平台:Win32

用户代理:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

用户代理语言:undefined

9. JavaScript 计时事件

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

参数1-指定的运行代码是一个function

参数2-指定的毫秒数

clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。

intervalVariable参数是setInterval()的返回值

 <h1 id="h1">显示时间</h1>
    <input type="button" value="开始计时" onclick="start();">
    <input type="button" value="停止计时" onclick="end();">

 //创建日期
        function getDate() {
            var date1 = new Date()
            var strdate1 = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + "  " + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds();
            document.getElementById("h1").innerText = strdate1;
        }
        var res = null;      //要在另一个函数中使用，创建全局变量
        function start() {
            res = setInterval(function () { getDate(); }, 1000);   //里面访问的是getDate
        }
        function end() {
            clearInterval(res);
        }

setTimeout() 方法--间隔指定的毫秒数执行指定的代码一次

参数1-指定的运行代码是一个function

参数2-指定的毫秒数

clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。