制作一个跳转提示页面:
要求:
1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如慕课网主页。
2. 如果点击“返回”按钮则返回前一个页面。
这个题目,复习了很多知识点,也需要注意很多地方。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
<!--先编写好网页布局-->
<h1>操作成功</h1>
<input type="text" id="deadline" > 秒后回到主页
<a href=goback()>返回</a>
<script type="text/javascript">
//获取显示秒数的元素,通过定时器来更改秒数。
var i=5;
function change(){
if(i>0){
document.getElementById("deadline").value=i;
i--;
}
if(i==0)
{window.open("http://www.imooc.com","_blank");}
}
var intervalID= setInterval(change,1000)
function goback(){
window.history.go(-1);
}
//通过window的location和history对象来控制网页的跳转。
</script>
</body>
</html>
用innerHTML取值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
<!--先编写好网页布局-->
<h1>操作成功</h1>
<div id="deadline"></div>秒后回到主页
<a href=goback()>返回</a>
<script type="text/javascript">
//获取显示秒数的元素,通过定时器来更改秒数。
var i=5;
function change(){
if(i>0){
document.getElementById("deadline").innerHTML=i;
i--;
}
if(i==0)
{window.open("http://www.imooc.com","_blank");}
}
var intervalID= setInterval(change,1000)
function goback(){
window.history.go(-1);
}
//通过window的location和history对象来控制网页的跳转。
</script>
</body>
</html>
注意:
1.首先,我还是用了text.value 这个显示,后面我再用innerHTML再试一遍,这次一定要弄明白他们一些取值方法的区别
2.就是settimeout()与seinterval()区别,简单来说,从字面上来看,一个是执行一次,一个要间歇性不断执行。
这个要倒计时,所以每个1000就要执行一次。而执行控制的时间用change()函数其中要用if控制循环
不能用for啊,第一次我就用的for做的打字机效果,它直接就全部循环了啊,速度很快的,所以不行!
3.几个window函数的复习
返回上一个页面window.histoy.go(-1);
打开新的页面window.open(“##”,"_blank")
4.goback(-1)直接打开是没有记录的哦~!
问题:
1.用了innerHTML取值之后,我发现总要换行,这样不好看,于是我终于发现了那时候刚看书看不懂的<div>与<span>差别啦
简单的来说用<span>是行内的东东,所以不换行啦!!实践出真知啊!
2.倒计时返回后,会弹出好多好多好多的主页,我用break但是不行,这个问题留着以后解决吧!