将setTimeout写在函数外部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3 id="hid">0</h3>
<script type="text/javascript">
var hid = document.getElementById("hid");
var num = 1;
function myTime(){
hid.innerHTML = num; // innerHTML是当前对象内部的内容
num++; // ++ 代表自增
}
setTimeout("myTime()",1000); // 1000 等于 1秒,第二个参数的单位是毫秒
// 最终运行结果是 页面显示 1 ,说明代码只执行了一次
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3 id="hid">0</h3>
<script type="text/javascript">
var hid = document.getElementById("hid");
var num = 1;
function myTime(){
hid.innerHTML = num;
num++;
// 这里将定时函数写在了自定义函数内部
setTimeout("myTime()",1000);
}
// 然后在外部调用自定义函数,使其执行
myTime(); // 最终结果是:只要页面不关、不刷新,会一直执行下去,h3中的值会一直累加下去
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3 id="hid">0</h3>
<script type="text/javascript">
var hid = document.getElementById("hid");
var num = 1;
var id = null; // 声明一个变量,目的是为了存放setTimeout()
function myTime(){
hid.innerHTML = num;
id = setTimeout("myTime()",1000); // 存起来
// 当 hid 中的值等于 5 的时候,停止setTimeout
if(num == 5){
clearTimeout(id); // 停止
}
num++; // 为了让页面能显示出来 5 ,将num++放到最后,或者让 num == 6 num > 5
}
myTime();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3 id="hid">0</h3>
<!-- onclick是写在行内的鼠标单击效果属性,引号内部是JavaScript代码 -->
<button onclick="stopMyTime();">点击停止</button>
<script type="text/javascript">
var hid = document.getElementById("hid");
var num = 1;
var id = null; // 声明一个变量,目的是为了存放setTimeout()
function myTime(){
hid.innerHTML = num;
id = setTimeout("myTime()",1000); // 存起来
num++;
}
myTime();
function stopMyTime(){
clearTimeout(id);
}
</script>
</body>
</html>