JS window物件簡單操作完整示例
阿新 • • 發佈:2020-01-15
本文例項講述了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> <!--定義一段粗文字文字--> 歓迎する,該頁面將於<span id="time" >10</span>秒終結訪問<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程式設計有所幫助。