首页
所有分类
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 相关文章推荐
瀑布流布局代码一例
Apr 11 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
most_common(1) 字典(3) Counter(1) pip(1) set(1) 并发(8) frozenset(1) SingleFlight(2) 爬虫(2) Xpath(1)
You might like
php 文章采集正则代码
2009/12/28 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
8个必备的PHP功能开发
2015/10/02 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
js 操作符汇总
2014/11/08 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
JavaScript获取tr td 的三种方式全面总结（推荐）
2017/08/15 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
jquery实现商品sku多属性选择功能（商品详情页）
2019/12/20 jQuery
原生js实现购物车功能
2020/09/23 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
python的描述符(descriptor)、装饰器（property）造成的一个无限递归问题分享
2014/07/09 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Desigual美国官方网站：西班牙服装品牌
2019/03/29 全球购物
什么是静态路由？什么是动态路由？各自的特点是什么？
2015/09/16 面试题
编写一个类体现构造，公有，私有方法，静态，私有变量
2013/08/10 面试题
关于毕业的广播稿
2014/01/10 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
假面舞会策划方案
2014/05/29 职场文书
社会工作专业求职信
2014/07/15 职场文书
考研复习计划
2015/01/19 职场文书
互联网创业商业模式以及赚钱法则有哪些？
2019/10/12 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
CentOS MySql8 远程连接实战
2022/04/19 MySQL