运用javascript写一个简单的点名系统！

最新推荐文章于 2023-04-01 16:21:07 发布

代码大帝

最新推荐文章于 2023-04-01 16:21:07 发布

阅读量370

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_60614034/article/details/127354880

版权

这个项目是我之前写的最初的点名系统，很垃圾。过段时间放上我之前写的高级一点的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        
        .grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

/* .item1 {
  grid-column: 1/ 1;
} */
.fu1{
text-align: center;
}
    </style>
</head>

<body>
  <div id="fu1" class="fu1">
    <h1 aligin="center">点名表</h1>
    <div class="grid-container">
        <div class="item" style="color:black;" id="sss">1</div>
        <div class="item" style="color:black;">2</div>
        <div class="item" style="color:black;">3</div>  
        <div class="item" style="color:black;">4</div>
        <div class="item" style="color:black;">5</div>
        <div class="item" style="color:black;">6</div>
        <div class="item" style="color:black;">7</div>
        <div class="item" style="color:black;">8</div>  
        <div class="item" style="color:black;">9</div>
        <div class="item" style="color:black;">10</div>
        <div class="item" style="color:black;">11</div>
        <div class="item" style="color:black;">12</div>
        <div class="item" style="color:black;">13</div>
        <div class="item" style="color:black;">14</div>
        <div class="item" style="color:black;">15</div>
        <div class="item" style="color:black;">16</div>
        <div class="item" style="color:black;">17</div>
        <div class="item" style="color:black;">18</div>
        <div class="item" style="color:black;">19</div>
        <div class="item" style="color:black;">20</div>
        <div class="item" style="color:black;">21</div>
        <div class="item" style="color:black;">22</div>
        <div class="item" style="color:black;">23</div>
        <div class="item" style="color:black;">24</div>
      
      </div>
      <button id="button1" onclick="dianming()" style="color: black">开始点名</button>
      <button id="button2" onclick="stop()" style="color: black">暂停</button>
    </div>

        

</body>
<script>
    //获取对象
    let item1=document.getElementsByClassName("item")
    let sss=document.getElementById("sss")
    let i=0
    let isStart=true
    let butt=document.getElementById("button1")
    function dianming(){

        // item1[23].style.color="black"
        item1[i].style.color="black"
       dsq= setInterval(() => {
        item1[23].style.color="black"
        if(i>-1&&i<1){
            item1[0].style.color="red"
           i+=1
           }else{
          
        // }else{
       
        // item1[i].style.color="red"
        // item1[i-1].style.color="black"
        
        // i+=1
        // }
        // item1[i-1].style.color="black"
        // if(i=23){
        //     i=0
        //  }
        item1[i].style.color="red"
        item1[i-1].style.color="black"
         i++
         if(i>23){
            i=0
            // item1[23].style.color="black"
         }
        }
       }, 400);
    //    if(i=23){
    //         i=0
    //      }
    }
    function stop(){
clearInterval(dsq)

    }
    
// for(let i=1;i<item1.length+1;i++){


    
// sss.style.color="red"
// items[i].style.color="red"
//     items[i-1].style.color="black"
//     }


</script>
</html>