这是一篇知识密度比较大的文章，所以我们一点点讲，首先将生成随机数，在JavaScript中有一个内置对象Math，Math有一个方法random()，它的作用是生成一个0到1的小数，1是取不到的，在实际应用中，我们可能不是要获取一个0到1的小数，而是获取某个范围内的一个整数，这就是一个数学问题了，解决方案就是一个公式。

ceil的意思是向上取整，比如Math.ceil(1.1)的结果是2，floor的意思是向下取整，整个函数的作用就是范围某个范围内的一个值。

第二步我们需要创建一个容器，也就是一个div元素，并且设置这个div元素的样式，style标签是设置样式的，我们主要设置容器的高度和宽度，以及背景颜色，由于容器要做父容器，所以定位方式是相对定位。

第三步创建子元素，由于子元素的生成是随机的，所以我们并不是在html标签中直接书写子元素，而是在JavaScript创建子元素，并设置一个定时器，不断改变子元素的位置，为了更清晰地描述我们的逻辑，这里我们将子元素设置为一个对象，我们我们开始编写子元素的构造函数。

我们的构造函数写的也不是太规范，但是已经够用了，它的基本逻辑是，传入两个参数，一个父元素，一个是子元素的属性，将子元素属性设置一个默认值，然后新建一个div元素，将子元素的属性赋值给这个子元素，子元素的定位方式为绝对定位，最后将这个子元素添加到父元素中，下面是测试代码和结果。

然后我们编写编写子元素随机生成位置的方法：

这就是我们的随机生产位置的方法，我们在添加完子元素之后再调用这个方法就可以了，这里需要讲到两个属性，offsetHeight指的是盒子模型最终的高，clientHeight指的是盒子模型不含边框的高，在本实例中由于没有边框，两个大小一致。

下面我们要书写一个方法，让产生的子元素颜色随机：

这就是让颜色随机的函数，怎么解释那，其实在css中设置颜色有三种格式，第一种直接写单词比如red，第二种用rgb（1,23,34）这样的格式，rgb内部的数字在（0,255）之间，第三种使用16进制表示，比如“#00ffff”，这里用到的就是第二种方式。

有了这些之后，我们就可以生成任意个子元素，比如说我们想生成10个，并且位置随机，代码如下。其实只是加了一个for循环。

最后我们还有一个需求，就是让这些方块动起来，这里就需要用到定时器函数，setInterval是定时器函数，让它每隔500毫秒执行一次。

最后的效果是这样的：