zoukankan      html  css  js  c++  java
  • 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
                (
                    "浏览器信息:
    "+
                    "名称:"+navigator.appName+"
    "+
                    "平台和版本:"+navigator.appVersion+"
    "+
                    "操作系统:"+navigator.platform+"
    "+
                    "userAgent"+navigator.userAgent
                );
                }
                document.getElementById("demo2").onclick=
                function()
                {
                alert
                (
                    "屏幕信息:
    "+
                    "分辨率:"+screen.width+"*"+screen.height+"
    "+
                    "可用区域"+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不变
                }

     

  • 相关阅读:
    ES6知识点整理之----解构赋值----对象
    ES6知识点整理之----解构赋值----数组
    ES6知识点整理之----声明变量总结与global
    ES6知识点整理之----const
    ES6知识点整理之----块级作用域
    ES6知识点整理之----let
    ES6知识点整理之----历史及简介
    推荐大家使用的CSS书写规范、顺序
    meta标签补充属性(viewport)
    meta标签属性总结
  • 原文地址:https://www.cnblogs.com/daitu/p/12772685.html
Copyright © 2011-2022 走看看