Bagaimana untuk melaksanakan loteri Jiugongge dengan jquery-tutorial js-php.cn

Bagaimana untuk melaksanakan loteri Jiugongge dengan jquery

藏色散人

Lepaskan： 2021-12-01 12:00:31

asal

3580 orang telah melayarinya

Cara melaksanakan loteri Jiugongge dengan jquery: 1. Cipta kod untuk paparan bahagian hadapan; 2. Laksanakan Jiugongge melalui kod jquery "$("#lottery a").click(function(){.. .}" Hanya cabutan hadiah

Bagaimana untuk melaksanakan loteri Jiugongge dengan jquery

Persekitaran pengendalian artikel ini: sistem Windows 7, versi jquery 3.2.1, komputer DELL G3

Bagaimana untuk melaksanakan grid sembilan segi empat dengan jquery

jquery - Contoh Loteri Jiugongge

1 . gambar yang digunakan > 2. Kod adalah seperti berikut, perkara utama Ia adalah bahagian js

Kesannya adalah seperti berikut: 3. Langkah berjaga-jaga

1 Penerangan tentang proses loteri Di atas hanyalah kesan daripada bahagian hadapan-. paparan akhir. Item yang menang dijana melalui nombor rawak

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery九宫格大转盘抽奖</title>
<style>
#lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;}
#lottery table{background-color:yellow;}
#lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-index:-999}
#lottery table td img{display:block;width:190px;height:170px;}
#lottery table td a{width:190px;height:170px;display:block;text-decoration:none;background:url(images/lottery1.jpg) no-repeat top center;}
#lottery table td a:hover{background-image:url(images/lottery2.jpg);}
#lottery table td.active .mask{display:block;}
.mask{
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background:url(images/mask.png) no-repeat;
  display:none;
}
</style>
</head>
<body class="keBody">
<!--效果html开始-->
<div id="lottery">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="lottery-unit lottery-unit-0"><img src="images/gift0.jpg"><div class="mask"></div></td>
      <td class="lottery-unit lottery-unit-1"><img src="images/gift1.jpg"><div class="mask"></div></td>
      <td class="lottery-unit lottery-unit-2"><img src="images/gift2.jpg"><div class="mask"></div></td>
    </tr>
    <tr>
      <td class="lottery-unit lottery-unit-7"><img src="images/gift7.jpg"><div class="mask"></div></td>
      <td><a href="#"></a></td>
      <td class="lottery-unit lottery-unit-3"><img src="images/gift3.jpg"><div class="mask"></div></td>
    </tr>
    <tr>
      <td class="lottery-unit lottery-unit-6"><img src="images/gift6.jpg"><div class="mask"></div></td>
      <td class="lottery-unit lottery-unit-5"><img src="images/gift5.jpg"><div class="mask"></div></td>
      <td class="lottery-unit lottery-unit-4"><img src="images/gift4.jpg"><div class="mask"></div></td>
    </tr>
  </table>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var lottery={
  index:-1,  //当前转动到哪个位置，起点位置
  count:0,  //总共有多少个位置
  timer:0,  //setTimeout的ID，用clearTimeout清除
  speed:20,  //初始转动速度
  times:0,  //转动次数
  cycle:50,  //转动基本次数：即至少需要转动多少次再进入抽奖环节
  prize:-1,  //中奖位置
  init:function(id){
    if ($("#"+id).find(".lottery-unit").length>0) {
      $lottery = $("#"+id);
      $units = $lottery.find(".lottery-unit");
      this.obj = $lottery;
      this.count = $units.length;
      $lottery.find(".lottery-unit-"+this.index).addClass("active");
    };
  },
  roll:function(){
    var index = this.index;
    var count = this.count;
    var lottery = this.obj;
    $(lottery).find(".lottery-unit-"+index).removeClass("active");
    index += 1;
    if (index>count-1) {
      index = 0;
    };
    $(lottery).find(".lottery-unit-"+index).addClass("active");
    this.index=index;
    return false;
  },
  stop:function(index){
    this.prize=index;
    return false;
  }
};

function roll(){
  lottery.times += 1;
  lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
  if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
    clearTimeout(lottery.timer);
    lottery.prize=-1;
    lottery.times=0;
    click=false;
  }else{
    if (lottery.times<lottery.cycle) {
      lottery.speed -= 10;
    }else if(lottery.times==lottery.cycle) {
      var index = Math.random()*(lottery.count)|0;
      lottery.prize = index;    
    }else{
      if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
        lottery.speed += 110;
      }else{
        lottery.speed += 20;
      }
    }
    if (lottery.speed<40) {
      lottery.speed=40;
    };
    //console.log(lottery.times+&#39;^^^^^^&#39;+lottery.speed+&#39;^^^^^^^&#39;+lottery.prize);
    lottery.timer = setTimeout(roll,lottery.speed);//循环调用
  }
  return false;
}

var click=false;

window.onload=function(){
  lottery.init(&#39;lottery&#39;);
  $("#lottery a").click(function(){
    if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
      return false;
    }else{
      lottery.speed=100;
      roll();  //转圈过程不响应click事件，会将click置为false
      click=true; //一次抽奖完成后，设置click为true，可继续抽奖
      return false;
    }
  });
};
</script>
<!--效果html结束-->

</body>
</html>

Salin selepas log masuk

Pembangunan sebenar item yang menang dipulangkan dengan menghantar permintaan ke antara muka belakang

2. Penerangan keserasian

.mask bermula seperti berikut, menggunakan rgba, tetapi IE8 tidak serasi, jadi gunakan latar belakang imej png :url(images/mask.png) no-repeat;Pembelajaran yang disyorkan: "tutorial video jquery

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan loteri Jiugongge dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!