• 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+"&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>
    
    
  • 相关阅读:
    如何快速建立自己的知识体系
    让你的网站变成灰色
    Java多线程-锁升级
    冰河正则大全
    Win硬盘/U盘设置图片
    MySQL——三范式
    MySQL——事务
    MySQL_explain
    HDFS的一些常用指令
    Hadoop集群的搭建准备
  • 原文地址:https://www.cnblogs.com/a1111/p/12815896.html
Copyright © 2020-2023  润新知