一个超级简单的随机点名系统

需求：点名系统

　　我做的这个点名系统是超级简单的，点击开始就产生随机的数字，选中相应的人，点击停止按钮，就可以停止计时器，定格在选中的那个人哪里。

源代码如下：

html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="someone.css"/>

</head>
<body>
<nav>点名系统</nav>
<content>
    <aside>
        <button id="btn1">开始</button>
        <button id="btn2">停止</button>
        <!--<botton></botton>-->
    </aside>
</content>
<footer>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
</footer>
</body>
</html>
<script src="someone.js"></script

css源代码
*{
    margin:0;
    padding:0;
}
nav{
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: darkcyan;
    marign:100px auto;
    text-align: center;
    font-size: 30px;
    color:mediumseagreen;
}
aside{
    margin:50px 0 0 100px;
    height: 80px;
}
aside>button:nth-child(1){
    height: 50px;
    width: 50px;
    background-color: greenyellow;
    margin-right:50px;
}
aside>button:nth-child(2){
    height: 50px;
    width: 50px;
    background-color: greenyellow;
}
footer{
    width: 1000px;
    height: 1000px;
    margin-left:50px;
}
footer>div{
    float:left;
    height: 50px;
    line-height: 50px;
    width: 100px;
    background-color: #000;
    margin-right:30px;
    margin-top:50px;
    color:white;
    font-size:30px;
    text-align: center;
}


js源代码


/**
 * Created by chenjinyun on 2017/6/26.
 */

var btn1=document.querySelector('#btn1');
var btn2=document.querySelector('#btn2');
var div=document.querySelectorAll('footer>div');
console.log(div);
btn1.onclick=function(){
    btn1.timer=setInterval(function(){
        var index=parseInt(Math.random()*div.length);
        for(var i=0;i<div.length;i++){
            div[i].style.backgroundColor="";
        }
        div[index].style.backgroundColor='yellow';
    },50)
}
btn2.onclick=function(){
    clearInterval(btn1.timer

效果如下：

 


);
}
 






css

posted on 2017-06-26 17:14  陈金云  阅读(703)  评论(0)    收藏  举报

导航