JavaScript 计时器
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
var i = setInterval(clock,100);
function clock(){
var time=new Date();
attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
document.getElementById("clock").value = attime;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>演示结果：
点击STOP按钮停止计时。
JavaS计数器
要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。
添加了一个 “Stop” 按钮来停止这个计数器。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
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>演示效果：
点击START按钮开始计时，点击STOP按钮停止计时。
返回上下页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoBack() {
window.history.back();
}
function GoForward() {
window.history.forward();
}
function GoBacka() {
window.history.go(-1);
}
function GoForwarda() {
window.history.go(1);
}
</script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回前一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack();" />
<input type="button" value="返回下一个页面" onclick="GoForward()" />
<input type="button" value="返回前一个页面" onclick="GoBacka();" />
<input type="button" value="返回下一个页面" onclick="GoForwarda();" />
</form>
</body>
</html>演示结果：
点击第一个锚点和第二个锚点，当点击按钮返回下一个页面，当前在#target1的时候，会返回到#target2。
当前在#target2的时候，点击按钮返回前一个页面，会返回到#target2.
制作一个跳转提示页面
要求：
- 如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址，如慕课网主页。
- 如果点击“返回”按钮则返回前一个页面。
效果:
注意: 在窗口中运行该程序时，该窗口一定要有历史浏览记录，否则”返回”无效果。
任务分解
第一步： 先编写好网页布局，如下:
第二步： 获取显示秒数的元素，通过定时器来更改秒数。
第三步： 通过window的location和history对象来控制网页的跳转。
解决代码：
<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
<!--先编写好网页布局-->
<h2>操作成功</h2>
<p><span id="time"> 5 </span>秒后回到主页 <a href="javascript:history.back()"> 返回</a></p>
<script type="text/javascript">
//获取显示秒数的元素，通过定时器来更改秒数。
var num = document.getElementById("time").innerHTML;
//通过window的location和history对象来控制网页的跳转。
var i = setInterval("if(num > 1){document.getElementById(‘time‘).innerHTML = --num;}else{location.assign(‘http://www.imooc.com‘);}", 1000);
</script>
</body>
</html>演示效果：
时间： 2024-11-09 09:31:22