js实现小方块上下左右移动

最新推荐文章于 2021-10-13 20:38:44 发布

蒲小若

最新推荐文章于 2021-10-13 20:38:44 发布

阅读量9.7k

点赞数 1

分类专栏：前端开发经验总结录文章标签：定位 javascript

本文链接：https://blog.csdn.net/qq_39585562/article/details/77281322

版权

前端开发经验总结录专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 50px;
				height: 50px;
				position: absolute;
				background: palevioletred;
			}
		</style>
	</head>
	<body>
		<div id="box" style = "left: 0; top: 50px;"></div>
		<button id = "btn">stop</button>
	</body>
	<script type="text/javascript">
		var speed = 10;
		var flag = true;
		var interId;
		
		function moveLeft(){
			var oldLeft = parseInt(box.style.left);

			if(oldLeft >= window.innerWidth-50 || oldLeft < 0){
				speed *= -1;
			}
			box.style.left = oldLeft + speed + "px";	
		}
		
		function moveTop(){
			var oldTop = parseInt(box.style.top);

			if(oldTop >= window.innerHeight-50 || oldTop < 0){
				speed *= -1;
			}
			box.style.top = oldTop + speed + "px";	
		}
		
		function onOff(rand){
//			var rand = random();
			if (flag) {
				btn.innerHTML = "start";
				clearInterval(interId);
				flag = false;
			} else{
				btn.innerHTML = "stop";
				if (rand == 1) {
					interId = setInterval("moveLeft()",50);
//					flag = true;
				} else{
					interId = setInterval("moveTop()",50);
//					flag = true;
				}				
				flag = true;
			}
		}
		
		btn.onclick =onOff;
		
		//产生一个1-2的随机数
		function random(){
			rand = parseInt(Math.random() * 2 + 1);
			alert(rand);

			if (rand == 1) {
				interId = setInterval("moveLeft()",50);
			} else{
				interId = setInterval("moveTop()",50);
			}
		}
		
		random();
		
	</script>
</html>

蒲小若

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
js实现小方块上下左右移动

#box{ width: 50px; height: 50px; position: absolute; background: palevioletred; } stop var speed = 10; var flag = true; var interId; function moveLeft(){
复制链接

扫一扫

专栏目录