首页
所有分类
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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
js 匿名调用实现代码
Jun 19 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
从零学习node.js之搭建http服务器（二）
Feb 21 Javascript
JS中的三个循环小结
Jun 20 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
让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
ipv6(1) 访问日志(2) 弱口令(1) 策略(1) 内存(1) PV(1) 事务(5) 缓存(3) 连接数(1) 线程(1)
You might like
PHP中MD5函数使用实例代码
2008/06/07 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
一个不错的应用,用于提交获取文章内容，不推荐用
2007/03/03 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
求最大连续递增数字串（如＂ads3sl456789DF3456ld345AA＂中的＂456789＂）
2015/09/11 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
六年级数学教学反思
2014/02/03 职场文书
小学毕业感言50字
2014/02/16 职场文书
读书活动总结
2014/04/28 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
2014年工会工作总结
2014/11/12 职场文书
2014年采购员工作总结
2014/11/18 职场文书
文案策划岗位职责
2015/02/11 职场文书
初中生物教学随笔
2015/08/15 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server