Bom

最新推荐文章于 2021-12-05 23:20:33 发布

New__Dream

最新推荐文章于 2021-12-05 23:20:33 发布

阅读量173

点赞数

文章标签： js

本文链接：https://blog.csdn.net/New__Dream/article/details/108551925

版权

Bom

一.window对象常用方法
1.open()：打开一个新的窗口
2.resizeTo()：将窗口的大小更改为指定的宽度和高度值
3.moveTo()：将窗口左上角的屏幕位置移动到指定的X和Y位置
4.moveBy()：相对于原来的窗口移动制定的x,y值
5.setInterval()：每经过指定毫秒值后就会执行指定的代码
6.clearInterval()：根据一个任务的ID取消定时任务
7.setTimeout()：经过指定毫秒值后执行指定的代码一次
注意：使用window对象的任何属性与方法都可以省略window对象不写的


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="打开新页面" onclick="Testopen()" />
		<input type="button" value="改变大小" onclick="TestresizeTo()" />

		<input type="button" value="移动位置" onclick="TestmoveTo()" />
		<input type="button" value="根据当前位置移动" onclick="TestmoveBy()" />

		<input type="button" value="清除定时器" onclick="TestclearInterval()" />
		<script type="text/javascript">
			function Testopen(){
				window.open("new_file.html","_blank","location=no,toolbar=no");
			}
			
			function TestresizeTo(){
				window.resizeTo(500,500);
			}
			
			function TestmoveTo(){
				window.moveTo(100,200);
			}
			function TestmoveBy(){
				window.moveBy(20,20);
			}
			// 定时器返回值是当前的id  可以根据id来清除定时器
			// var id = window.setInterval("Testopen()",1000);
			// function TestclearInterval(){
			// 	window.clearInterval(id);
			// }
			
			
			// timeout() 在指定时间之后 执行一次函数
			
			window.setTimeout("Testopen()",3000);
		</script>
	</body>
</html>

二.常用事件
鼠标点击相关
1.onclick：在用户用鼠标左键单击对象时触发
2.ondblclick：当用户双击对象时触发
3.onmousedown：当用户用任何鼠标按钮单击对象时触发
4.onmouseup：当用户在鼠标位于对象之上时释放鼠标按钮时触发
鼠标移动相关
5.onmouseout：当用户将鼠标指针移出对象边界时触发
6.onmousemove：当用户将鼠标划过对象时触发
焦点相关的：
7.onblur：在对象失去输入焦点时触发
8.onfocus：当对象获得焦点时触发
其他
9.onchange：当对象或选中区的内容改变时触发
10.onload：在浏览器完成对象的装载后立即触发
11.onsubmit：当表单将要被提交时触发


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="showPage()">
		<!--onload="showPage()" -->

			<input type="button" value="单击" onclick="Testonclick()" />

			<input type="button" value="双击" ondblclick="Testondblclick()" />

			<input type="button" value="按下鼠标" onmousedown="Testonmousedown()" />

			<input type="button" value="释放鼠标" onmouseup="Testonmouseup()" />

			<input type="button" value="显示时间" onmousemove="Testonmousemove()" onmouseout="Testonmouseout()" />
			<span id="time"></span>

			<hr>

			用户名:<input type="text" id="username" name="username" onfocus="Testonfocus()" onblur="Testonblur()" />
			<span id="user"></span>
			密码:<input type="password" name="password" />

			<select onchange="Testonchange()">
				<option>上海</option>
				<option>北京</option>
				<option>深圳</option>
			</select>

			<form action="ad.html" onsubmit="Testonsubmit()">
				<input type="submit" />
			</form>
			
			<script type="text/javascript">
				function Testonclick(){
					alert("鼠标单击");
				}
				function Testondblclick(){
					alert("双击");
				}
				
				function Testonmousedown(){
					alert("鼠标按下");
				}
				
				function Testonmouseup(){
					alert("鼠标松开")
				}
				var spanNode = document.getElementById("time");
				function Testonmousemove(){
					
					var date = new Date();
					spanNode.innerHTML = "鼠标进来了" + date.toLocaleString();
				}
				
				function Testonmouseout(){
					spanNode.innerHTML = "鼠标出去了";
				}
				var userSpan = document.getElementById("user");
				function Testonfocus(){
					
					userSpan.innerHTML = "请输入用户名，不能小于6位".fontcolor("yellow");
				}
				
				function Testonblur(){
					userSpan.innerHTML = "非常棒，格式正确！".fontcolor("green");
				}
				
				function Testonchange(){
					alert("内容改变了");
				}
				
				function Testonsubmit(){
					alert("提交内容");
				}
				
				function showPage(){
					window.open("new_file.html","_blank","location=no,toolbar=no");
				}
				
			</script>
	</body>
</html>

三.location对象
Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。
location中的重要方法：
href属性设置或获取整个 URL 为字符串。
reload() 重新装入当前页面
href：获取当前网址的信息
host：获取主机地址和端口号
hostname：获取主机地址
port：获取端口号
protocol：获取安全协议


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="新浪网" onclick="gotoSina()" />

		<input type="button" value="刷新" onclick="refresh()" />
		<script type="text/javascript">
			document.writeln("<br>");
			document.writeln(location.href+"<br>");
			document.writeln(location.host+"<br>");
			document.writeln(location.hostname+"<br>");
			document.writeln(location.port+"<br>");
			document.writeln(location.protocol+"<br>");
			
			function gotoSina(){
				location.href = "http://www.sina.com"; 
			}
			function refresh(){
				location.reload();
			}
		</script>
	</body>
</html>