随机位置生成小方块案例

每一秒改变所有小方块的颜色和位置，效果如图

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>

随机位置生成小方块案例相关推荐

随机名字生成小demo源码
根据提供的文字随机生成指定字符的名称,挺简单的,一个小demo吧源字符 package com.example.demo;import cn.hutool.core.util.RandomUtil; ...
vue 固定范围内随机位置生成图片（可其他东西）
vue 固定范围内随机位置生成图片(可其他东西) 先说一下思路: 在一个范围内(主要是为了确认随机生成的图片中心点在范围内) 拿到图片半径(可随机,看需求) 随机生成xy坐标 (left,top) ...
js实现随机生成小方块
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
第三天---随机小方块
❀随机小方块展示 html部分: <div class="map"></div> css样式: .map{ width:800px; height:600p ...
微信小程序入门-随机人脸生成
微信小程序入门-随机人脸生成开发背景工具准备微信小程序开发过程开发背景 this person does not exist 这个网站起源于英伟达公司研究人员们打造的AI机器人--其能够生成随 ...
在html中什么标签可以显示小方块,css列表前的小方块
css列表前的小方块自己用个符号·来代替,却发现怎么显示都比较小,后来自己研究才发现我的字体全部定义成tahoma了,只要采用"宋体"就正常了. 列表前的小方块--design ...
flutter生成源代码_Flutter随机迷宫生成和解迷宫小游戏功能的源码
此博客旨在帮助大家更好的了解图的遍历算法,通过Flutter移动端平台将图的遍历算法运用在迷宫生成和解迷宫上,让算法变成可视化且可以进行交互,最终做成一个可进行随机迷宫生成和解迷宫的APP小游戏.本人 ...
Unity制作随机数字抽奖小案例
Unity制作随机数字抽奖小案例 1. 搭建 UI 界面 2. 实现思路 2-1. 创建 RandomNumber 类 [挂载在每个抽奖格子(Numbers下面的Image)] 2-2. 创建 Sta ...
13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）
目录一:案例鼠标拖拽小方块,小方格跟着移动(桌面图标拖动) 二:取消拖拽文字的行为 1.没取消前: 2.取消后: 三:鼠标拖拽案例优化: 如果有好多个小盒子要做拖拽,一个一个加上面的1,2,3步太麻 ...

随机位置生成小方块案例

随机位置生成小方块案例相关推荐

最新文章

热门文章