JS window對(duì)象簡(jiǎn)單操作完整示例
更新時(shí)間：2020年01月14日 10:48:39 作者：qq_42412646
這篇文章主要介紹了JS window對(duì)象簡(jiǎn)單操作,結(jié)合完整實(shí)例形式分析了JavaScript Window對(duì)象各種常見(jiàn)提示框、彈出窗口及時(shí)間相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了JS window對(duì)象簡(jiǎn)單操作。分享給大家供大家參考，具體如下：
例1：
<html>
<head>
<title>js---window函數(shù)</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
// 顯示框:沒(méi)有返回值,出現(xiàn)一個(gè)提示框
var sto;
var stl;
function testAlert(){
var a=window.alert("顯示框測(cè)試");
alert(a);
}
// 確認(rèn)框:有返回值,顯示一個(gè)選擇框,當(dāng)選擇確認(rèn)返回true,當(dāng)選擇取消會(huì)返回false
function testConfirm(){
var flag=window.confirm("顯示確認(rèn)框");
alert(flag);
}
// 提示框:有返回值,顯示一個(gè)提示框,用來(lái)輸入,當(dāng)輸入數(shù)據(jù)點(diǎn)擊確定時(shí),會(huì)返回輸入的值,沒(méi)輸入也顯示,不過(guò)沒(méi)有值,當(dāng)當(dāng)點(diǎn)擊取消會(huì)返回null
function testPrompt(){
var b=window.prompt();
alert(b);
}
// 設(shè)置點(diǎn)擊后的等待時(shí)間:在函數(shù)中的對(duì)象在指定時(shí)間后才會(huì)執(zhí)行,有返回值,返回一個(gè)數(shù)字,指的是當(dāng)前定時(shí)器id
function testSetTimeout(){
sto=window.setTimeout(function(){
alert("測(cè)試等待后執(zhí)行，等待三秒");
},3000);
// alert(sto);
}
// 設(shè)置間隔時(shí)間執(zhí)行:在函數(shù)中的對(duì)象每間隔一定的時(shí)間就會(huì)執(zhí)行一次,有返回值,也是一個(gè)數(shù)字,指的是當(dāng)前定時(shí)器id
function testSetInterval(){
stl=window.setInterval(function(){
alert("測(cè)試間隔執(zhí)行，每隔2秒執(zhí)行一次");
},2000);
// alert(c);
}
// 和settimeout配套使用,來(lái)進(jìn)行終止操作
function testClearTimeout(){
window.clearTimeout(sto);
alert("直接阻斷定時(shí)觸發(fā)事件");
// alert(cl);
}
// 和setinterval配套使用,來(lái)終結(jié)間隔執(zhí)行事件
function testClearInterval(){
window.clearInterval(stl);
alert("直接阻斷間隔觸發(fā)事件");
// alert(cl);
}
// 幾個(gè)屬性的設(shè)置不是很準(zhǔn)
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');
}
// 利用子頁(yè)面調(diào)用父頁(yè)面的函數(shù)，注意在子頁(yè)面中創(chuàng)建一個(gè)函數(shù)。其內(nèi)部添加opener調(diào)用父類函數(shù)。
function testOpener(){
alert("clannad,賽高");
}
</script>
<style type="text/css">
hr{
height: 10px;
background-color: bisque;
border-radius: 10px;
}
</style>
</head>
<body>
<h3>js---window函數(shù)</h3>
<hr />
<input type="button" name="" id="" value="測(cè)試window顯示框" onclick="testAlert();" />
<input type="button" name="" id="" value="測(cè)試window確認(rèn)框" onclick="testConfirm();" />
<input type="button" name="" id="" value="測(cè)試window提示框" onclick="testPrompt();" />
<hr />
<input type="button" name="" id="" value="測(cè)試window設(shè)置時(shí)間框" onclick="testSetTimeout();" />
<input type="button" name="" id="" value="測(cè)試window設(shè)置間隔時(shí)間執(zhí)行" onclick="testSetInterval();" />
<input type="button" name="" id="" value="測(cè)試window設(shè)置中斷時(shí)間定時(shí)運(yùn)行" onclick="testClearTimeout()" />
<input type="button" name="" id="" value="測(cè)試window設(shè)置中斷間隔時(shí)間定時(shí)運(yùn)行" onclick="testClearInterval()" />
<hr />
<input type="button" name="" id="" value="測(cè)試windowopen" onclick="testOpen()"/>
</body>
</html>
例2：
<html>
<head>
<title>動(dòng)漫</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function timeDown(){
window.setInterval(function(){
var spantime=document.getElementById("time");
// 得到spantime時(shí)的數(shù)據(jù)時(shí)string類型但是由于是減法所以可以直接自動(dòng)轉(zhuǎn)換為number
spantime.innerHTML=spantime.innerHTML-1; //得到變量的改變值
// 關(guān)閉頁(yè)面操作
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進(jìn)行頁(yè)面的加載-->
<body onload="timeDown()">
<h3>添加一個(gè)限時(shí)閱覽</h3>
<!--定義一段粗文本文字-->
<b>歓迎する,該頁(yè)面將于<span id="time" >10</span>秒終結(jié)訪問(wèn)</b><br />
<br />
<!--測(cè)試用父類函數(shù)在父類操作-->
<input type="button" name="" id="" value="測(cè)試父類函數(shù)操作" onclick="testFather()" />
<h1 align="center">動(dòng)漫回顧 </h1>
<h3>幾部動(dòng)漫</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>春原陽(yáng)平</dd>
<a href="#春原陽(yáng)平圖片" rel="external nofollow" >春原陽(yáng)平圖片</a><br />
<dd>伊吹風(fēng)子</dd>
<a href="#伊吹風(fēng)子圖片" rel="external nofollow" >伊吹風(fēng)子圖片</a><br />
</dl>
<dl>
<dt>星游記人物介紹</dt>
<dd>麥當(dāng)</dd>
<dd>迪亞</dd>
<dd>咕咚</dd>
</dl>
<dl>
<dt>海賊王/dt>
<dd>路飛</dd>
<dd>路飛的船員</dd>
<dd>路飛的敵人</dd>
</dl>
<dl>
<dt>境界的彼方</dt>
<dd>栗山未來(lái)</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">與路飛的關(guān)系</th>
<th width="100">實(shí)力</th>
<th width="100">果實(shí)能力</th>
<th width="200">備注</th>
</tr>
<tr height="27px">
<td width="100">路飛</td>
<td width="100">本人</td>
<td width="100">標(biāo)準(zhǔn)原點(diǎn)</td>
<td width="100">橡膠果實(shí)</td>
<td width="300">主角光環(huán)加持，無(wú)限可能，極度抗打</td>
</tr>
<tr height="27px">
<td width="100">索隆</td>
<td width="100">伙伴</td>
<td width="100">和路飛實(shí)力相近</td>
<td width="100">無(wú)</td>
<td width="300">路飛海賊團(tuán)第二戰(zhàn)力，實(shí)力和路飛差不多，但光環(huán)加成遠(yuǎn)不及路飛</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">魂魂果實(shí)</td>
<td width="300" rowspan="2">海上四皇之一，有強(qiáng)大的戰(zhàn)力</td>
</tr>
<tr height="27px">
<td width="100">凱多</td>
<!--<td width="100" colspan="2">敵人 高于路飛</td>-->
<!--<td width="100">高于路飛</td>-->
<td width="100">無(wú)</td>
<!--<td width="300">海上四皇之一，有強(qiáng)大的戰(zhàn)力</td>-->
</tr>
<tr height="27px">
<td width="100">香克斯</td>
<td width="100">伙伴</td>
<td width="100">高于路飛</td>
<td width="100">面子果實(shí)</td>
<td width="300">實(shí)力深不可測(cè)，是海上四皇之一，船員不多但各個(gè)都很強(qiáng)</td>
</tr>
<!--<hr size="30px" width="40%" color="aqua" align="center"/>-->
<hr size="10" color="aqua"/>
</table>
<a rel="external nofollow" target="_hzw">海賊王百度百科</a><br />
<a rel="external nofollow" target="_zy">海賊王愛(ài)奇藝資源</a><br />
<iframe src="" width="400px" height="400px" name="_hzw"></iframe>
<iframe src="" width="400px" height="400px" name="_zy"></iframe>
<hr />
<!--調(diào)用本地資源-->
<a name="岡崎朋也圖片"></a><br /> <!--錨的設(shè)置-->
<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="春原陽(yáng)平圖片"></a><br />
<img src="img/3.jpg" width="300px" title="春原陽(yáng)平" alt="error" /><br />
<a name="伊吹風(fēng)子圖片"></a><br />
<img src="4.jpg" width="300px" title="伊吹風(fēng)子" alt="error" /><br />
<hr />
<!--調(diào)用網(wǎng)絡(luò)資源-->
<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 />
<!--訪問(wèn)本地資源-->
<a href="FrameSet.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" >本頁(yè)刷新</a><br />
<a href="FrameSet.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">點(diǎn)這跳轉(zhuǎn)</a><br />
<a href="FrameSet.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="clannad.jpg" alt="" /></a><br />
<hr />
<!--訪問(wèn)網(wǎng)絡(luò)資源-->
<a rel="external nofollow" target="_blank">clannad百度百科</a><br />
<a rel="external nofollow" target="_blank">團(tuán)子大家族百度百科</a><br />
<a href="#" rel="external nofollow" >返回頂部</a>
</body>
</html>
在開(kāi)發(fā)過(guò)程中，js主要是通過(guò)函數(shù)進(jìn)行操作的在，所以各個(gè)js的開(kāi)發(fā)商封裝了類，其中window類的學(xué)習(xí)在此。window類型的使用方法和math的使用相同，不用創(chuàng)建對(duì)象，直接用實(shí)體進(jìn)行調(diào)用。
基本內(nèi)容有：
顯示框的顯示； 幾種時(shí)間定時(shí)和時(shí)間間隔執(zhí)行； 函數(shù)方法調(diào)用其他子窗口，子窗口與父函數(shù)的交互。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS window對(duì)象的top、parent、opener含義介紹
- js window對(duì)象屬性和方法相關(guān)資料整理
- javascript window對(duì)象屬性整理
- JavaScript中Window對(duì)象的屬性及事件
- JavaScript的document對(duì)象和window對(duì)象詳解
- JS 使用 window對(duì)象的print方法實(shí)現(xiàn)分頁(yè)打印功能
- JavaScript瀏覽器對(duì)象之一Window對(duì)象詳解
- Javascript window對(duì)象詳解
- Javascript之BOM(window對(duì)象)詳解
- javascript入門之window對(duì)象【新手必看】
- javascript類型系統(tǒng) Window對(duì)象學(xué)習(xí)筆記
相關(guān)文章
chatGPT前端流式輸出js實(shí)現(xiàn)三種方法—fetch、SSE、websocket
項(xiàng)目需要接入chatgpt提供的api,后端返回流式的字符,前端接收并實(shí)時(shí)顯示,在JavaScript中,使用Stream流通常指的是處理數(shù)據(jù)流的一種方式,它們?cè)试S數(shù)據(jù)被處理成塊,而不是一次性處理整個(gè)數(shù)據(jù)集,這對(duì)于處理大量數(shù)據(jù)或者來(lái)自網(wǎng)絡(luò)請(qǐng)求的數(shù)據(jù)非常有用,2024-07-07
js實(shí)現(xiàn)右下角可關(guān)閉最小化div(可用于展示推薦內(nèi)容)
使用Javascript實(shí)現(xiàn)右下角可關(guān)閉最小化div，可以用于展示推薦內(nèi)容，完整源代碼如下，感興趣的各位可以參下哈，希望對(duì)大家有所幫助2013-06-06
javascript計(jì)算星座屬相(十二生肖屬相)示例代碼
本文介紹了使用javascript計(jì)算星座和屬相的示例，這個(gè)可以用在用戶注冊(cè)的時(shí)候顯示出來(lái)，大家參考使用吧2014-01-01
javascript replace()用法詳解附實(shí)例代碼
在javascript中，String的函數(shù)replace()簡(jiǎn)直太讓人喜愛(ài)了。它靈活而強(qiáng)大的字符替換處理能力，讓我不禁想向大家介紹它。2008-10-10
json屬性名為什么要雙引號(hào)(個(gè)人猜測(cè))
json屬性名為什么要雙引號(hào)？更加規(guī)范,利于解析、避免class等關(guān)鍵字引起的不兼容問(wèn)題,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了JavaScript數(shù)組和循環(huán)詳解,本文講解了循環(huán)遍歷數(shù)組、按順序存儲(chǔ)和訪問(wèn)值、以相反的順序存儲(chǔ)和訪問(wèn)值、在數(shù)組中搜索等內(nèi)容,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JS如何定義用字符串拼接的變量,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了JavaScript如何生成二維數(shù)組問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
ES6中javascript實(shí)現(xiàn)函數(shù)綁定及類的事件綁定功能詳解
這篇文章主要介紹了ES6中javascript實(shí)現(xiàn)函數(shù)綁定及類的事件綁定功能,結(jié)合實(shí)例形式分析了ES6中函數(shù)綁定及類的事件綁定原理、實(shí)現(xiàn)方法、相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-11-11
TypeScript 數(shù)組Array操作的常用方法
本文主要介紹了TypeScript 數(shù)組Array操作的常用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06