编程 Javascript

JS window对象简单操作完整示例

Posted in Javascript onJanuary 14, 2020

本文实例讲述了JS window对象简单操作。分享给大家供大家参考，具体如下：

例1：

<html>
    <head>
        <title>js---window函数</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
//            显示框:没有返回值,出现一个提示框
      var sto;
      var stl;
            function testAlert(){
                var a=window.alert("显示框测试");
                alert(a);
            }
//            确认框:有返回值,显示一个选择框,当选择确认返回true,当选择取消会返回false
            function testConfirm(){
                var flag=window.confirm("显示确认框");
                alert(flag);
            }
//            提示框:有返回值,显示一个提示框,用来输入,当输入数据点击确定时,会返回输入的值,没输入也显示,不过没有值,当当点击取消会返回null
            function testPrompt(){
                var b=window.prompt();
                alert(b);
            }
//            设置点击后的等待时间:在函数中的对象在指定时间后才会执行,有返回值,返回一个数字,指的是当前定时器id
            function testSetTimeout(){
                sto=window.setTimeout(function(){
                    alert("测试等待后执行，等待三秒");
                },3000);
//                alert(sto);
            }
//            设置间隔时间执行:在函数中的对象每间隔一定的时间就会执行一次,有返回值,也是一个数字,指的是当前定时器id
            function testSetInterval(){
                stl=window.setInterval(function(){
                    alert("测试间隔执行，每隔2秒执行一次");
                },2000);
//                alert(c);
            }
//            和settimeout配套使用,来进行终止操作
            function testClearTimeout(){
                window.clearTimeout(sto);
                alert("直接阻断定时触发事件");
//                alert(cl);
            }
//            和setinterval配套使用,来终结间隔执行事件
            function testClearInterval(){
                window.clearInterval(stl);
                alert("直接阻断间隔触发事件");
//                alert(cl);
            }
//            几个属性的设置不是很准
            function testOpen(){
                window.open('Animation.html','newwindow','heigth=300px,width=300px,top=100px,left=200px,toolbar=yes,menubar=yes,scrollers=yes,resizable=no,location=yes,status=yes');
            }
//            利用子页面调用父页面的函数，注意在子页面中创建一个函数。其内部添加opener调用父类函数。
            function testOpener(){
                alert("clannad,赛高");
            }
        </script>
        <style type="text/css">
            hr{
                height: 10px;
                background-color: bisque;
                border-radius: 10px;
            }
        </style>
    </head>
    <body>
        <h3>js---window函数</h3>
        <hr />
        <input type="button" name="" id="" value="测试window显示框" onclick="testAlert();" />
        <input type="button" name="" id="" value="测试window确认框" onclick="testConfirm();" />
        <input type="button" name="" id="" value="测试window提示框" onclick="testPrompt();" />
        <hr />
        <input type="button" name="" id="" value="测试window设置时间框" onclick="testSetTimeout();" />
        <input type="button" name="" id="" value="测试window设置间隔时间执行" onclick="testSetInterval();" />
        <input type="button" name="" id="" value="测试window设置中断时间定时运行" onclick="testClearTimeout()" />
        <input type="button" name="" id="" value="测试window设置中断间隔时间定时运行" onclick="testClearInterval()" />
        <hr />
        <input type="button" name="" id="" value="测试windowopen" onclick="testOpen()"/>
    </body>
</html>

例2：

<html>
    <head>
        <title>动漫</title>
        <meta charset="utf-8"/>
        <script type="text/javascript">
            function timeDown(){
                window.setInterval(function(){
                    var spantime=document.getElementById("time");
//                    得到spantime时的数据时string类型但是由于是减法所以可以直接自动转换为number
                    spantime.innerHTML=spantime.innerHTML-1;  //得到变量的改变值
//                    关闭页面操作
                    if(spantime.innerHTML==0){
                        window.close();
                    }
                },1000)
            }
            function testFather(){
                window.opener.testOpener();
            }
        </script>
        <style type="text/css">
            #time{
                font-size: 30px;
                color: red;
            }
        </style>
    </head>
    <!--利用onload进行页面的加载-->
    <body onload="timeDown()">
        <h3>添加一个限时阅览</h3>
        <!--定义一段粗文本文字-->
        <b>?Z迎する,该页面将于<span id="time" >10</span>秒终结访问</b><br />
        <br />
        <!--测试用父类函数在父类操作-->
        <input type="button" name="" id="" value="测试父类函数操作" onclick="testFather()" />
        <h1 align="center">动漫回顾 </h1>
        <h3>几部动漫</h3>
        <hr />
        <ul>
            <li>《clannad》</li>
            <li>《星游记》</li>
            <li>《海贼王》</li>
            <li>《境界的彼方》</li>
        </ul>
        <ol type="I">
            <li>《clanad》</li>
            <li>《星游记》</li>
            <li>《海贼王》</li>
            <li>《境界的彼方》</li>
        </ol>
        <dl>
            <dt>clannad人物介绍</dt>
            <dd>冈崎朋也</dd>
            <a href="#冈崎朋也图片" rel="external nofollow" >冈崎朋也图片</a><br />
            <dd>古河渚</dd>
            <a href="#古河渚图片" rel="external nofollow" >古河渚图片</a><br />
            <dd>春原阳平</dd>
            <a href="#春原阳平图片" rel="external nofollow" >春原阳平图片</a><br />
            <dd>伊吹风子</dd>
            <a href="#伊吹风子图片" rel="external nofollow" >伊吹风子图片</a><br />
        </dl>
        <dl>
            <dt>星游记人物介绍</dt>
            <dd>麦当</dd>
            <dd>迪亚</dd>
            <dd>咕咚</dd>
        </dl>
        <dl>
            <dt>海贼王/dt>
            <dd>路飞</dd>
            <dd>路飞的船员</dd>
            <dd>路飞的敌人</dd>
        </dl>
        <dl>
            <dt>境界的彼方</dt>
            <dd>栗山未来</dd>
            <dd>神原秋人</dd>
            <dd>名濑月美</dd>
            <dd>名濑博晨</dd>
        </dl>
        <!--<hr />-->
        <table border="1px" cellspacing="0px" cellpadding="9px">
            <tr height="27px">
                <th width="100">人物名称</th>
                <th width="100">与路飞的关系</th>
                <th width="100">实力</th>
                <th width="100">果实能力</th>
                <th width="200">备注</th>
            </tr>
            <tr height="27px">
                <td width="100">路飞</td>
                <td width="100">本人</td>
                <td width="100">标准原点</td>
                <td width="100">橡胶果实</td>
                <td width="300">主角光环加持，无限可能，极度抗打</td>
            </tr>
            <tr height="27px">
                <td width="100">索隆</td>
                <td width="100">伙伴</td>
                <td width="100">和路飞实力相近</td>
                <td width="100">无</td>
                <td width="300">路飞海贼团第二战力，实力和路飞差不多，但光环加成远不及路飞</td>
            </tr>
            <tr height="27px">
                <td width="100">BigMom</td>
                <td width="100" colspan="2" rowspan="2">敌人                  高于路飞</td>
                <!--<td width="100">高于路飞</td>-->
                <td width="100">魂魂果实</td>
                <td width="300" rowspan="2">海上四皇之一，有强大的战力</td>
            </tr>
            <tr height="27px">
                <td width="100">凯多</td>
                <!--<td width="100" colspan="2">敌人 高于路飞</td>-->
                <!--<td width="100">高于路飞</td>-->
                <td width="100">无</td>
                <!--<td width="300">海上四皇之一，有强大的战力</td>-->
            </tr>
            <tr height="27px">
                <td width="100">香克斯</td>
                <td width="100">伙伴</td>
                <td width="100">高于路飞</td>
                <td width="100">面子果实</td>
                <td width="300">实力深不可测，是海上四皇之一，船员不多但各个都很强</td>
            </tr>
        <!--<hr size="30px" width="40%" color="aqua" align="center"/>-->
        <hr size="10" color="aqua"/>
        </table>
            <a href="https://baike.baidu.com/item/%E8%88%AA%E6%B5%B7%E7%8E%8B/75861?fromtitle=%E6%B5%B7%E8%B4%BC%E7%8E%8B&fromid=8904&fr=aladdin" rel="external nofollow" target="_hzw">海贼王百度百科</a><br />
            <a href="http://www.iqiyi.com/a_19rrhb3xvl.html?vfm=2008_aldbd" rel="external nofollow" target="_zy">海贼王爱奇艺资源</a><br />
            <iframe src="" width="400px" height="400px" name="_hzw"></iframe>
            <iframe src="" width="400px" height="400px" name="_zy"></iframe>
        <hr />
        <!--调用本地资源-->
        <a name="冈崎朋也图片"></a><br /> <!--锚的设置-->
        <img src="img/1.jpg" width="300px" title="冈崎朋也" alt="error" /><br />
        <a name="古河渚图片"></a><br />
        <img src="2.jpg" width="300px" title="古河渚" alt="error" /><br />
        <a name="春原阳平图片"></a><br />
        <img src="img/3.jpg" width="300px" title="春原阳平" alt="error" /><br />
        <a name="伊吹风子图片"></a><br />
        <img src="4.jpg" width="300px" title="伊吹风子" alt="error" /><br />
        <hr />
        <!--调用网络资源-->
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570984004050&di=b851f31e47f01fa2cf5067d9841b9a12&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi2%2F2877272061%2FTB2SvXWeohnpuFjSZFpXXcpuXXa_%2521%25212877272061.jpg" width="300px" alt="error" />
        <hr />
        <!--访问本地资源-->
        <a href="FrameSet.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" >本页刷新</a><br />
        <a href="FrameSet.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">点这跳转</a><br />
        <a href="FrameSet.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="clannad.jpg" alt="" /></a><br />
        <hr />
        <!--访问网络资源-->
        <a href="https://baike.baidu.com/item/CLANNAD/25452?fr=aladdin" rel="external nofollow" target="_blank">clannad百度百科</a><br />
        <a href="https://baike.baidu.com/item/%E5%9B%A2%E5%AD%90%E5%A4%A7%E5%AE%B6%E6%97%8F/2188040" rel="external nofollow" target="_blank">团子大家族百度百科</a><br />
    <a href="#" rel="external nofollow" >返回顶部</a>
    </body>
</html>

在开发过程中，js主要是通过函数进行操作的在，所以各个js的开发商封装了类，其中window类的学习在此。window类型的使用方法和math的使用相同，不用创建对象，直接用实体进行调用。

基本内容有：

显示框的显示；几种时间定时和时间间隔执行；函数方法调用其他子窗口，子窗口与父函数的交互。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JS window对象简单操作完整示例

- Author -

qq_42412646

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 清除输入框中的数据

Apr 13 Javascript

使用自定义setTimeout和setInterval使之可以传递参数和对象参数

Apr 24 Javascript

jQuery EasyUI API 中文文档 - Calendar日历使用

Oct 19 Javascript

Jquery异步请求数据实例代码

Dec 28 Javascript

JS.findElementById()使用介绍

Sep 21 Javascript

js利用prototype调用Array的slice方法示例

Jun 09 Javascript

js控制输入框获得和失去焦点时状态显示的方法

Jan 30 Javascript

javascript实现二级级联菜单的简单制作

Nov 19 Javascript

微信小程序商品到详情的实现

Jun 27 Javascript

vue axios请求频繁时取消上一次请求的方法

Nov 10 Javascript

详解ES6 Fetch API HTTP请求实用指南

Nov 14 Javascript

JavaScript中.min.js和.js文件的区别讲解

Feb 13 Javascript

让mocha支持ES6模块的方法实现

Jan 14 #Javascript

JavaScript遍历数组的方法代码实例

Jan 14 #Javascript

JavaScript回调函数callback用法解析

Jan 14 #Javascript

JS document对象简单用法完整示例

Jan 14 #Javascript

JS document内容及样式操作完整示例

Jan 14 #Javascript

微信小程序indexOf的替换方法(推荐)

Jan 14 #Javascript

小程序中设置缓存过期的实现方法

Jan 14 #Javascript