1.JS window

案例：获取浏览器实时窗口大小

<!DOCTYPE html>
<html>
<head>
	<title>windows</title>
	<meta charset="utf-8">
</head>
<body>
	<p id="demo"></p>
	<script type="text/javascript">

		var w=window.innerWidth   /*对所有浏览器有效*/
		|| document.documentElement.clientWidth  /*对IE8，7，6，5有效*/
		|| document.body.clientWidth;  
		var h=window.innerHeight  /*对所有浏览器有效*/
		|| document.documentElement.clientHeight  /*对IE8，7，6，5有效*/
		|| document.body.clientHeight;

		document.getElementById('demo').innerHTML="宽："+w+",高："+h
	</script>

</body>
</html>

2.JS screen

/*屏幕属性*/
var x=screen.availWith /*最大可用屏幕宽度*/
screen.availHeight /*最大可用屏幕高度*/

4.JS Location(用于返回URL相关)

案例：各种案例

<!DOCTYPE html>
<html>
<head>
	<title>Window Location</title>
	<meta charset="utf-8">
</head>
<body>
	<button type="button" name="加载新文档" onclick="newDoc()">按我！</button><br />
	<script type="text/javascript">
		document.write("location.hostname:   "+location.hostname.fontcolor("red")+"<br />")  /*返回当前页面域名 www.zhilaiwu.com */
		document.write("location.pathname:   "+location.pathname.fontcolor("red")+"<br />")  /*返回页面路径 /aboutus */
		document.write("location.port:   "+location.port.fontcolor("red")+"(主机端口80默认不显示)".fontcolor("red")+"<br />")  /*返回web主机端口，“如果端口是80（默认80），将没有返回结果”*/
		document.write("location.protocol:   "+location.protocol.fontcolor("red")+"<br />")  /*返回传输协议 https：*/
		document.write("location.href:   "+location.href.fontcolor("red")+"<br />")
		function newDoc() {  
			window.location.assign("http://www.yuexihk.com") /*加载新文档*/
		}
	</script>

</body>
</html>

结果：

5.JS history(后退，前进)

history.back() /*退后*/
history.forward() /*前进*/

6.JS navigator用于获取访问者浏览器信息（会不准确）

/*http://www.w3school.com.cn/js/js_window_navigator.asp*/

7.JS 消息框（提示，警告）

var a=confirm("确认框")
var b=prompt("带输入的消息框","输入部分")

<!DOCTYPE html>
<html>
<head>
	<title>消息框案例</title>
	<meta charset="utf-8">
</head>
<body>
	<button type="button" onclick="dispAlert()">警告框的折行符是'\n'，html的是&lt;br/&gt;</button>
	<button type="button" onclick="showConfirm()">确认框（节操问答题）</button>
	<button type="button" onclick="dispPrompt()">能键盘输入的提示框</button>

	<script type="text/javascript">
		function dispAlert() {
			alert("这是一个警告：\n你的节操掉了")
		}
		function showConfirm() {
			var r=confirm("你的节操是不是已经洒满一地？")
			if (r==true) {
				alert("恭喜你成为无节操一员")
			}
			else {
				alert("别bb，节操快丢掉！")
			}
		}
		function dispPrompt() {
			var name=prompt("无节操会员登记处：","输入你的名字")
			if (name!=null && name!="") {
				document.write("恭喜"+name+"成为无节操成员")
			} else {
				alert("你输入的姓名有误，看来你真无节操！")
			}
		}
	</script>

</body>
</html>

结果：

8.JS 计数器（Timing定时器使用）

var t=setTimeout("startcount()",1000) /*要执行的代码或函数,1000代表1000ms*/

clearTimeout(t) 清除定时器t

<!DOCTYPE html>
<html>
<head>
	<title>计时器</title>
	<meta charset="utf-8">
</head>
<body>
	<button type="button" onclick="startcount()">开始计数</button>
	<input id="111" type="text" name="Count" value="这里将显示计数" />
	<button type="button" onclick="stopcount()">停止计数</button>
	<button type="button" onclick="toZero()">清零</button>
	<p>实现开始计数，停止计数暂停，清零等功能。</p>

	<script type="text/javascript">
		var c=0
		var t
		var x=true  /*用来确保button（开始计数）不会随点击次数增加而加快速度。*/

		function startcount() {
			if(x==true){
				count()
			}
		}
		function count() {
			x=false
			document.getElementById('111').value=c
			c+=1
			t=setTimeout("count()",1000)
  		}

		function stopcount() {
			x=true
			clearTimeout(t)
		}

		function toZero() {
			c=0
			x=true
			clearTimeout(t)
			document.getElementById('111').value=0
		}

	</script>

</body>
</html>

9.JS Cookie

创建cookie:(cookie值需要编码,在这里就是那几个xxx)

document.cookie="cookiename+"="+(位置1)escape(xxxx)（位置2）+expiredays"

获取cookie：

return unescape(document.cookie.substring(位置1，位置2))

案例：第一次登陆需要在弹窗输入用户名，第二次登陆可以直接识别

<!DOCTYPE html>
<html>
<head>
	<title>测试Cookie</title>
	<meta charset="utf-8">
</head>
<body onLoad="checkCookie()">
	<script type="text/javascript">
		function getCookie(c_name) {
			if(document.cookie.length>0){
				/*比如：cookie为中括号内容【getusername=hjc; expires=Fri, 30 Mar 2018 08:31:14 GMT】
				c_name是在调用setcookie时代码层赋予的。
				value是我们要保存对应的值，这里是通过提示框输入后获取的。
				expiredays也是代码层赋予的。
				*/
				c_start=document.cookie.indexOf(c_name+"=")
				/*找是否存在字符串【getusername】,存在返回字符串第一位的位置，这里是0，找不到返回-1*/
				if (c_start!=-1) {
					c_start=c_start+c_name.length+1
					/*c_start=0+11+1=12，*/
					c_end=document.cookie.indexOf(";",c_start)
					/*indexOf（‘要找的字符串’，‘从哪开始找,这是刚好是=号后面的h’）*/
					if (c_end==-1) {c_end=document.cookie.length}
						/*如果没找到“;”，也就是说没有截至时间存在*/
					return unescape(document.cookie.substring(c_start,c_end))
					/*通过位置截取字符串，内容包含c_start不包含c_end*/
				}
			}
			return ""
			/*找不到cookie，返回空*/
		}

		function setCookie(c_name,value,expiredays) {
			var exdate=new Date()
			/*setDate()是设置当前月份的某日，填28，就是设置当前月28日。如果超出31日，如填32，就是下个月1日*/
			exdate.setDate(exdate.getDate()+expiredays)
			document.cookie=c_name+'='+escape(value)+((expiredays==null)?"":"; expires="+exdate.toGMTString())
			/*escape()是对内容进行编码存储。对应有个unescape()解码来显示。
			这里包含了到期时间，但在本案例中无意义，toGMTString()以世界0时区为标准的时间，并且变成字符串*/
		}
		function checkCookie() {
			username=getCookie("getusername")
			/*先获取用户名*/
			if (username!=null && username!="") {
				alert("Welcome again "+username)
			} 
			else {
				/*prompt(提示文本，"输入框中默认值")*/
				username=prompt("Please enter your name:","")
				if (username!=null && username!="") {
					setCookie('getusername',username,365)
				}
			}
		}
	</script>
</body>
</html>

结果：

第一次登陆：

之后登陆：

JS巩固2