点名器

游鹄君2025年4月30日大约 1 分钟

提示

建议学习完本章节知识再看本示例

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>点名器</title>
  <style type="text/css">
    *{margin:0px;padding:0px;}
    #all{width:500px;height:500px;border:solid 1px blue;position:absolute;left:300px;top:50px;}
    #names{width:200px;height:100px;border:solid 1px yellow;position:absolute;left:150px;top:100px;color:blue;line-height:100px;text-align:center;}
    #start{width:80px;height:50px;border:solid 1px green;position:absolute;left:150px; top:260px;color:green;line-height:50px;text-align:center;cursor:pointer;}
    #stop{width:80px;height:50px;border:solid 1px red;position:absolute;left:260px;top:260px;color:red;line-height:50px;text-align:center;cursor:pointer;}
  </style>
</head>
<body>
  <div id='all'>
    <div id='names'>名字</div>
    <div id='start'>开始</div>
    <div id='stop'>停止</div>
  </div>
  <script type="text/javascript">
  var names=document.getElementById('names');
  var start=document.getElementById('start');
  var stop=document.getElementById('stop');
  var into=null;
  
  //
  start.onclick=function()
  {
    
    if(into==null)
    {
     //定时器
     into=setInterval(function(){
 
       //名字
       var ming = ['熊朝杰','郝鑫','刘欢','刘鹤文','范新恒','韩春雷','王向前','韩兵','张康','卢伟帅','王兵兵','张筱','冯海笛','高鹏','李清波','杨德升','傅斌','甘元禄','谢朋','左笑笑','高聪','于小然','牛学斌','乔彪','王东明','桂世均','宋伟','韩松涛','申福丽','王东彦','孟凯','计熠阳','顾辉','丁超','王琛晔','常博康','纪玉新','吕明泽','李强','谢志娟','吴晓蝶','赵思雨','刘俊','张少强','谢旭阳','李孟尧'];
       //通过下标获取名字
       names.innerHTML=ming[rand(0,ming.length-1)];
       
     },100)
    }
  }
 
  //随机数
  function rand(m,n)
  {
    return Math.ceil(Math.random()*(n-m+1))+(m-1);
  }
 
  //停止
  stop.addEventListener('click',function(){
 
    clearInterval(into);
    into=null;
  })
 
  </script>
</body>
</html>