2020-11-25

最新推荐文章于 2022-01-29 11:48:20 发布
最新推荐文章于 2022-01-29 11:48:20 发布
阅读量112 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52398687/article/details/110127082
版权

1.JavaScript中的BOM对象

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

Window 对象
1.Window Screen–屏幕
2.Window Location----页面的地址（URL）
3.Window History ----对象包含浏览器的历史。
history.back()-与在浏览器点击后退按钮相同
history.forward（）----与在浏览器中点击按钮向前相同
4.Window Navigator—对象包含有关访问者浏览器的信息

属性

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

对于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

实用的 JavaScript 方案（涵盖所有浏览器）：

    <title>Document</title>
    <script>
        window.onload = function () {
            //确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
            var w = window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
            var h = window.innerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            window.alert(w + "*" + h);
        }
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述
方法
其他方法：
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
Window.close()用于关闭浏览器窗口
格式:window.open(URL,name,features,replace)

URL一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a 和 <form 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
replace一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：true - URL 替换浏览历史中的当前条目。 ------ false - URL 在浏览历史中创建新的条目。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function open_win(){
            window.open("https://user.qzone.qq.com/308216417");
        }
        function open_aboutblank(){
            window.open("about:blank", "空白页","width=500,height=600 " ,false);
        }
    </script>
</head>
<body>
    <input type="button"  value="打开我的QQ空间" onclick="open_win()"><br>
    <input type="button"  value="打开空白页" onclick="open_aboutblank()">
</body>
</html>

重要事项：请不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同。为了使您的代码清楚明白，请使用 Window.open()，而不要使用 open()。

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

说明:方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。
只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。
方法一：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var myWindow= window.open("about:blank","","width=600,height=700");
        myWindow.document.write("This is 'mywindow'");

        function closeWin(){
            myWindow.close();
        }
    </script>
</head>
<body>
    <input type="button"  value="Close 'myWindow'"  onclick="closeWin()">
</body>
</html>

方法二：

    <title>Document</title>
    <script>
        var myWindow=null;
        window.onload=function(){
            myWindow = window.open("about:blank","","width=600,height=700");
            myWindow.document.write("This is 'mywindow'");

        }
        function closeWin(){
            myWindow.close();
        }
    </script>
</head>
<body>
    <input type="button"  value="Close 'myWindow'"  onclick="closeWin()">
</body>
</html>

在这里插入图片描述

JavaScript 弹窗方法

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

警告框:window.alert(“sometext”);

确认框:window.confirm(“sometext”);

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

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

确认框：

    <title>Document</title>
    <script>
           window.onload=function(){
                var  anniuobj =    document.getElementById("anniu");
                anniuobj.onclick=function(){
                    //window.alert(" 警告框！")
                   var val= window.confirm("确定要删除嘛！");
                   //window.alert(val);
                   if(val){
                    var  divobj =    document.getElementById("div1");
                    var  scobj =    document.getElementById("sc");
                    divobj.removeChild(scobj );
                   }
                }
           }
    </script>
    <style>
        #div1 {
            width: 500px;
            height: 600px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="div1">
        <h1 id="sc">测试确认框</h1>
    </div>
    <input type="button" value="删除h1" id="anniu">
</body>
</html>

提示框:window.prompt(“sometext”,“defaultvalue”);
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
参数1—提示信息
参数2—提示框的默认值

    <title>Document</title>
    <script>
           window.onload=function(){
                var  anniuObj =    document.getElementById("anniu");
                anniuObj.onclick=function(){
                    //window.alert(" 警告框！")
                   var val= window.confirm("确定要删除嘛！");
                   //window.alert(val);
                   if(val){
                    var  divObj =    document.getElementById("div1");
                    var  scObj =    document.getElementById("sc");
                    divobj.removeChild(scobj );
                   }
                }
                var  anniuObj2 =   document.getElementById("anniu2");
                anniuObj2.onclick=function(){
                var  val=  window.prompt("提示：请输入姓名","");
                //alert(val);
                if( val.length>0){
                    alert(val);
                }else{
                    alert("不能为空！");
                }
                }
           }
    </script>
    <style>
        #div1 {
            width: 500px;
            height: 600px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="div1">
        <h1 id="sc">测试确认框</h1>
    </div>
    <input type="button" value="删除h1" id="anniu"><br>
    <input type="button"  value="提示框" id="anniu2">
</body>
</html>

子对象

1.Window Screen–屏幕

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

1.总宽度和总高度 — screen.width / screen.height
2.可用宽度和可用高度----screen.availWidth / screen.availHeight
3.色彩深度----screen.colorDepth
4.色彩分辨率----screen.pixelDepth

    <title>Document</title>
    <script>
        //1.总宽度和总高度  --- screen.width   /  screen.height
        window.document.write(" <h1>总宽度和总高度"+window.screen.width+
        "*"+window.screen.height+"</h1>")
        //2.可用宽度和可用高度----screen.availWidth  / screen.availHeight
        window.document.write(" <h1>可用宽度和可用高度"+window.screen.availWidth+
        "*"+window.screen.availHeight+"</h1>")
        //3.色彩深度----screen.colorDepth
        window.document.write(" <h1>色彩深度"+window.screen.colorDepth+"</h1>")
        //4.色彩分辨率----screen.pixelDepth
        window.document.write(" <h1>色彩分辨率"+window.screen.pixelDepth+"</h1>")
    </script>
</head>
<body>
    <h1></h1>
</body>
</html>

在这里插入图片描述

2.Window Location—页面的地址 (URL)

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

location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

    <title>Document</title>
    <style>
         body {
            background-image: url(img/01ca01be6e0e4c218a92f454db76cfcb.jpeg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;

            color: red;
            font-size: 30px;
            font-family: kaiti;
        }
    </style>
     <script>
        document.write("<h1>href:"+window.location.href+"</h1>");//location.href 属性返回当前页面的 URL。
        document.write("<h1>pathname:"+window.location.pathname+"</h1>");//location.pathname 属性返回 URL 的路径名。
        document.write("<h1>search:"+window.location.search+"</h1>")//location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
实例：
登录页面

    <title>Document</title>
    <style>
         table{
             
            width: 1000px;
            height: 676px;
            
        }
        
        body {
            background-image: url(img/01ca01be6e0e4c218a92f454db76cfcb.jpeg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
         
        }
    </style>
<script>
        window.onload=function(){
            var but1=document.getElementById("but1");
            var username=document.getElementById("text1");
            var password=document.getElementById("pass1");
            var span=document.getElementById("span");
            but1.onclick=function(){
            
            var usernamevalue=username.value;
            var passwordvalue=password.value;
            if(usernamevalue=="mabaoguo" &&  passwordvalue=="123456"){

                //跳转到登录成功的页面，传递用户名
                window.location.href="成功页面.html? usernamevalue" +usernamevalue ;
            }else{
               
                span.innerHTML="<font color='red'>年轻人错了！</font>";
            }
            }
            //为用户名添加聚焦事件
            username.onfocus=function(){
                span.innerHTML="";
                username.value="";
                password.value="";
            }
           
        }
</script>
</head>

<body>
    <table border="1"  cellspacing="0" align="center">
        <tr align="center">
            <td colspan="2">
                <h1>马老师弟子登录</h1>
                <span id="span"></span>
            </td>
        </tr>
        <tr align="center">
            <td>用户名：</td>
            
            <td >
                <input id="text1" type="text" name="username" >
            </td>
        </tr>
        <tr align="center">
            <td >
               密码：
            </td>
            <td>
                <input id="pass1" type="password" name="password">
            </td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <input  id="but1" type="button" value="登录按钮">
            </td>
        </tr>
    </table>
</body>

</html>

在这里插入图片描述

成功页面

    <title>Document</title>
    <style>
         body {
            background-image: url(img/f095cbf2fc3c396b);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
         
        }
    </style>
    <script>
        window.onload=function(){
            var searchvalue=window.location.search;
            if(searchvalue.length<=0){
                window.location.href="用户登录.html";
            }else{
                //searchvalue===?username=mabaoguo
                //var strarray=searchvalue.split("=");
                //var username=strarray[1];
                var username=searchvalue.split("=")[1];
                var h1obj=document.getElementById("h1");
                h1obj.innerHTML="欢迎年轻人，"+ username +"登录成功!";
            }
        }
    </script>
</head>
<body>
    <center>
        <h1 id="h1">年轻人，耗子尾汁！</h1>
    </center>
</body>
</html>

在这里插入图片描述

小姐夫。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScriptAPI编程_Screen对象(获取屏幕信息)
JiuMeilove的博客
06-21 2万+
JavaScript screen 对象中包含了有关计算机屏幕的信息，例如分辨率、宽度、高度等，我们可以通过 window 对象的 screen 属性来获取它。由于 window 对象是一个全局对象，因此在使用window.screen时可以省略 window 前缀，例如window.screen.width可以简写为screen.width。下表中列举了 JavaScript screen 对象中常用的属性及其描述：示例如下 获取屏幕的宽度和高度 可以使用 screen 对象的 width 和 heig
javascript基础从小白到高手系列一百零三：screen.colorDepth 和screen.pixelDepth
最新发布
wanmeijuhao的博客
03-23 344
screen.orientation 属性返回一个ScreenOrientation 对象，其中包含Screen Orientation API。screen.colorDepth 和screen.pixelDepth 返回一样的值，即显示器每像素颜色的位深。根据规范，这些值的初始化取决于浏览器和设备状态。这里面最有意思的属性是angle 和type，前者返回相对于默认状态下屏幕的角度，navigator 对象暴露出一些API，可以提供浏览器和操作系统的状态信息。颜色的位数，不包含alpha 通道。
JavaScript Window Screen
松柏手记
04-07 363
window.screen 对象包含有关用户屏幕的信息。
JS（十四）BOM
jjjh968的博客
09-09 263
一、什么是BOM？ BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。 BOM 的核心是 window 对象，表示浏览器的实例。 二、BOM对象 window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性； document 对象，文档对象； location 对象
JS基本语法-JavaScript中的常用对象7-screen对象，获取计算机的显示特性，包括宽度，高度等
记录和分享程序人生的点点滴滴
01-29 2428
screen对象描述了用户计算机中的各种显示相关的特性，例如，屏幕像素高度，宽度，颜色深度，可用屏幕区域大小等。
2020-07-07
北漂猿
07-07 760
2020-06-08
qq_44880289的博客
06-08 3165
stm32属性上找不到编写好的hex 因为还没有编译！
微软实用工具套件(2020-11-25)Sysinternals Suite
12-25
Sysinternals网站由Mark Russinovich于1996年创建，用于托管他的高级系统实用程序和技术信息。无论您是IT Pro还是开发人员，都可以找到Sysinternals实用程序来帮助您管理，诊断和诊断Windows系统和应用程序。...
设计模式-2020-11-25-巫政霖1
08-04
设计模式概述 设计模式是一种面向对象的设计方法，旨在提高软件系统的可维护性、可复用性、可扩展性和灵活性。随着业务变得越来越复杂，让面向对象保持结构良好的秘诀就是设计模式。 设计模式六原则： ...
[超长消息]2020-11-25T1
08-04
MySQL事务死锁检测和解决 在 MySQL 数据库中，事务是指一系列的操作，保证数据库的原子性、一致性、隔离性和持久性。然而，在高并发情况下，事务之间的竞争可能会导致事务死锁，影响数据库的性能和稳定性。...
商业思维总结【2020-11-25】.docx
04-03
在商业世界中，思维模式是决定企业成功与否的关键因素之一。这些链接提供的案例展示了各种创新的商业模式和策略，旨在帮助商家提升利润，甚至在看似困难的环境下也能取得显著的商业成就。 1. 一年赚500万的模式：这...
Screenrecorder-2020-07-14-11-13-20-521.mp4
07-14
安卓开发，仿淘宝首页分类效果实现，带进度条seekbar，可以左右滚动，进度条实现跟随手势滑动的效果
UL 1562-2020-08-11.pdf
08-02
第四版的UL 1562标准于2013年1月25日发布，2020年8月11日进行了修订，以更新绝缘系统的相关要求，特别是第8.1节、8.1.1条和表8.1。所有变动或受UL电子出版系统影响的文本在页边空白处有垂直线标记。这些修订的内容...
dlmServer2020-10-25.zip
10-25
Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "服务核心", "公共组件\服务核心\ServiceCore.vcxproj", "{B1320037-89DD-4F99-A628-69DC200DFA05}" EndProject Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC...
河北省张家口市2020-2021学年高二下学期期末考试 数学 .doc
08-20
总人数2400，高一抽取25人，总样本100人，可得高一学生抽取比例为25/100=25%，那么高一学生人数为2400 * 25% = 600人。答案是D。 5. **充分条件与必要条件**：第六题考察条件的充分性和必要性。条件“a>3”对于条件...
Js中关于Window Screen显示器尺寸在不同浏览器的获取值
qq_43156197的博客
03-27 595
// 显示器尺寸 Screen var width = screen.width;//屏幕总宽度 var height = screen.height;//屏幕总高度 var awidth = screen.availWidth;//屏幕宽度（不包括windows底部任务栏） var aheight = screen.availHeight;//屏幕高度（不包括windows底部任务栏） var cdepth = screen.colorDepth;//色彩深度 var cpixeldepth.
colorDepth和pixelDepth的区别
道亦无名
12-04 6227
pixelDepth和colorDepth的不同之处是在Unix机器上，旧的X-客户端可以运行应用程序定义属于自己的颜色组。在这种情况下，colorDepth匹配应用程序的颜色深度，pixelDepth匹配显示器的颜色深度。其他所有情况下，pixelDepth和colorDepth是互通有无的。
screen.colorDepth(色彩深度) 和 screen.pixelDepth(像素深度)
soindy
02-17 9238
ColorDepth(色彩深度)ColorDepth(色彩深度)是计算机图形学领域表示在位图或者视频缓冲区中存储1像素的颜色所用的位数,也称为 位/像素(bpp).色彩深度越高,可用的颜色就越多. 色彩深度用”n位颜色”(n-bit color)来说明.若色彩深度是n位,即有2n种颜色选择，而储存每像素所用的位数就是n. 1位：2种颜色，单色光，黑白二色，用于compact Macintoshes
C913776_48PIN千兆_2020-11-031.PDF
08-04
标题提及的"C913776_48PIN千兆_2020-11-031.PDF"文件很可能是一个关于电子变压器，特别是网络变压器的技术规格说明书。描述中的"2.5 Isolation HI-POT: 1500VAC 1mA 2Second1.6 Remark:Contact PPT For Further Req...
"面向对象设计模式及其六大原则-2020-11-25-巫政霖1
设计模式是指在软件设计过程中，针对特定问题的解决方案和方法。在面向对象编程中，设计模式是必不可少的一部分，它具有可维护、可复用、可拓展、灵活性好等特点。随着业务变得越来越复杂，设计模式成为保持面向对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值