如何用随机数实现漫天星星闪烁的效果呢
今天我们用一个很笨很笨很笨（重要的事情说三遍）的方法来看看能不能实现。
首先我们先分析一下，想要要实现星星的闪烁只要不停的改变它的位置、大小透明度就行了吧，这些东西本来就只设定一个值，那怎么让他们不停改变呢，这就用到JavaScript中的随机数了吧，但是取随机数需要不停刷新才能取到不同的数，这里就要结合定时器一起使用了，让它每隔一段时间就取一个随机数。下面我们结合实际来看一下。
这里提供两种方法，但是意思相同，我们都来看一下，怎么选择，就看你喜欢哪种了。
第一种：
首先我们建立一个html文件，把背景色改成黑色：
:root{
background: black
}
在里面尽量多的插入小星星的图片，并且给不同的id名
我这里是放了60张，现在大概效果是这样的：
然后将星星图片设置成你认为合适的大小
img{
width: 120px;
height: 120px；
}
月亮也设置成大小合适的大小（也可以没有），我这就统一设置成120px*120px了。
想要每颗星星位置不断变化的前提条件要给它们一个绝对定位（相对整个页面），初始位置可以不设置（默认top：0px；left：0px）。
position: absolute;
因为绝对定位不占位，位置又都是默认位置，所以所有图片都叠在了一起：
接下来把月亮放到你认为合适的位置：
#img61{
position: absolute;
top: 10%;
left:70%;
}
这里不是只有一颗星星，是所有星星都叠加在一起了；
html和css的任务就完成了，下面就该写javaScript了；
首先要做的就是建立js文件，然后引入到html中，在js里写一个定时器
setInterval (function(){
},100)
这里的100表示时间，单位是ms，就是让定时器中的内容多长时间执行一次；
位置是由两个值决定的，垂直方向：top、水平方向：left，（当然这里也可以用bottom、right，随意组合，看个人喜好），想要实现更好一点的效果不仅要改变位置，最好还要改变一下大小，所以我们这里要设置三个随机数：
var top1 = Math.floor(Math.random()*801 + 0);
var left1 = Math.floor(Math.random()*1801 + 0);
var area1 = Math.random();
这里的坐标随机数以每个人电脑满屏为准，需要取最大值Max和最小值Min之间的数的方法是：
Math.random() * (Max - Min + 1) + Min
如果是取大于等于0，小于1的话直接是Math.random()就可以了，需要整数取整就可以了，这里的Math.floor就是向下取整。
因为每张图片在一个时间里的位置和大小都不一样，所以每张图片都要设置三个随机数；
然后需要找到每一张图片
document.getElementById("img1")
这个表示去整个文档中去寻找id名为img1的标签
然后重新写入样式
document.getElementById("img1").style = “样式”
我们这有三个属性，并且有三个值都附给了变量，所以要用到字符串拼接：
document.getElementById("img60").style = `top:${top60}px;left:${left60}px;transform:scale(${area60})`
60个代码太冗长，我这里就以两个举例：
setInterval (function(){
var top1 = Math.floor(Math.random()*801 + 0);
var left1 = Math.floor(Math.random()*1801 + 0);
var area1 = Math.random();
document.getElementById("img1").style = `top:${top1}px;left:${left1}px;transform:scale(${area1})`
var top2 = Math.floor(Math.random()*801 + 0);
var left2 = Math.floor(Math.random()*1801 + 0);
var area2 = Math.random();
document.getElementById("img2").style = `top:${top2}px;left:${left2}px;transform:scale(${area2})`
},100)
以此类推，有多少张星星图片就写多少个，因为位置和大小每100ms获取一个数值，也就是说位置和大小每100ms都会随机变，所以就成了类似闪烁的效果。
第二种：
html，css部分都是一模一样，上面我们是改变位置和大小，那参考星星一闪一闪的性质，就可以看出不改变位置，让它一闪一闪也是可以的，那一闪一闪怎么实现呢，改变每个星星的透明度和大小就可以，这样就不用改变位置，让每颗星星自行去闪烁就行；opacity：0；是完全透明，opacity：1；是完全显现，这里我们只要让透明度在0-1之间变化就行。大小变化看个人喜好。所以我们这只需要两个随机数，一个表示透明度，一个表示大小：
var topdiaphaneity1 = Math.random();
var area1 = Math.random();
然后给每个星星一个固定位置（所有星星位置都不一样，让它们分布在屏幕各个角落,并布满屏幕），再将上面两个值分别赋给透明度和大小：
document.getElementById("img1").style = `top:0px;left:0px;transform:scale(${area1});opacity:${diaphaneity1}`
这里还是需要给每个星星都设置不同位置（但是这位置是固定值，只是每颗星星位置不同而已）、不同透明度，不同大小，还是用两个举例：
setInterval (function(){
var topdiaphaneity1 = Math.random();
var area1 = Math.random();
document.getElementById("img1").style = `top:0px;left:0px;transform:scale(${area1});opacity:${diaphaneity1}`
var diaphaneity2 = Math.random();
var area2 = Math.random();
// console.log(area)
document.getElementById("img2").style = `top:0px;left:120px;transform:scale(${area2});opacity:${diaphaneity2}`
},100)
因为每颗星星的透明度和大小都在变化，所以也能营造闪烁效果，用那种就看你觉得哪种效果了。
（ps：我个人比较喜欢第一种呈现出来的效果。）
下面附上第一种的完整代码供参考（这里图方便，css和js都写在里面了）：
Document
