JavaScript的组成
95年2月 布兰登艾奇(Brendan Eich)着手为1995年2月发布的Netscape navigator2开发一门新语言:JavaScript,后来微软也在其IE3中加入名为JScript的JavaScript实现(命名为Jscript是为了避开与Netscape有关的授权问题)
JavaScript的组成:
1.ECMAScript 欧洲计算机制造商协会制定的规范
2.BOM,Browser Object Model浏览器对象模型
3.DOM,Document Object Model文档对象模型
BOM, Browser Object Model浏览器对象模型
6+1种,兼容性差,但是有的内容是很重要的。
一、window对象
两个定时器函数(重点)
1.window.setTimeout(函数名,毫秒);延迟多少毫秒后,执行该函数,只执行一次
示例代码:3秒后跳转
<script type="text/javascript">
function test () {
window.setTimeout(tiaozhuan,3000);
}
function tiaozhuan () {
location.assign("http://www.sohu.com");
}
</script>
<input type="button" name="btn1" id="btn1" value="3秒跳转" onclick="test();"/>
2.window.setInterval(函数名,毫秒);每隔多少毫秒执行一次
清除定时器:window.clearInterval(定时器名字)
示例代码1:显示时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第二个定时器对象</title>
<script type="text/javascript">
var div1;
var currentTime;
var myInterval;
function test () {
myInterval = window.setInterval(displayTime,1000);
div1 = document.getElementById("div1");
}
function displayTime () {
//只获得当前时间
currentTime = new Date().toLocaleTimeString();
div1.innerHTML = currentTime;
}
function stopTime () {
window.clearInterval(myInterval);
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="显示时间" onclick="test();"/>
<input type="button" name="btn2" id="btn2" value="停止显示时间" onclick="stopTime();"/>
<div id="div1">
</div>
</body>
</html>
示例代码2:倒计时5秒跳转到百度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时5秒跳到百度</title>
<script type="text/javascript">
var div1;
var t = 5;
function goto(){
window.setInterval(gotobaidu,1000);
}
function gotobaidu () {
div1 = document.getElementById("div1");
div1.innerHTML = t--;
if(t==0){
location.assign("http://www.baidu.com");
}
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="5秒后跳转至百度" onclick="goto();"/>
<div id="div1">
</div>
</body>
</html>
注:可以通过修改图片的src,做到轮播即切换图片的效果
二、 history对象
历史对象,代表浏览器的历史栏,可以实现后退一步或前进一步,如:购物时的添加至购物车后,查看购物车的继续购物按钮,即是后退一步的操作。
基本语法:history.back();后退一步,
history.forward();前进一步
或者
history.go(-1);//后退一步
history.go(2);//前进两步
还可以通过history.length属性返回用户访问的页面总数。
示例代码:
a.html
<h2>a.html</h2>
<a href="b.html">跳到b.html</a>
<input type="button" name="btn1" id="btn1" value="前进一步" onclick="history.forward()"/>
<input type="button" name="btn2" id="btn2" value="后退一步" onclick="history.back()"/>
b.html
<h2>b.html</h2>
<a href="c.html">跳到c.html</a>
<input type="button" name="btn1" id="btn1" value="前进一步" onclick="history.forward()"/>
<input type="button" name="btn2" id="btn2" value="后退一步" onclick="history.back()"/>
<input type="button" name="btn1" id="btn1" value="使用go前进一步" onclick="history.go(1)"/>
<input type="button" name="btn2" id="btn2" value="使用go后退一步" onclick="history.go(-1)"/>
c.html
<h2>c.html</h2>
<input type="button" name="btn2" id="btn2" value="后退一步" onclick="history.back()"/>
<input type="button" name="btn3" id="btn3" value="访问页面数" onclick="alert(history.length)" />