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>
