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" value="测试window显示框" /> <input type="button" value="测试window确认框" /> <input type="button" value="测试window提示框" /> <hr /> <input type="button" value="测试window设置时间框" /> <input type="button" value="测试window设置间隔时间执行" /> <input type="button" value="测试window设置中断时间定时运行" /> <input type="button" value="测试window设置中断间隔时间定时运行" /> <hr /> <input type="button" value="测试windowopen"/> </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> <h3>添加一个限时阅览</h3> <!--定义一段粗文本文字--> <b>歓迎する,该页面将于<span >10</span>秒终结访问</b><br /> <br /> <!--测试用父类函数在父类操作--> <input type="button" value="测试父类函数操作" /> <h1>动漫回顾 </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 cellspacing="0px" cellpadding="9px"> <tr> <th>人物名称</th> <th>与路飞的关系</th> <th>实力</th> <th>果实能力</th> <th>备注</th> </tr> <tr> <td>路飞</td> <td>本人</td> <td>标准原点</td> <td>橡胶果实</td> <td>主角光环加持,无限可能,极度抗打</td> </tr> <tr> <td>索隆</td> <td>伙伴</td> <td>和路飞实力相近</td> <td>无</td> <td>路飞海贼团第二战力,实力和路飞差不多,但光环加成远不及路飞</td> </tr> <tr> <td>BigMom</td> <td colspan="2" rowspan="2">敌人&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp高于路飞</td> <!--<td>高于路飞</td>--> <td>魂魂果实</td> <td rowspan="2">海上四皇之一,有强大的战力</td> </tr> <tr> <td>凯多</td> <!--<td colspan="2">敌人 高于路飞</td>--> <!--<td>高于路飞</td>--> <td>无</td> <!--<td>海上四皇之一,有强大的战力</td>--> </tr> <tr> <td>香克斯</td> <td>伙伴</td> <td>高于路飞</td> <td>面子果实</td> <td>实力深不可测,是海上四皇之一,船员不多但各个都很强</td> </tr> <!--<hr size="30px" color="aqua"/>--> <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=""></iframe> <iframe src=""></iframe> <hr /> <!--调用本地资源--> <a></a><br /> <!--锚的设置--> <img src="https://www.jb51.net/img/1.jpg" title="冈崎朋也" alt="error" /><br /> <a></a><br /> <img src="https://www.jb51.net/article/2.jpg" title="古河渚" alt="error" /><br /> <a></a><br /> <img src="https://www.jb51.net/img/3.jpg" title="春原阳平" alt="error" /><br /> <a></a><br /> <img src="https://www.jb51.net/article/4.jpg" 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" alt="error" /> <hr /> <!--访问本地资源--> <a href="https://www.jb51.net/FrameSet.html" >本页刷新</a><br /> <a href="https://www.jb51.net/FrameSet.html" target="_blank">点这跳转</a><br /> <a href="https://www.jb51.net/FrameSet.html" > <img src="https://www.jb51.net/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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/26536923e4fde4e90358aa31d3dd96b3.html