JavaScript 利用内置对象Mach的一个方法制作满天星

话不多说先上图

首先了解一下js的内置对象Math
Math 和其他的对象不同，它不是一个构造函数，不需要创建对象。所以我们不需要通过 new 来调用，而是直接使用里面的属性和方法即可。

Math属于一个工具类，里面封装了数学运算相关的属性和方法。如下：

四舍五入，取最大最小什么的完全没看头。只有中间的Math.random()方法让人眼前一亮
随机取数 而且还是浮点型数值 这不直接爽歪歪吗这，疯狂戴夫都直呼外币巴普。
话不多说我们直接上干货(有营销号那味儿了 /手动狗头)

首先我们找一个星星来插入到我们代码中 这里推荐https://www.iconfont.cn/（阿里大法好 具体怎么用文章最后讲解 不要忘记一件三连哦，白嫖当我没说）找到这个
不得不说超级卡哇伊了 然后开始
先定义一个函数getRandom(x,y)

       function getRandom(x,y){
            return Math.random(x,y);
        }

这样我们传的参xy就可以返回出一个随机的数，但是这样写是完全错误的(别问我问什么先写错误的情况，具体参考隔壁阿牛的代码，她这样写 我也这样写，卷四她)
真实情况应该是这样的

        function getRandom(x,y){
            return Math.random() * (y-x) + x;
        }

为什么呢？(要是你心中也有这样的疑惑的话，那你肯定没有好好看上面哪个图，注意备注)
Math.random()是等价于[0,1)的（注意开闭区间）
所以它应该是Math.random()加四则运算和阿拉伯数字来完成这些。就是说这个方法是真滴好用
然后在开始写一个星星进去
我们用构造函数来构造一个星星对象

var div = document.createElement('div');

然后开始写div的属性 比如说他的名字

div.className = 'iconfont icon-xingxingman';

不要管这个 = 后面的值是什么 它就是星星(后面会说)
然后重点来了我们利用Math.random()这个方法来随机取星星的大小，把它写成div的一个方法来调用

 div.style.fontSize = getRandom(20,30) + 'px';

继续不要停 然后这个星星的颜色 我们通过控制rgb(x,y,z);里面的数让它随机取，这样使颜色也成为随机的

div.style.color = 'rgb('+ getRandom(0,256) +',' + getRandom(0,256) + ',' + getRandom(0,256) +')';

然后它的效果就会不断变大或变小 颜色一直变，但它始终会在网页最左最顶端出现，我们要让它出现在页面各个不同的位置

            div.style.position = 'absolute';
            div.style.top = getRandom(0,window.innerHeight) + 'px';
            div.style.left = getRandom(0,window.innerWidth) + 'px';

这样通过Math.random()方法去随机使星星出现在不同位置
然后接口

document.body.appendChild(div);   

这样就实现了一个星星 那怎么满天星呢
没错和你想的一样for循环
最后就是这样

       for(var i=0;i<=200;i++){
            var div = document.createElement('div');
            div.className = 'iconfont icon-xingxingman';
            div.style.fontSize = getRandom(20,30) + 'px';
            div.style.color = 'rgb('+ getRandom(0,256) +',' + getRandom(0,256) + ',' + getRandom(0,256) +')';
            div.style.position = 'absolute';
            div.style.top = getRandom(0,window.innerHeight) + 'px';
            div.style.left = getRandom(0,window.innerWidth) + 'px';
            document.body.appendChild(div);   
        }

然后我们就只剩下一步了，一个黑夜。
在这里我们选择在css样式里面把整个页面变成黑色就行啦

        body {
         background:#000;
        }

如果细节一点的话同学们应该可以发现，有的星星是一半出现在页面最下面，或者最左、最右。这时候写一个样式 使超出部分隐藏就行了

         overflow: hidden;

好了。完结撒花          /花/花/花

最后讲解一下阿里的 iconfont 怎么用





先在css里面写个 @import url();这个 然后括号里面加个https:// 协议
后面跟 黄箭头复制的代码 就像这样

 @import url(https://at.alicdn.com/t/font_2949316_mud89mf6qfh.css);

然后怎么调用呢，想必认真看的同学已经发现了 在写div对象classname属性的时候就调用了 iconfont

然后复制这个 写在iconfont后面

div.className = 'iconfont icon-xingxingman';

各位童靴们一键三连哟