随机位置生成小方块案例

sorryhc

已于 2022-06-29 07:12:23 修改

阅读量997

点赞数 4

分类专栏： JS 文章标签： html5 javascript css html css3

于 2020-07-28 01:02:57 首次发布

本文链接：https://blog.csdn.net/m0_46995864/article/details/107625739

版权

JS 专栏收录该内容

35 篇文章

订阅专栏

每一秒改变所有小方块的颜色和位置，效果如图
在这里插入图片描述
html代码很简单，就是一个容器以及十个小方块


```javascript
<div id = 'container'>
	</div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

CSS

<style type="text/css">
	#container{
		background-color: black;
		width:700px;
		height:700px;
		position: relative;
	}
	li{
		position: absolute;
		width:20px;
		height:20px;
		background-color: red;
		top:20px;
		left:20px;
		z-index: 1;
	}
	ul{
		float:left;
		list-style: none;
	}
</style>

JS里使用一个定时器包裹了随机盒子样式改变的函数，每0.5秒改变一次

<script>
	var li = document.getElementsByTagName('li');
	var timer = setInterval(boxChange,500);
	function boxChange(){
		for(let i = 0;i < li.length;i++){
			let color = `#${Math.floor((Math.random()*999999+100000))}`;
			let top = (Math.random()*650+20);
			let left = (Math.random()*650+20);
			li[i].style.background = color;
			li[i].style.top = top + 'px';
			li[i].style.left = left + 'px';
			console.dir(`${top},${left},${color}`)
		}
	}
</script>