JavaScript高级(4)

最新推荐文章于 2022-06-17 00:30:45 发布

airar

最新推荐文章于 2022-06-17 00:30:45 发布

阅读量144

点赞数

分类专栏： JavaScript 文章标签： javascript html html5

本文链接：https://blog.csdn.net/airar/article/details/120704479

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.JavaScript中的BOM对象

浏览器对象模型--Browser ObjectModel (BOM)

1.window属性

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

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

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

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //BOM对象
            //Browser Object Model (BOM)---浏览器对象模型
            //BOM对象-->window对象
            //window对象的属性
            //浏览器窗口的尺寸【不包括工具栏和滚动条】
            //对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari
            //window.innerHeight - 浏览器窗口的内部高度
            //window.innerWidth - 浏览器窗口的内部宽度
            /*window.onload=function(){
                var w=window.innerWidth;
                var h=window.innerHeight;
                document.write("<h1>"+w+"x"+h+"</h1>")
            }*/
            //对于 Internet Explorer 8、7、6、5：
            //document.documentElement.clientHeight
            //document.documentElement.clientWidth
            //或者
            //document.body.clientHeight
            //document.body.clientWidth
            /*window.onload=function(){
                //var w=document.documentElement.clientWidth;
                //var h=document.documentElement.clientHeight;
                var w=document.body.clientWidth;
                var h=document.body.clientHeight;
                document.write("<h1>"+w+"x"+h+"</h1>");
            }*/
            //涵盖所有浏览器
            window.onload=function(){
                var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
				var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;
                document.write("<h1>"+w+"x"+h+"</h1>");	  
            }
    </head>
    <body>
    </body>
</html>

2.window方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

格式:window.open(URL,name,features,replace)

URL	一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name	一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
replace	一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目 false - URL 在浏览历史中创建新的条目

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //window对象的方法----全局方法
            //1.打开/关闭窗口【open()/close()】
            //open()---打开一个新窗口
            //1 URL---可选的字符串，在新窗口中显示的文档的 URL
            //2 name---可选的字符串,新窗口的名称
            //3 features---可选的字符串,新窗口要显示的标准浏览器的特征
            //4 replace----可选的布尔值
            //true - URL 替换浏览历史中的当前条目。
            //false - URL 在浏览历史中创建新的条目
            function testopen(){
                //window.open("open.html","open","width=400,height=400",true);
                //window.open("","open","width=400,height=400",true);
                //window.open("https://www.baidu.com/","open","width=400,height=400",true);
                window.open("https://www.baidu.com/","open","width=400,height=400",false);
            }
        </script>
    </head>
    <body>
        <input type="button" value="open" onclick="testopen()"/>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>测试open方法的页面</h1>
    </body>
</html>

重要事项：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同

为了使代码清楚明白，请使用 Window.open()，而不要使用 open()

close() 方法用于关闭浏览器窗口。

说明:方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或

只调用 close() 来关闭其自身

只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用

户的浏览器

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //close()----关闭当前窗口
            function testcolse(){
                window.close();
            }
        </script>
    </head>
    <body>
        <input type="button" value="colse" onclick="testcolse()"/>
    </body>
</html>

JavaScript 弹窗方法

在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

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

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

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true，如果点击 "取消", 确认框返回 false。

提示框:window.prompt("sometext","defaultvalue");

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

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

参数1---提示信息

参数2---提示框的默认值

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //2.弹出框方法
            //警告框window.alert("sometext");
            //确认框:window.confirm("sometext");
            //1.有一个boolean值的返回值
            //true---你点击 "确认"
            //false---你点击 "取消"
            function testcolse(){
                var flag=window.confirm("请确定是否要退出")
                if(flag){
                    window.close();
                }
            }
            //提示框:window.prompt("sometext","defaultvalue");
            //sometext---字符串，提示信息
            //defaultvalue---字符串，默认值
            //返回值:1.点击确认，那么返回值为输入的值
            //       2.点击取消，那么返回值为 null
            function testprompt(){
                var username=window.prompt("请输入用户名","zhangsan");
                if(username!==null){
                    alert("确认");

                }else{
                    alert("取消")
                }
            }
            /
        }
        </script>
    </head>
    <body>
        <input type="button" value="prompt" onclick="testprompt()"/>
    </body>
</html>

3.Window子对象

1.window Screen--屏幕

window.screen 对象包含有关用户屏幕的信息

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

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

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

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

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //window screen--屏幕
            //1.总宽度和总高度  --- screen.width   /  screen.height
            //2.可用宽度和可用高度----screen.availWidth  / screen.availHeight
            //3.色彩深度----screen.colorDepth
            //4.色彩分辨率----screen.pixelDepth
            window.onload=function(){
                 //总宽度和总高度
                var w1=window.screen.width;
                var h1=window.screen.height
                document.write("<h3>总宽度和总高度=="+w1+"*"+h1+"</h3>");
                //可用宽度和可用高度
                var w2=window.screen.availWidth;
                var h2=window.screen.availHeight;
                document.write("<h3>可用宽度和可用高度=="+w2+"*"+h2+"</h3>");
                 //色彩深度
                 var d=window.screen.colorDepth;
                 document.write("<h3>色彩深度=="+d+"</h3>");
                 //色彩分辨率
                 var p=window.screen.pixelDepth;
                 document.write("<h3>色彩分辨率=="+pageYOffset+"</h3>");
            }
        </script>
    </head>
    </body>
</html>

2.window Location---页面的地址 (URL)

对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

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

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

后的部分）

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //window Location---页面的地址 (URL)
            //location.href 属性返回当前页面的 URL。[跳转]
            //location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）
            function login(){
                var name=document.getElementById("input1").value;
                var pass=document.getElementById("input2").value;
                if(name=="lisi" && pass=="123456"){
                    window.location.href="success.html?username="+name+"&password="+pass;
                }
            }
        </script>
    </head>
    <body>
       <table border="2px">
           <tr align="center">
               <td>
                   <h3>用户登录</h3>
               </td>
           </tr>
           <tr align="center">
               <td><input id="input1" type="text" value="请输入用户名"></td>
           </tr>
           <tr align="center">
            <td><input id="input2" type="password" value=""></td>
        </tr>
        <tr align="center">
            <td><input id="but" type="button" value="登录" onclick="login()"></td>
        </tr>
       </table>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onload=function(){
                var myurl=window.location.search;
                var info=myurl.split("&");
                var msg=info[0].split("=");
                var hdom=document.getElementsByTagName("h3")[0];
                hdom.innerHTML=msg[1];
            }
        </script>
    </head>
    <body>
        <h3>登录成功</h3> 
    </body>
</html>

3.window History---历史对象

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

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

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //window History---历史对象
            //history.back() - 与在浏览器点击后退按钮相同【上一个】
            //history.forward() - 与在浏览器中点击按钮向前相同【下一个】
            function tonext(){
                window.history.forward();
            }
        </script>
    </head>
    <body>
        <h1>第一个测试页面</h1>
        <a href="test6.html">连接第二个测试页面</a>
        <input type="button" value="前进" onclick="tonext();">
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function tonext(){
                window.history.forward();
            }
            function toback(){
                window.history.back();
            }
        </script>
    </head>
    <body>
        <h1>第二个测试页面</h1>
		<a href="test7.html">连接第三个页面</a>
        <input type="button" value="前进" onclick="tonext();">
        <input type="button" value="后退" onclick="toback();">
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function toback(){
                window.history.back();
            }
        </script>
    </head>
    <body>
        <h1>第三个测试页面</h1>
		<input type="button" value="后退" onclick="toback();">
    </body>
</html>

注意:前进history.forward()和后退history.back()在同一个窗口中的页面才有效

5.JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

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

setTimeout() - 暂停指定的毫秒数后执行指定的代码

setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
           //JavaScript 计时事件
           //在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
           //setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
           //clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。
           window.onload=function(){
               var ret;
               document.getElementById("but1").onclick=function(){
                   function getdate(){
                       var date1=new Date();
                       var datetime=date1.getFullYear()+"年"+
                       (date1.getMonth()+1)+"月"+
                        date1.getDate()+"日"+
                        date1.getHours()+":"+date1.getMinutes()+":"+date1.getSeconds();
                        document.getElementsByTagName("h1")[0].innerText=datetime;
                   }
                   ret=window.setInterval(function(){getdate();},1000);
               }
               document.getElementById("but2").onclick=function(){
                   window.clearInterval(ret);
               }
           }
           //setTimeout() -  暂停指定的毫秒数后执行指定的代码[只执行一次]
           //clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。
        </script>
    </head>
    <body>
        <input type="button" id="but1" value="开始">
        <input type="button" id="but2" value="停止">
        <h1></h1>
    </body>
</html>

airar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级(4)

1.JavaScript中的BOM对象浏览器对象模型--BrowserObjectModel (BOM)1.window属性有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度对于 Internet Explorer 8、7、6、..
复制链接

扫一扫