JS window对象简单操作完整示例
本文实例讲述了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>歓迎する,该页面将于<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.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JS window对象的top、parent、opener含义介绍
1.top该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. 2.openeropener用于在window.open的页面引用执行该window.open方法的的页面的对象.例如:A页面通过window.open()方法弹出了B页面,在B页面中就可以通过opener来引用A页面,这样就可以通过这个对象来对A页面进行操作. 3.parentparent用于在iframe,frame中生成的子页面中访问父页面的对象.例如:A页面中有一个ifra
-
JavaScript中Window对象的属性及事件
Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象. 注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象. windows对象属性 属性 描述 closed 返回窗口是否已被关闭. defaultStatus 设置或返回窗口状态栏中的默认文本. document 对 Document 对象的只读引用.请
-
javascript类型系统 Window对象学习笔记
window对象是Web浏览器中javascript的一个终极兜底儿对象,在作用域中处于最末端,是一个包含所有对象的对象.所有在全局作用域中定义的属性和函数都是window对象的属性 var myStringVar = 'myString'; var myFunctionVar = function(){}; console.log('myStringVar' in window);//true console.log('myFunctionVar' in window);//true 1.引用
-
javascript入门之window对象【新手必看】
window :window对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数. 1.全局的window对象 JavaScript中的任何一个全局函数或变量都是window的属性. <script type="text/javascript"> var name="撼地神牛"; document.write(window.name); </script> 2.window与self对象 self对象与win
-
javascript window对象属性整理
window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture
-
JavaScript的document对象和window对象详解
[document对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档. 属性 alinkColor 活动链接的颜色(ALINK) anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象) anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象) bgColor 文档的背景颜色(BGCOLOR) cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个
-
Javascript window对象详解
首先看我们的源代码. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>深入理解Javascript</title> <script type="text/javascript" charset="utf-8"
-
JavaScript浏览器对象之一Window对象详解
JavaScript提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制.JavaScript中定义了6种重要的对象: window对象 表示浏览器中打开的窗口: document对象 表示浏览器中加载页面的文档对象: location对象包含了浏览器当前的URL信息: navigation对象 包含了浏览器本身的信息: screen对象 包含了客户端屏幕及渲染能力的信息: history对象 包含了浏览器访问网页的历史信息. 除了window对象之外,其他的5个对象都是windo
-
Javascript之BOM(window对象)详解
ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心. BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.也就是说,在网页中定义的任何一个变量.对象和函数以window作为其Global对象. 1.全局作用域 既然window对象扮演着Global对象,那么所有在全局作用域中声明的对象.变
-
JS 使用 window对象的print方法实现分页打印功能
最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题. 1.但是网上好多案例都不支持分页功能,最后通过CSS的page-break-after:always样式解决分页问题,以下代码纯个人编写,有需要的朋友可以直接复制到网页中使用,转载请注明出处,谢谢! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo
-
js window对象属性和方法相关资料整理
window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture