简单 4 x 4 抽奖 demo

最新推荐文章于 2023-10-27 14:17:59 发布

天为我蓝

最新推荐文章于 2023-10-27 14:17:59 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shaohw/p/5456348.html

本文展示了一个简单的4x4抽奖游戏的实现过程，通过HTML、CSS和JavaScript编写了一个交互式的抽奖界面，用户点击“点我抽奖”按钮即可进行抽奖，每次抽奖结果随机产生，并显示相应的奖品。

这是一个简单的 4x4 抽奖的 demo。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
          *{padding:0;margin:0;}
          .box{width: 400px;height: 400px;margin: 140px auto 0}
          .img1{background: pink;}
          .img2{background: gold;}
          .img3{background: red;}
          .img4{background: blue;}
          .img5{background: purple;}
          .img6{background: green;}
          table{width: 100%;height:100%;}
          tr{width: 100%;height: 25%;}
          td{width: 25%;height:25%;}
          #start{text-align: center;}
        </style>
    </head>
    <body>
    <div class="box">
      <table>
        <tr>
          <td class="img1" prize="感谢参与！"></td>
          <td class="img2" prize="恭喜获得ipad！"></td>
          <td class="img3" prize="感谢获得耳机！"></td>
          <td class="img4" prize="感谢获得鞋子！"></td>
        </tr>
        <tr>
          <td class="img5"  prize="感谢获得手机！"></td>
          <td colspan="2" rowspan="2"  id="start">点我抽奖</td>
          <td class="img6"  prize="感谢获得布娃娃！"></td>
        </tr>
        <tr>
          <td class="img1"  prize="感谢获得手机！"></td>
          <td class="img2"  prize="感谢获得布娃娃！"></td>
        </tr>
        <tr>
          <td class="img3" prize="感谢参与！"></td>
          <td class="img4" prize="恭喜获得ipad！"></td>
          <td class="img5" prize="感谢获得耳机！"></td>
          <td class="img6" prize="感谢获得鞋子！"></td>
        </tr>
      </table>
    </div>
    <script>
      var startNum = 0;
      var str = document.getElementById("start");
      str.onclick = function(){
        running();
      }

      function running() {
        var runing = false;
        if(runing === false) {
          runing = true;
          var td = document.getElementsByTagName("td");
          var len = td.length;
          randomLen = random(2*len, 3*len);
          var num = startNum;
          var speed = 50;
          var flag = true;
          var timer = setInterval(function(){
            for(var i= 0; i<len; i++) {
              td[i].style.background = "";
            };
            td[num].style.background = "#000";
            if(speed > randomLen * 20) {
              clearInterval(timer);
              flag = true;
              num === 1 ? num = 2 : " ";
              startNum = num;
              runing = false;
              alert(td[num].getAttribute("prize"));
            };

            if( num === 3 ) {
              num += 3;
            } else if( num === 6) {
              num += 2;
            } else if( num === 8) {
              num += 4;
            } else if(num >= 10 && num <= 12 ) {
              num --;
            } else if( num === 9) {
              num -= 2;
            }  else if( num === 7) {
              num -= 3;
            } else if( num === 4) {
              num -= 4;
            }else {
              num ++;
            };
            if(speed > 0 && flag) {
              speed -= 10;
            }else {
              flag = false;
              speed += 20;
            }
            console.log(speed);
          },speed);
        }else {
          return false;
        }
      };

      function random(min , max) {
        return Math.floor(min + Math.random() * (max - min));
      };

    </script>
    </body>
</html>