window对象
window对象是BOM的核心，window对象指当前的浏览器窗口。
window对象方法:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>window对象</title>
<script type="text/javascript">
function myFunction()
{
alert("欢迎来到慕课网")
window.open('http://www.imooc.com','_blank','width=600 height=400')
}
</script>
</head>
<body>
<form>
<input type="button" value="点击我，打开新窗口" onclick="myFunction()" />
</form>
</body>
</html>JavaScript 计时器
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：
(1)计时器setInterval()，取消计时器clearInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:
setInterval(代码,交互时间);
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法：
clearInterval(由 setInterval() 返回的 ID 值);
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
var attime;
function clock(){
var time=new Date();
attime= time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
document.getElementById("clock").value = attime;
}
var i=setInterval(clock,100);//我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>(2)计时器setTimeout()，取消计时器clearTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:
setTimeout(代码,延迟时间);
setTimeout()和clearTimeout()一起使用，停止计时器。
语法:
clearTimeout(由 setTimeout() 返回的 ID 值)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
//当按钮被点击后，输入域便从0开始计数
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" onclick=" startCount()" />
<input type="button" value="Stop" onclick=" stopCount()" />
</form>
</body>
</html>History 对象
记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
语法：
window.history.[属性|方法]
【注意】window可以省略
History 对象属性:
History 对象方法:
back()方法–返回前一个浏览的页面,加载 history 列表中的前一个 URL
window.history.back();//等价于window.history.go(-1)forward()方法–返回下一个浏览的页面，加载 history 列表中的下一个 URL
window.history.forward();//等价于window.history.go(1)go()方法–返回浏览历史中的其他页面,加载 history 列表中的某个具体的页面
window.history.go(-2);
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function GoBack() {
window.history.back();
}
function GoForward() {
window.history.back();
}
</script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:
<br />
<a href="http://www.baidu.com">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="http://www.sina.com">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回下一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack()" />
<input type="button" value="返回下一个页面" onclick="GoForward()" />
</form>
</body>
</html>Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
语法:
location.[属性|方法]
location 对象属性：
location 对象方法:
//获取当前显示文档的URL,并输出
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>location</title>
</head>
<script type="text/javascript">
document.write(window.location.href);
</script>
</head>
<body>
</body>
</html>Navigator对象
包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
对象属性:
//使用Navigator对象，查看浏览器相关信息
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
var browser = navigator.appName;
var version = navigator.appVersion;
var appCode = navigator.appCodeName;
var platSys = navigator.platform;
var usersAg = navigator.userAgent;
document.write("浏览器名称："+browser+"<br />"+"平台和版本信息："+version+"<br />"+"浏览器代码名称字符："+appCode+"<br />"+"浏览器操作系统平台："+platSys+"<br />"+"服务器头部的值："+usersAg)
</script>
<body>
</body>
</html>userAgent
返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
语法:
navigator.userAgent几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
function validB(){
var u_agent = navigator.userAgent;
var B_name="不是想用的主流浏览器!";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("浏览器:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
</script>
</head>
<body>
<form>
<input type="button" onClick=validB() value="查看浏览器" >
</form>
</body>
</html>screen对象
用于获取用户的屏幕信息。
对象属性:
//屏幕分辨率的高和宽
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write( "屏幕宽度："+window.screen.width+"px<br />");
document.write( "屏幕高度："+screen.height+"px");
</script>
</body>
</html>//屏幕可用高和宽度
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<h2>屏幕分辨率的高和宽</h2>
<script type="text/javascript">
document.write("可用宽度："+screen.availWidth+"px<br />" );
document.write("可用高度："+window.screen.availHeight+"px" );
</script>
</body>
</html>制作一个跳转提示页面：
要求：
如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址，如慕课网主页。
如果点击“返回”按钮则返回前一个页面。
<!DOCTYPE html>
<!--制作一个跳转提示页面：-->
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
</head>
<body>
<!--先编写好网页布局-->
<h1>操作成功</h1>
<span id="second" >5</span>
<span >秒后回到主页</span>
<a href="javascript:back();">返回</a>
<script type="text/javascript">
var num=document.getElementById("second").innerHTML;
//获取显示秒数的元素，通过定时器来更改秒数。
function count()
{
num--;
document.getElementById("second").innerHTML=num;
if(num==0)
{
location.assign("http://www.baidu.com");
}
}
setInterval("count()",1000);
//通过window的location和history对象来控制网页的跳转。
function back()
{
window.history.back();
}
</script>
</body>
</html>
扫一扫
4493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
