當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript操作BOM简单案例
生活随笔
收集整理的這篇文章主要介紹了
JavaScript操作BOM简单案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需要兩個頁面index.html和Test.html，可以直接運行，每個功能都已經注釋完整，index.html頁面的代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">//1.confirm方法 // var flag = window.confirm("確定要刪除嗎？"); // if(flag){ // alert("你點的是確定"); // }else{ // alert("你點的是取消"); // }//2.open的方法//window.open("Test.html");function openChuang(){window.open("Test.html","","width=500,heigth=5500,location=0");}//3.關閉窗口function closeChuang(){window.close();}//4.history對象function qianjin(){//去下一個頁面//history.forward();history.go(1);}//5.location對象function loc(){//顯示主機名和端口號document.write(location.host);document.write("<br/>");//顯示主機名document.write(location.hostname);document.write("<br/>");//顯示全部鏈接document.write(location.href);}//重新加載頁面function rel(){location.reload();}//操作document的方法function Doc(){//給id是first的文本框里面賦值document.getElementById("first").value="名稱";//給name為txt的文本框里面賦值var count = document.getElementsByName("txt");for(var i =0;i<count.length;i++) {count[i].value = "值"+i;}//給所有標簽是input的value賦值getElementsByTagName//先獲取標簽名是input的元素var inp = document.getElementsByTagName("input");for(var i = 0;i<inp.length;i++){inp[i].value = "新值"+(i+1);}}function getDateInfo(){//獲取當前日期var date = new Date();var nian = date.getFullYear(); //年var yue = date.getMonth()+1; //月var day = date.getDate(); //日var shi = date.getHours(); //時var fen = date.getMinutes(); //分var miao = date.getSeconds(); //秒//將時間放在id為riqi的div里document.getElementById("riqi").innerHTML = nian+"-"+yue+"-"+day+" "+shi+":"+fen+":"+miao;}//隨機數function getRandom(){var ran = Math.floor(Math.random()*100+1);alert(ran);}//5秒之后彈出來一個框function Time(){var t1 = setTimeout("alert('彈出信息')",5000);}//每隔5秒提示信息function Times(){var t2 = setInterval("alert('彈出信息')",5000);}</script><h1>這是index頁面</h1><input type="button" value="彈出一個固定大小的窗體" onclick="openChuang()" /><br /><input type="button" value="關閉窗體" onclick="closeChuang()" /><br /><input type="button" value="去Test頁面" onclick="qianjin()" /><br /><a href="Test.html">測試的頁面</a><br />location對象：<input type="button" value="location對象" onclick="loc()" /><br /><input type="button" value="刷新頁面" onclick="rel()" /><br /><h2><a href="Test.html">馬上去領獎吧！</a></h2><br />下面是在介紹document的方法:1.<input type="text" name="name" value="" id="first" /><br />2.<input type="text" name="txt" /><br />3.<input type="text" name="txt" /><br />4.<input type="text" name="txt" /><br /><button onclick="Doc()">操作document方法</button><br />下面介紹內置對象中的日期函數：<br /><div id="riqi"></div><button onclick="getDateInfo()">獲取當前日期信息</button><br /><button onclick="getRandom()">獲取1-100之間的隨機數</button><br /><button onclick="Time()">5秒之后彈出來一個框</button><br /><button onclick="Times()">每隔5秒彈出來一個框</button></body> </html>下面是Test頁面的代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//返回上一個頁面function backTop(){//history.back();history.go(-1);}//判斷是否通過超鏈接進來的document.write("<h1>領獎頁面</h1>");if(document.referrer==""){//不是通過超鏈接進來的alert("你不是從抽獎頁面過來的，不能抽獎，點擊確定5秒之后會自動關閉本窗口");setTimeout("location.href='index.html'",5000);}</script></head> <body><h1>這是測試的頁面</h1><input type="button" value="返回上一個頁面" onclick="backTop()" /></body> </html>總結
以上是生活随笔為你收集整理的JavaScript操作BOM简单案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中端电脑配置推荐？
- 下一篇： jQuery选择器案例之——index.