JavaScript 1.6 windows对象

最新推荐文章于 2024-03-07 06:30:00 发布

原创最新推荐文章于 2024-03-07 06:30:00 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#window对象 #js的window对象

JavaScript Note 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript操作浏览器窗口，包括打开、关闭、调整大小和位置，以及使用定时器实现窗口自动关闭。同时，展示了如何通过按钮触发这些功能，并在页面上实时更新计时。

一、示例

<body>
<button onclick="cli()">示例1</button>
<br>
<button onclick="ope()">示例2</button>
<br>
<button onclick="exm()">示例3</button>
<br>
<button id="butt" onclick="start()" value="0" type="button">开始</button>
<input type="text" id="tex" value="00">
<script>
    var a;
    function cli() {
        a = window.open("http://news.baidu.com/","mywindow","width=600, height=600");//打开一个窗口，窗口大小600*600
        a.resizeBy(200,-200);//调整窗口宽高，正数+，负数-；resizeTo()：把窗口调整为指定像素宽高
        var x = (window.outerWidth - a.outerWidth)/2;//定位居中的x坐标
        var y = (window.outerHeight - a.outerHeight)/2;//定位居中的y坐标
        a.moveTo(x,y);//窗口居中,moveTo针对于窗口左上角进行移动，moveBy相对于窗口现在的位置进行移动，使用moveBy使窗口a居中的话，x上的坐标应该是(window.outerWidth/2 - a.outerWidth/2)
        window.setTimeout(clo,2000);//设置窗口2秒后执行的方法；setInterval()按照指定的时间，进行周期性调用函数
    }
    function clo() {
        window.close();
        a.close();
    }
    function ope() {
        var d = window.open('','newwindow','width = 300, height= 200');
        var b = window.open('','newwindow1','width = 300, height= 200');
        var x = window.outerWidth/2 - d.outerWidth/2;//定位居中的x坐标
        var y = window.outerHeight/2 - d.outerHeight/2;//定位居中的y坐标
        d.moveBy(x,y);
        d.focus();//d窗口获得焦点
    }
    function exm() {
        var d = window.open('','newwin','width = 480,height = 240');
        document.write(d.innerHeight + "<br>");//返回窗口的文档显示区的高度
        document.write(d.innerWidth + "<br>");//返回窗口的文档显示区的宽度。
        document.write(d.outerHeight + "<br>");//返回窗口的外部高度。
        document.write(d.outerWidth + "<br>");//返回窗口的外部宽度。
        d.opener.document.write("向windows窗口写入内容");//opener返回创建窗口d的window对象的引用
 /*
channelmode=yes|no|1|0     是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0     是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0  是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels  窗口文档显示区的高度。以像素计。
left=pixels    窗口的 x 坐标。以像素计。
location=yes|no|1|0    是否显示地址字段。默认是 yes。
menubar=yes|no|1|0     是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0   窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0  是否显示滚动条。默认是 yes。
status=yes|no|1|0  是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0    是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0     是否显示浏览器的工具栏。默认是 yes。
top=pixels     窗口的 y 坐标。
width=pixels   窗口的文档显示区的宽度。以像素计。
*/
    }
</script>
<script>
    var c = 0;
    var id ;
    function start() {
        var ele = document.getElementById("butt");
        if(ele.value == "0"){
            ele.innerHTML = "暂停";
            ele.value = "1";
            countTime();
        }
        else if(ele.value == "1"){
            ele.innerHTML = "开始";
            ele.value = "0";
            clearTimeout(id);
        }
    }
    function countTime() {
        id = setTimeout(countTime,1000);
        c = c + 1;
        if(c < 10){
            document.getElementById("tex").value = "0" + c;
        }
        else
            document.getElementById("tex").value = c;
    }
</script>