JS事件(猜数游戏，抽奖小活动)

目录

1.猜数字游戏

2. 抽奖小活动

1.猜数字游戏

需求：

随机出一个1-100之间的随机整数，让用户去猜

不断地猜，直到猜对为止，需要给用户提醒，大了还是小了，以及猜中了

代码演示 ：

<script>
//获取随机数
let num = Math.floor(Math.random()*100+1);
let count = 0;
do{
  //输入猜的数据
  count++;
  var n =window. prompt("请输入要猜的数据");
  if(n>num){
    alert("猜大了");
  }
  else if(n<num){
    alert("猜小了");
  }else{
    alert("恭喜你，猜对啦，一共猜了"+count+"次 ");
  }
}while(n!=num)
  </script>

运行结果 ：

 

2. 抽奖小活动

当点击开始抽奖按钮之后，会随机在每个员工的名字上展示不同的颜色，最后点击停止抽奖按钮之后，颜色停在哪个员工的名字之上，表示该员工获得本次抽奖；

<table>
    <tr>
      <td>刘亦菲</td>
      <td>周迅</td>
      <td>张韶涵</td>
      <td>赵丽颖</td>
      <td>戚薇</td>
    </tr>

    <tr>
      <td>王祖贤</td>
      <td>蔡依林</td>
      <td>蔡少芬</td>
      <td>王力宏</td>
      <td>宋轶</td>

    </tr>

    <tr>
      <td>钟丽缇</td>
      <td>钟楚红</td>
      <td>黎姿</td>
      <td>孙千</td>
      <td>江疏影</td>
    </tr>
    <tr>
      <td>张凌赫</td>
      <td>予舒心</td>
      <td>宋威龙</td>
      <td>韩红</td>
      <td>景天</td>
    </tr>
    <tr>
      <td>陈赫</td>
      <td>宋茜</td>
      <td>杨超越</td>
      <td>胡歌</td>
      <td>白百合</td>
    </tr>

  </table>

 <script>
      //1.获取按钮并给与绑定事件
      let btn=document.querySelector("button");
      //3.获取所有的表格元素
     let tds= document.querySelectorAll("td");
     //定义变量记录上一次随机的索引
     let lastIndex=0;
     //4.定义按钮变量的状态，分为两个状态，1开始抽奖，2停止抽奖
     let flag=false;//true表示开始抽奖，false表示停止抽奖
     let timeId;
      //2绑定事件
      btn.addEventListener('click',function(){
        //给flag赋值，第一次点击肯定是开始抽奖按钮，那么新的flag=true,会走if判断逻辑，然后第二次点击是停止抽奖按钮，那么！flag=false,就会走else逻辑业务
        flag=!flag;
        if(flag){
         timeId= setInterval(function(){
             //获取随机的表格对应的索引,这个是新的索引
            let newIndex= parseInt(Math.random() * tds.length);
            //然后把上次旧的索引对应的表格颜色背景改为"
            tds[lastIndex].style.backgroundColor="";
            //新的索引对应的表格颜色背景改为pink
            tds[newIndex].style.backgroundColor="#ccc";
            //执行替换背景颜色之后，那么newIndex就是lastIndex
            lastIndex=newIndex;
          },100)
          btn.innerHTML="停止抽奖";
        }else{
          //停止定时器
          clearInterval(timeId);
          btn.innerHTML="开始抽奖";
        }
      })
  </script>