首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
JavaScript更改class和id的方法
Oct 10 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
理解javascript异步编程
Jan 27 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
js实现无缝滚动图
Feb 22 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 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
横向滚动(1) 共享文件夹(1) 加载异常(1) Slave(1) NginxConfig(1) caddy(1) SVN(1) 表约束(2) 骨架屏(1) ESXI(1)
You might like
在IIS上安装PHP4.0正式版
2006/10/09 PHP
配置支持SSI
2006/11/25 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
学习使用bootstrap基本控件（table、form、button）
2016/04/12 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
[02:08]2014DOTA2国际邀请赛 430专访：力争取得小组前二
2014/07/11 DOTA
python读写json文件的简单实现
2017/04/11 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
python实现反转部分单向链表
2018/09/27 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Django model select的多种用法详解
2019/07/16 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
俄罗斯园林植物网上商店：Garshinka
2020/07/16 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
地理教师岗位职责
2014/03/16 职场文书
环境保护标语
2014/06/20 职场文书
小学国庆节活动总结
2015/03/23 职场文书
紧急通知
2015/04/17 职场文书
企业年会祝酒词
2015/08/11 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers