js随机九宫格闪烁及弹性盒子的介绍（2018-08-02）

因为对于js的初步学习，所以想找简单的东西练练。所以瞄准了这个“九宫格的随机闪烁”’。
过程中用的东西并不多，就是关于随机数，随机颜色，以及计时器的应用。

实现随机闪烁的关键在于：

产生随机数（比如每次产生三个随机数，即三个方格会闪动）
产生随机色
将随机数匹配随机色（即固定所产生的的数字，对应相应的颜色变化）
宫格内颜色变化过后再恢复原来的颜色（不然会看花眼）
设置计时器（颜色是变化的，我们只控制开始结束）

实现中遇到的问题：

九宫格的布局：要想三个一排，且间隔大小等都相等，则需要用到弹性布局

比如其中用到的属性：

display: flex;
flex-flow: wrap;
justify-content: space-around;
box-sizing: border-box;

因为之前对 弹性布局了解用的也很少，所以今天顺便来介绍一下：
(1) flxe（容器） :
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，是一个布局容器，有两个轴线（水平主轴和垂直交叉轴），默认沿主轴排列。
即：

原来是竖向排列，加上display：flex属性后，横向排列

（2）容器的属性

flex-direction：控制主轴的方向

flex-wrap:当一行放不下时，如何换行

flex-flow: 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content:在主轴上的对齐方式

align-items：在垂直交叉轴上如何排列

align-content：多根轴线的对齐方式

1.flex-direction:如何控制主轴方向

row(默认方向):主轴沿水平方向，起点在左端

row -reverse：主轴沿水平方向，起点在右端

沿水平方向

column ：主轴沿竖直方向，起点向上

column -reverse:主轴沿竖直方向，起点向下

沿竖直方向

2.flex-warp:如何换行

nowarp : 默认不换行

不换行

warp : 换行，在下面换行

在下面换行

warp-reverse:换行，在上面换行

在上面换行

3.justify-content：主轴线上如何对齐

flex-start: 默认，左对齐

flex-end: 右对齐

左对齐和右对齐，效果一样

center: 居中

居中

space -between: 两端对齐，每个之间距离相等

两端对齐，间隔相等

space - around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

两侧间距相等

4.align-items：如何在垂直交叉轴上排列

flex-strat: 交叉轴起点对齐

flex-end: 交叉轴终点对齐

起点对齐，终点对齐

center: 交叉轴中点对齐

stretch：（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度

中点对齐，占满高度

baseline: 项目的第一行文字的基线对齐。

第一行文字对齐

5.anlign-content :多根轴线如何对齐

flex-start：与交叉轴的起点对齐

flex-end：与交叉轴的终点对齐

起点对齐，终点对齐

center：与交叉轴的中点对齐

stretch（默认值）：轴线占满整个交叉轴

中点对齐，占满交叉轴

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

两端对齐，两侧间隔相等

这六个属性只是容器的属性，还有建立在项目上的属性，今天就先看这些吧，若要接着学习可以参照这篇博客学习：https://blog.csdn.net/linda_417/article/details/51507176

下面我们回归正题，这个九宫格中的布局方法也介绍过了，遇到的难题不止弹性布局这一个，还有：

变量的作用域，函数传参，全局变量的设置。
颜色的控制，每次只显示三个格子的颜色，显示过后恢复默认颜色，产生三个随机数（代表九宫格的号码），产生随机色，然后将随机色分配给任意产生的三个号码数字。
时间的控制，控制计时器的开始，结束，设置点击事件。

下面我们来看代码的实现：
1.HTML的代码：

<head>
    <meta charset="UTF-8">
    <title>随机九宫格</title>
    <link rel="stylesheet" type="text/css" href="../newcss/jiugongge_css.css">
    <script src="../js/jiugongge.js"></script>
</head>
<body>
 <div class="content">
     <ul id="ul">
         <li><div class="li_div">1</div></li>
         <li><div class="li_div">2</div></li>
         <li><div class="li_div">3</div></li>
         <li><div class="li_div">4</div></li>
         <li><div class="li_div">5</div></li>
         <li><div class="li_div">6</div></li>
         <li><div class="li_div">7</div></li>
         <li><div class="li_div">8</div></li>
         <li><div class="li_div">9</div></li>
     </ul>
     <div class="btn">
         <form>
             <input type="button" value="点击开始" id="run" onclick="runner();">
             <input type="button" value="点击暂停" id="Stop" onclick="stopper();">
         </form>
     </div>
 </div>
</body>

2.CSS样式的代码：

*{
    padding: 0;
    margin: 0;
}
.content{
    width: 400px;
    height:350px;
    position: absolute;
    top:15%;
    left:35%;
    border: 2px solid #cccccc;
    border-radius: 15px;
    background-image: url("../img/4.jpg");
    box-shadow: 0 0 5px #cccccc;
}
#ul{
    margin:8px auto;
    padding: 5px;
    height: 100%;
    width: 100%;
    list-style: none;
    display: flex;
    flex-flow: wrap;
    justify-content:space-around;
    box-sizing: border-box;

}
#ul li{
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    padding: 5px;
}
.li_div{
    width: 70px;
    height: 70px;
    border: 1px solid #cccccc;
    border-radius: 15px;
    padding: 5px;
    box-shadow: 0 0 5px #cccccc;
    background-color: #eaa6e8;
    color: #ffffff;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    line-height: 80px;
}
.btn{
    width:400px;
    height: auto;
}
.btn form >input{
    width: 150px;
    height: 40px;
    color: #ffffff;
    text-align: center;
    border: 1px solid #cccccc;
    background-color: #eaaeae;
    border-radius: 10px;
    margin:auto 22px;
    cursor: pointer;
}

3.Javascript代码：

var list; //声明全局变量
window.onload = function () {
    list=document.getElementsByClassName("li_div");
};

var one,two,three;
function begin() {
    recolor();
    //随机产生3个数字
    var leng=list.length;
    one = Math.floor(Math.random()*leng);
    two = Math.floor(Math.random()*leng);
    three = Math.floor(Math.random()*leng);
    //以防随机数相同
    if(one === two){
        one = Math.floor(Math.random()*leng);
    }
    else if(two === three){
        two = Math.floor(Math.random()*leng);
    }
    else if(three === one){
        three =Math.floor(Math.random()*leng);
    }
}
//随机产生颜色
function colors() {
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);
    var rgb ="("+ r +","+g+","+b+")";
    return rgb;
}
//将随机色与三个随机数匹配
function  maxColors() {
    list[one].style.backgroundColor  ="rgb"+colors();
    list[two].style.backgroundColor = "rgb"+colors();
    list[three].style.backgroundColor = "rgb"+colors();
}


var time;
function runner(){   //点击开始颜色的变化
    time = setInterval(function(){
        begin();//调用随机数字
        maxColors();//调用给随机数字加随机色
        },2000);
    }
//setInterval()函数是循环调用其中的内容，先调用随机数函数，再调用给随机数匹配随机色函数
//其中每次三个颜色变化后，又要改回默认值，则在产生随机数中改动，则两个函数循环调用时，
//就可以清除颜色，再产生新的颜色了


function recolor(){  //每次再把随机颜色改回默认颜色
    for(var i = 0; i < list.length; i++){
        if(list[i].style.backgroundColor != "#eaa6e8"){
            list[i].style.backgroundColor="#eaa6e8"
        }
    }
}

function stopper() {   //点击停止颜色的变化
    clearInterval(time);
    for(var i = 0; i < list.length; i++){
        list[i].style.backgroundColor = ' ';
    }
    if(document.getElementById("Stop").value =="点击暂停"){
        document.getElementById("run").value ="点击继续";
    }
}

效果图：

操作前

点击开始后

点击暂停后，点击开始变成点击继续

点击暂停过后，会停在当前的颜色，点击继续后，颜色又会接着随机切换。

今天的九宫格就结束啦，刚刚开始学习用的思维也是很简单的，但是对自己是种锻炼，以后学习的会更多，加油！