关于js实现一个简单的点名器

javascript 实现简单点名器

 - 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>
  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值