JS控制方块自动移动

最新推荐文章于 2022-09-21 15:35:57 发布

mamamiya

最新推荐文章于 2022-09-21 15:35:57 发布

阅读量4.5k

点赞数

分类专栏： JS片段

本文链接：https://blog.csdn.net/wyjie1987/article/details/8558052

版权

本文介绍如何利用JavaScript的setTimeout事件实现一个方块在屏幕上的自动循环移动，讲解相关编程技巧。

摘要由CSDN通过智能技术生成

通过JS的setTimeout事件来控制一个小方块绕屏幕移动：

<html>
<style type="text/css">
	
</style>

<script>
	
	function autoMoveBox()
	{
		//debugger;
		var windowHeight = window.innerHeight;
		var windowWidth = window.innerWidth;

		var box = document.getElementById("square");
		var boxWidth = parseInt(box.style.width);
		var boxHeight = parseInt(box.style.height);
		var boxTop = parseInt(box.style.top);
		var boxLeft = parseInt(box.style.left);
		
		var size = 10;
		//	左上角，开始右移
		if( (boxTop-boxHeight<=0) && (boxLeft+boxWidth)<windowWidth )
		{
			box.style.left =  boxLeft + size + "px";
		}
		else if((boxTop+boxHeight<windowHeight) && (boxLeft+boxWidth)>=windowWidth)
		{
		//	右上角，开始下移
			box.style.top =  boxTop + size + "px";
		}
		else if((boxTop+boxHeight)>=

最低0.47元/天解锁文章

mamamiya

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS控制方块自动移动

通过JS的setTimeout事件来控制一个小方块绕屏幕移动： function autoMoveBox() { //debugger; var windowHeight = window.innerHeight; var windowWidth = window.innerWidth; var box = document.getElementById(
复制链接

扫一扫