js实现随机点名表

最新推荐文章于 2022-10-19 23:18:42 发布

醒了吗i

最新推荐文章于 2022-10-19 23:18:42 发布

阅读量963

点赞数

文章标签： js css

本文链接：https://blog.csdn.net/Areyouawake/article/details/106848655

版权

一个简易的点名表

 - css样式

    <style>
        .box{
            width: 350px;
            height: 300px;
            background-color: antiquewhite;
            margin: 0 auto;
            text-align: center;
        }
        #names{
            width: 260px;
            height: 260px;
            line-height: 260px;
            background-color: aquamarine;
            margin: 0 auto;
            font-size: 32px;
            color: red;
        }
    </style>
    
 - body部分
<body> 

<div class="box">
        <div id="names">点名了！！</div>
        <button onclick="start()">开始</button>
        <button onclick="end()">停止</button>
    </div>
 - script部分
     <!-- 随机点名效果 -->
   <script>
       var names = document.getElementById('names');
       var timeId;
       //封装的事随机显示名字的代码
       function start(){
           //数组，存放学生的名字
           var arr = ['亚瑟','不知火舞','安琪拉','貂蝉','鲁班七号'];
           timeId = setInterval(function(){
               //随机从数组里去元素
               var num = parseInt(Math.random() *arr.length)
               names.innerHTML=arr[num];
           },200)
 
       }
      // 清除事件
       function end(){
               clearInterval(timeId);
           }
           
   </script>
   
</body>

醒了吗i

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js实现随机点名表

一个简易的点名表 - css样式 <style> .box{ width: 350px; height: 300px; background-color: antiquewhite; margin: 0 auto; text-align: center; } #names{ width: 260
复制链接

扫一扫