在一个HTML5项目中用到了定时器，就学习了一下，和大家分享一下经验
需要用到一个方法：
setInterval("ballMove()", 1000);他能用到什么地方呢，这就需要小伙伴们发挥想象了。在这里我用它写了一个图片自由运到的例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ggggg</title>
<link rel="stylesheet" type="text/css" href="">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--js代码可以放置在任意位置，按照先后顺序依次执行 一般放在head标签之间-->
<script type="text/javascript">
//定义全局变量
//小球坐标
ballX=0;
ballY=0;
//小球在x,y轴移动的方向
directX=1;
directY=1;
//小球移动
function ballMove(){
//小球移动
ballX+=2*directX;
ballY+=2*directY;
//同时修改小球的top 和width
div2.style.top=ballY+'px';
div2.style.left=ballX+'px';
//window.alert(div1.offsetWidth);//offsetwidth在JS中是获取元素的宽,对应的还有offsetHeight
//判断转向
//learInterval(i);
if(ballX+div2.offsetWidth>=div1.offsetWidth ||ballX<=0){
directX=-directX;
}
if(ballY+div2.offsetHeight>=div1.offsetHeight || ballY<=0){
directY=-directY;
}
}
//定时器
var i=setInterval("ballMove()",10);
</script>
</head>
<body>
<div id="div1" style="width:400px;height:300px;border:1px solid silver;POSITION: absolute; TOP: 100px">
<div id="div2" style="position:absolute;left:0px;top:0px;"><img src="ball.png"></div>//图片没有也能看到效果
</div>
</body>
</html>那么我用Canvas绘制的图呢，我想描绘它所经过的路线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="utf-8">
//定时器
setInterval("ballMove()", 10);
//定义全局变量
//小球坐标
ballX = 0;
ballY = 0;
//小球在x,y轴移动的方向
directX = 1;
directY = 1;
//小球移动
function ballMove() {
//小球移动
ballX += 2 * directX;
ballY += 1 * directY;
var c = document.getElementById("mycanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.beginPath();
cxt.arc(ballX, ballY, 2, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
//判断转向
//learInterval(i);
if (ballX + 2 >= c.width|| ballX <= 0) {
directX = -directX;
}
if (ballY + 2 >= c.height|| ballY <= 0) {
directY = -directY;
}
}
</script>
</head>
<body>
<canvas id="mycanvas" width="400" height="300" style="border: 1px solid red;"></canvas>
</body>
</html>
大家可以试一下，挺有意思的。
原文地址：http://blog.csdn.net/li_li_lin/article/details/39323925
