我的项目5 计时器定时器 JS实现图片运动

浏览数：19 / 时间：2015年06月09日

在一个HTML5项目中用到了定时器，就学习了一下，和大家分享一下经验

需要用到一个方法：

       setInterval("ballMove()", 1000);

意思是每秒执行ballMove()方法一次

他能用到什么地方呢，这就需要小伙伴们发挥想象了。在这里我用它写了一个图片自由运到的例子

<!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>

大家可以试一下，挺有意思的。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

我的项目5 计时器定时器 JS实现图片运动