[散修弟子]CSS-7394|2019年01月08日的日报-技能树.IT修真院

发表于： 2019-01-08 15:29:41

2 630

今天完成的事情：

1. 开始JS任务一的学习

1.1 给九宫格加两个按钮

1.2 给第一个按钮加随机闪，并定时每1秒触发

1.3 给第二个按钮加停止闪，并取消定时

效果：

布局：

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="UTF-8">
   <title>九宫格闪</title>
   <link rel="icon" type="image/x-icon" href="../images/icon.png"/>
   <!--Bootstrap-->
   <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="../css/index_js.css" >


</head>
<body>
<header class="header">
   <div id="y1" class="yellow">

   </div>
   <div id="y2" class="yellow">

   </div>
   <div id="y3" class="yellow">

   </div>
   <div id="y4" class="yellow">

   </div>
   <div id="y5" class="yellow">

   </div>
   <div id="y6" class="yellow">

   </div>
   <div id="y7" class="yellow">

   </div>
   <div id="y8" class="yellow">

   </div>
   <div id="y9" class="yellow">

   </div>
</header>

<section class="content">
   <button id="btnStart" class="content-btn1 btn btn-success">开始闪</button>
   <button id="btnStop" class="content-btn2 btn btn-success">结束闪</button>
</section>


<script src="index_js.js"></script>
<!--Bootstrap-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

样式：

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    box-sizing: border-box;
    outline: none;
}

html,
body {
    width: 100%;
    height: 100%;
    background-color: #fff;
    font-size: 10px;
    min-width: 320px;
}

/*防止高度坍塌*/
.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
    clear: both;

}


/**********************头部开始*********************/
.yellow {
    position:relative;
    width:31%;
    border: 0 solid yellow;
    padding-top: 31%;
    margin: 1%;
    background-color:#fea500;
    float:left;
    border-radius: 5%;
}

/**********************头部结束*********************/


/**********************内容开始*********************/
.content {
    text-align: center;
}
.content-btn1 {
    background-color: #fea500;
    width: 95%;
    margin: 2% auto;
}

.content-btn2 {
    background-color: #fea500;
    width: 95%;
    margin: 2% auto;
}

/**********************内容结束*********************/


/**********************尾部开始*********************/

/**********************尾部结束*********************/

JS：


// 开始按钮
document.getElementById("btnStart").onclick = function () {timing()
};

// 闪函数
function startPlay() {
    let arr = ['y1', 'y2', 'y3',
        'y4', 'y5', 'y6',
        'y7', 'y8', 'y9'];
    for (let i = 0; i < arr.length; i++) {
        document.getElementById(arr[i]).style.backgroundColor = "#fea500";
    }

    var grid1;
    var grid2;
    var grid3;
    while (true) {
        const num1 = Math.floor(Math.random()*arr.length);
        const num2 = Math.floor(Math.random()*arr.length);
        const num3 = Math.floor(Math.random()*arr.length);
        grid1 = arr[num1];
        grid2 = arr[num2];
        grid3 = arr[num3];

        if (num1 !== num2 && num1 !== num3 && num2 !== num3) {
            console.log(num1);
            console.log(num2);
            console.log(num3);
            document.getElementById(grid1).style.backgroundColor= "#f00";
            document.getElementById(grid2).style.backgroundColor= "#0f0";
            document.getElementById(grid3).style.backgroundColor= "#00f";
            return;
        }

    }
}

// 定时闪函数， 函数不用加括号
var id;
function timing() {
    id = window.setInterval(startPlay, 1000);
}

// 结束闪函数
document.getElementById("btnStop").onclick = function () { stopPlay() };
function stopPlay() {
    let arr = ['y1', 'y2', 'y3',
        'y4', 'y5', 'y6',
        'y7', 'y8', 'y9'];
    for (let i = 0; i < arr.length; i++) {
        document.getElementById(arr[i]).style.backgroundColor = "#fea500";
    }

    // 结束定时闪函数
    window.clearInterval(id);
}