浏览器对象

最新推荐文章于 2024-01-23 09:09:44 发布

格林黄

最新推荐文章于 2024-01-23 09:09:44 发布

阅读量428

点赞数 1

分类专栏： web前段javascript知识点汇总

本文链接：https://blog.csdn.net/apity123/article/details/68921166

版权

web前段javascript知识点汇总专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.window对象

1）所有浏览器都支持window对象。它表示浏览器窗口。

2）所有JavaScript全局对象、函数以及变量均自动成为window对象的成员

window.document.getElementById("demo");

3)window窗口尺寸

window窗口尺寸（不包含工具条和滚动条）

window.innerHeight--浏览器窗口的内部高度

window.innerWidth--浏览器窗口的内部宽度

4）window其他方法

window.open()--打开新窗口

window.close()--关闭当前窗口

window.moveTo()--移动当前窗口

window.resizeTo()--调整当前窗口

2screen对象

1）包含有关用户屏幕的信息

screen.availWidth--可用的屏幕宽度

screen.availHeight--可用的屏幕高度

screen.width--屏幕宽度

screen.height--屏幕高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
	
<body>
    <p id="ptime"></p>
    <button type="button" id="btn" οnclick="stopTime()">按钮</button>
    <script>
		function getTime()
		{
			var my_date=new Date();
			var time_str=my_date.toLocaleTimeString();
			document.getElementById("ptime").innerHTML=time_str;
		}
		var timer=setInterval(function(){getTime()},1000);
		
		function stopTime()
		{
			clearInterval(timer)
		}
	</script>
</body>
</html>

3计时器（两种方法）

1）在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行

2）setInterval()：间隔制定毫秒数不停地执行

3） clearInterval()：停止setInterval（）方法的执行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
	
<body>
    <p id="ptime"></p>
    <script>
		function gettime()
		{
			var my_date=new Date();
			var time_str=my_date.toLocaleTimeString();
			document.getElementById("ptime").innerHTML=time_str;
		}
		setInterval(function(){gettime();},1000);     //每一秒刷新时间
	</script>
</body>
</html>

4）setTimeout()：暂停指定毫秒数后执行

5）clearTimeout()：停止setTimeout()方法执行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<p id="ptime"></p>
<script>
function getTime()
{
var my_date=new Date();
var time_str=my_date.toLocaleTimeString();
document.getElementById("ptime").innerHTML=time_str;
setTimeout(function(){getTime();},1000); //隔段时间调用getTime()函数
}
getTime();
</script>
</body>
</html>

4.history对象

1)包含浏览器的历史

history.back()--同浏览器点击后退按钮

history.forward()--同浏览器中点击向前按钮

history.go()--进入历史中的某个页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
	
<body>
<button id="btn" οnclick="goback()">回退</button>
    <script>
		function goback()
		{
			//history.back();
			history.go(-1);
		}
	</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="index.html">index</a>
<button id="btn" type="button" οnclick="myforward()">forward</button>
<script>
	function myforward(){
			history.forward();
		}
</script>
</body>
</html>

5.location对象

1)获取当前页面的URL,并定向到新的页面

location.hostname：获取web主机的域名

location.pathname：获取当前页面的路径和文件名

location.port：获取web主机的端口（80或443）

location.protocol：获取使用的web协议（http://或https://）

location.href：属性返回当前页面的URL

location.assign()：方法加载一个新的页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
	
<body>
    <script>
		document.write(location.hostname);
		document.write("<br>");
		document.write(location.pathname);
		document.write("<br>");
		document.write(location.href);
		document.write("<br>");
	</script>
</body>
</html>

6.cookie

1)cookie用来识别用户

2）cookie式存储于访问者的计算机中的变量。

每当同一台计算机通过浏览器请求某个页面时就会发送这个cookie。可以使用JavaScript来创建和取回cookie的值

3）创建和存储cookie

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>