点名册

最新推荐文章于 2021-10-12 21:37:40 发布

原创最新推荐文章于 2021-10-12 21:37:40 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

j 专栏收录该内容

5 篇文章

订阅专栏

这是一个简单的HTML网页抽奖程序，通过JavaScript实现。点击按钮或按空格键开始抽奖，随机从预设的人员名单中抽取中奖者，抽完后按钮变为'抽奖完毕'并清空显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04.抽奖</title>
<style>
  *{
   margin:0;
   padding:0;
  }
  body{
   background: black;
  }
  #btn{
   position: absolute;
   left:600px;
   top:100px;
   /*background-color: red;*/
   font-size:80px;
   color: green;
   cursor: pointer;
  }
  #con{
   width: 100%;
   height: 600px;
   text-align: center;
   line-height: 600px;
   font-size: 120px;
   color: red;
  }
</style>
</head>
<body>
<button id="btn">start</button>
<div id="con">某某某</div>
<script>
  // 获取按钮
  var btn = document.getElementById('btn');
  // 获取div（名字显示区域）
  var con = document.getElementById('con');
  // 定义数组（所要点名的人）
  var arr = ['郭德纲','钢的锅','宋丹丹','单单送','杨帆','起航','张海超','张海草','张海洋','海洋里的张海草'];
  var sub;// 定义sub，用于存放arr数组的下标
  var timer = null;// 用于存放定时器
  function fun(){
   // console.log('aaa');
   if(arr.length > 0){
    // 随机获取arr数组的下标 // 赋给sub
    sub = Math.floor(Math.random()*arr.length);//
    var str = arr[sub];// 将该下标内容赋给str
    con.innerHTML = str;// 将str赋给div的innerHTML
   }else{
    btn.innerHTML = '抽奖完毕';
    con.innerHTML = '';
    removeEvent(btn,'click',begin,false);
    clearInterval(timer);
   }

  }
  // 定义添加事件兼容函数
  function addEvent(ele,event,fun,tf){
   if(ele.attachEvent){
    ele.attachEvent('on'+event,fun);
   }else{
    ele.addEventListener(event,fun,tf);
   }
  }
  // 定义移除事件兼容函数
  function removeEvent(ele,event,fun,tf){
   if(ele.detachEvent){
    ele.detachEvent('on'+event,fun);
   }else{
    ele.removeEventListener(event,fun,tf);
   }
  }
  // 定义函数（实现点击按钮，div的内容变化与停止）
  function begin(){
   // 判断按钮是开启或是关闭
   if(btn.innerHTML == 'start'){
    // 定时器
    timer = setInterval(fun,10);
    // 按钮开启则给出关闭条件
    btn.innerHTML = 'stop';
   }else if(btn.innerHTML == 'stop'){
    // 关闭定时器
    clearInterval(timer);
    // 给出按钮开启条件
    btn.innerHTML = 'start';
    // 删除关闭时所显示的数组项
    arr.splice(sub,1);
   }
  }
  // 为按钮添加点击事件
  addEvent(btn,'click',begin,false);

  window.onkeyup = function(evt){
   var event = evt || window.event;
   event.preventDefault();
   var keynum = event.keyCode||event.which;
   // 当按下32（空格）时，执行bagin函数
   if(keynum == 32){
    begin();
   }
  }
</script>
</body>
</html>

结果如下：