JS --------- window对象

<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>
<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="#冈崎朋也图片">冈崎朋也图片</a><br />
			<dd>古河渚</dd>
			<a href="#古河渚图片">古河渚图片</a><br />
			<dd>春原阳平</dd>
			<a href="#春原阳平图片">春原阳平图片</a><br />
			<dd>伊吹风子</dd>
			<a href="#伊吹风子图片">伊吹风子图片</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">敌人&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp高于路飞</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" target="_hzw">海贼王百度百科</a><br />
			<a href="http://www.iqiyi.com/a_19rrhb3xvl.html?vfm=2008_aldbd" 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">本页刷新</a><br />
		<a href="FrameSet.html" target="_blank">点这跳转</a><br />
		<a href="FrameSet.html"> <img src="clannad.jpg" alt="" /></a><br />
		<hr />
		<!--访问网络资源-->
		<a href="https://baike.baidu.com/item/CLANNAD/25452?fr=aladdin"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"target="_blank">团子大家族百度百科</a><br />
	<a href="#">返回顶部</a>
	</body>	
</html>

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

基本内容有:

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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值