<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zhizuo </title>
</head>
<body>
<h2>操作成功</h2>
<span id="time">5</span>
<span>秒之后跳转到慕课网</span>
<a href="#" id="back" title="返回慕课网">返回</a> <!-- 方法一添加鼠标点击事件 -->
<!--<a href="javascript:back()" id="back" title="返回慕课网">返回</a> 方法二-->
<script type="text/javascript">
var num=document.getElementById("time").innerHTML; //要获取时间,得在秒数后面添加js代码,要不然num取不到值
function dess(){ //num获取秒数
num--;
document.getElementById("time").innerHTML = num; //秒数减少
if(num==0){
location.assign("http://www.imooc.com/");
}
}
var i= setInterval("dess()",1000);
var back =document.getElementById("back"); /*方法一添加鼠标点击事件*/
back.onclick = function(){
window.history.back();
}
/*function back(){ 方法二添加js函数
window.history.back();
}*/
</script>
</body>
</html>
我更习惯在代码里添加注释,这样日后再拿起来看就更方便。
要点一:
5 4 3 2 1 秒数的设置涉及到setInterval (function(){},毫秒数);函数,每过一秒就执行一个函数,这个函数让里面的数字减一,直到为0,这个函数就是dess();函数。
坑点:一开始我把写在了标签的上面,由于语句是按行读取的,在js中的var num=document.getElementById("time").innerHTML;
就取不到值,报错是
9999.html:7 Uncaught TypeError: Cannot read property ‘innerHTML’ of null
所以Js代码不是想写哪里就写哪里。
要点二:
在返回的那里我用了两种方法,一是不给herf,添加鼠标点击事件,二是给href添加一个函数javascript:back();实际上去掉javascript前缀也是一样,它只是一个标志。