练习地址: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>
那让我们来看看差距:
- HTML里面大佬就没用任何元素,就body里面是空的,而我非要加个div;后面JavaScript取元素的时候代码也比大佬多半截,CSS样式也比大佬多半截
- 累加的时候,大佬直接++i;而我非要先取了innerText,parseInt成数字,再+1。真是愚笨至极!
- 路漫漫其修远兮,哀吾菜之可悲!