【fgm.cc练习3-5】页面加载后累加，自加1

本文链接：https://blog.csdn.net/DGT4720/article/details/103108107

练习地址：http://www.fgm.cc/learn/lesson3/05.html
实现效果：页面加载后，出现数字自己累加，类似如秒表。
实现要点：setInterval函数。

setInterval函数接收两个参数，第一个是函数名字，第二个是时间（毫秒为单位），函数功能是每隔多少时间执行一次函数。要取消这个函数可以用clearInterval函数，该函数接收一个参数，就是要取消的函数名称。
与之类似的函数是setTimeout，该方法是等待一段时间执行一次函数，与上述主要区别就是执行函数的次数，同样，取消该方法的函数是clearTimeout。
下面是我的代码：

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>页面加载后累加，自加1</title>
	<link rel="stylesheet" type="text/css" href="5_addSelf.css">
</head>
<body>
	<div>1</div>
	<script type="text/javascript" src="5_addSelf.js"></script>
</body>
</html>

CSS

div {
	width: 100px;
	margin: 0 auto;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
}

JavaScript

window.onload = function() {
	var change = document.getElementsByTagName("div")[0];
	function add() {
		change.innerText = parseInt(change.innerText) + 1;
	}
	setInterval(add,1000);
}

然后下面是网页源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面加载后累加，自加1</title>
<style>
body{text-align:center;font:700 30px/1.5 arial;}
</style>
<script>
window.onload = function ()
{
	var oBody = document.body;
	var i = 0;
	setInterval(updateNum, 1000);
	updateNum();
	function updateNum()
	{
		oBody.innerHTML = ++i	
	}
}
</script>
</head>
<body>
</body>
</html>