JavaScript操作BOM简单案例

最新推荐文章于 2024-05-01 09:11:04 发布

穆雄雄

最新推荐文章于 2024-05-01 09:11:04 发布

阅读量927

点赞数 2

分类专栏： # JavaScript 文章标签： JavaScript操作BOM JS BOM

本文链接：https://blog.csdn.net/qq_34137397/article/details/92621313

版权

JavaScript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

需要两个页面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+"&nbsp;"+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>

穆雄雄

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript操作BOM简单案例

需要两个页面index.html和Test.html，可以直接运行，每个功能都已经注释完整，index.html页面的代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body&gt...
复制链接

扫一扫