JavaScript：Window对象概述

一：Window对象常用属性和方法

（1）简单对话框：alert()、confirm()和prompt();

<html>
    <head>
        <title>简单对话框</title>
    </head>
    <body>
            <script>
                var yourname = prompt("您的名字是：");
                //console.log(yourname);
                if(confirm("您确定吗？")==true)
                {
                    alert(yourname+"先生，你好");
                } 
            </script>
    </body>
</html>

运行结果：

（2）状态栏：status属性和defaultStatus属性；（一般不支持用，这里就不说了）

（3）定时设定和时间间隔：setTimeout()、clearTimeout()、setlterval()、clertlnterval();

<html>
    <head>
        <title>定时设定和时间间隔</title>
    </head>
    <body>
        <script type="text/javascript">
            function display()
            {
                var content = document.getElementById("text");
                content.value= new Date().toLocaleString();
            }
            window.onload=function()
            {
                var timer;
                document.getElementById("start").onclick=function()
                {
                    timer = setInterval('display()',1000);
                }
                document.getElementById("stop").onclick=function()
                {
                    clearInterval(timer);
                }
            }
            
        </script>
        <input type="text" value="" id="text" size=30/>
        <input type="button" value="开始" id="start" />
        <input type="button" value="结束" id="stop" />
     </body>
</html>

运行结果如下：

（4）navigator:用于获取浏览器和操作系统的信息；

（5）Screen对象：有关用户显示器的大小和可用的颜色数量信息；

<html>
    <head>
        <title>navigator对象和Screen对象</title>
    </head>
    <body>
        <input type="button" id="demo1" value="显示浏览器信息"/>
        <input type="button" id="demo2" value="显示屏幕信息"/>
        <script type="text/javascript">
            document.getElementById("demo1").onclick=
            function()
            {
            alert
            (
                "浏览器信息：\n"+
                "名称："+navigator.appName+"\n"+
                "平台和版本："+navigator.appVersion+"\n"+
                "操作系统："+navigator.platform+"\n"+
                "userAgent"+navigator.userAgent
            );
            }
            document.getElementById("demo2").onclick=
            function()
            {
            alert
            (
                "屏幕信息：\n"+
                "分辨率："+screen.width+"*"+screen.height+"\n"+
                "可用区域"+screen.availWidth+"*"+screen.availHeight
            );
            }
        </script>
    </body>
</html>

运行结果如下：

（6）location对象：窗口中当前显示的文档的URL；

document.write
            ("href:"+location.href+"<br>");//这里获得这个文件的地址

document.write
            ("href:"+location.href+"<br>");//这里获得这个文件的地址
            location.href="http://www.baidu.com";//并且可以实现跳转

（7）History对象：保存着用户上网的历史记录（向前向后转网页）；

histroy.back();
            histroy.forward();

二：窗口相关操作

（1）窗口位置获取：

<html>
    <head>
        <title>窗口位置获取</title>
    </head>
    <body>
        <div id="mydiv"></div>
        <script type="text/javascript">
            var timer = setInterval(function(){
                mydiv.innerHTML='left:'+window.screenLeft+';top'+window.screenTop;
            })//同样的也可以设成X,Y。
            mydiv.onclick=function()
            {
                clearInterval(timer);
            }
        </script>
    </body>
</html>

（2）窗口位置移动：moveTo()和moveBy();

<html>
    <head>
        <title>窗口位置获取</title>
    </head>
    <body>
        <div id="mydiv">单击此处</div>
        <script type="text/javascript">
            
            mydiv.onclick=function()//用ie浏览器可以看出来
            {
                window.moveTo(0,100);//两者差不多，moveTo是移动到某个点
                //window.moveBy(0,100);这个总体向下移动
            }
            
        </script>
    </body>
</html>

（3）窗口大小获取：outerWidth和outerHeight、innerWidth和innerHeight；

（4）窗口大小调整：resizeTo();和resizeBy()每次放缩增加多少;

mydiv.onclick=function()//用ie浏览器可以看出来
            {
                window.resizeTo(300,600);//窗口大小
                window.resizeBy(200,0);//每次X增加200，Y不变
            }

posted on 2020-04-25 13:15 带土哈阅读(217) 评论(0) 编辑收藏举报