正方形弹跳功能

最新推荐文章于 2021-09-17 21:30:18 发布

原创最新推荐文章于 2021-09-17 21:30:18 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用JavaScript实现的简单示例，展示了如何让页面上的一个DIV元素在指定范围内进行随机移动。通过设置定时器，该DIV会不断地改变其位置，并在接近边界时反转方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
        <div style="background-color: palevioletred;height: 420px;width: 420px;position: absolute;">
		<div id="div1" style="background-color: aquamarine;height: 20px;width: 20px;margin-top: 20px; position: absolute;"></div>
	</div>
	<script type="text/javascript">
		var left=0;
		var on=0;
		var open=true;
		var set=setInterval(function(){
			var lefts=Math.random(20);
			var top=Math.random(20);
			var mydiv=document.getElementById("div1");
			if(left>=380||on>=380){
				open=false;
			}
			if(left<=0||on<=0){
				open=true;
			}
			if(open==true){
				left=left+lefts;
				on=on+top;
				mydiv.style.left=left+"px";
				mydiv.style.top=on+"px";
			}else{
				left=left-lefts;
				on=on-top;
				mydiv.style.left=left+"px";
				mydiv.style.top=on+"px";
			}
		},30);
	</script>
</body>