C\#MVC 모드 에서 상품 추첨 기능 실현

최근 프로젝트 에 필요 한 추첨 기능 을 정리 해 주 었 습 니 다.언어 표 현 력 이 좋 지 않 습 니 다.잘 쓰 지 못 했 으 니 토로 하지 말고 웃 으 며 지나 가면 됩 니 다.자,다음은 이 추첨 기능 에 대해 말씀 드 리 겠 습 니 다.회사 의 프로젝트 와 관련 되 기 때문에 일부 민감 한 부분 은 모두 중국어 로 대체 되 었 다.
우선 배경 에 상품 의 명칭 과 확률 을 그림 과 같이 추가 합 니 다.

백 엔 드 코드 는 할 말 이 없습니다.전단 코드 를 보 겠 습 니 다.
html 를 통 해 다음 과 같은 스타일 을 만 듭 니 다:

 <div class="turntable-bg">
       
          <div class="pointer">
            <img id="pointer" src="~/Content/images/pointer.png" alt="pointer" />
          </div>
          <div class="rotate">
            <img id="turntable" src="~/Content/images/turntable.png" alt="turntable" />
          </div>
        </div>



여 기 는 그림 을 자 를 때의 각도 에 주의해 야 한다.그렇지 않 으 면 회전 후 대응 하 는 각도 가 틀 렸 다.
다음은 추첨 지침 에 클릭 이벤트 추가:

function rotate() {
    $.ajax({
      type: 'POST',
      url: '/   /  ',
      dataType: 'json',
      cache: false,
      error: function () {
        alert('   !');
        return false;
      },
      success: function (data) {
        if (data == 1 || data == -3) {
          var bRotate = true;
          if (data == 1) {
            alert("   !");
          }if (data == -3) {
            alert("   ,      !")
          }
        }
        else {
          var angles = parseInt(data.angle); //    
          var txt = data.prize; //    
          var awards = parseInt(data.id);
          var bRotate = false; //  bRotate  true        
          var rotateFn = rotateFn_method(awards, angles, txt);

          if (bRotate) return;

          switch (awards) {
            case 0:
              //var angle = [26, 88, 137, 185, 235, 287, 337];
                // rptateFn_method           ,0,337             ,          

              rotateFn_method(0, 337, '    ');
              break;
            case 1:
              //var angle = [88, 137, 185, 235, 287];
              rotateFn_method(1, 26, '    ');
                break;
              case 2:
                //var angle = [137, 185, 235, 287];
                rotateFn_method(2, 88, '    ');
              break;
            case 3:
              //var angle = [137, 185, 235, 287];
              rotateFn_method(3, 137, '    ');
              break;
            case 4:
              //var angle = [185, 235, 287];
              rotateFn_method(4, 185, '    ');
              break;
            case 5:
              //var angle = [185, 235, 287];
              rotateFn_method(5, 235, '    ');
              break;
            case 6:
              //var angle = [235, 287];
              rotateFn_method(6, 235, '    ');
              break;
            case 7:
              //var angle = [287];
              rotateFn_method(7, 282, '    ');
              break;
          }
        }

      }
    });
  }

  //    
  function rotateFn_method(awards, angles, txt) {
    var bRotate = false;
    bRotate = !bRotate;
    $('#turntable').stopRotate();
    $('#turntable').rotate({
      angle: 0,
      animateTo: angles + 1800,
      duration: 8000,
      callback: function () {
          $("#Pl h4").html("     " + txt + "");
        }
        bRotate = !bRotate;
      }
    })
  };
//      
  function locateEnd() {
    window.location.reload();
  }


이렇게 하면 페이지 의 돌 림 판 은 회전 하고 상품 을 팝 업 할 수 있 습 니 다.js 에서 주석 이 비교적 명확 해 야 합 니 다.저 는 js 에 대해 설명 을 많이 하지 않 겠 습 니 다.다음은 컨트롤 러 에서 확률 을 계산 하 는 논 리 를 말씀 드 리 겠 습 니 다.확률 계산 을 js 에 쓰 지 않 는 이 유 는 js 파일 이 쉽게 변경 되 기 때문에 모두 가 알 고 있 을 것 입 니 다.말 이 많 지 않 습 니 다.아래 코드 는:

//         
      if (admin != null)
      {
         //         ,  1
        var LdList = hr.LuckdrawList();
         //                        
        List<double> dt = LdList.Select(i => i.  ).ToList();
         //      
        double[] Array = dt.ToArray();
        //  
        int angle = 0;
        //  
        var prize = "";
        var id = 0;
         //       ,     Get                    
        var Pl = Get(Array);
         //        Pl   
        var model = LdList[Pl];
           // id , angle     prize   
if (model.     == 1)
          {
            angle = 26;
            prize = model.  ;
            id = 1;
          }
          if (model.     == 7)
          {
            angle = 88;
            prize = model.  ;
            id = 2;
          }
          if (model.     == 4)
          {
            angle = 137;
            prize = model.  ;
            id = 3;
          }
          if (model.     == 3)
          {
            angle = 185;
            prize = model.  ;
            id = 4;
          }
          if (model.     == 6)
          {
            angle = 235;
            prize = model.  ;
            id = 5;
          }
          if (model.     == 2)
          {
            angle = 282;
            prize = model.  ;
            id = 7;
          }
          if (model.     == 5)
          {
            angle = 337;
            prize = model.  ;
            id = 0;
          }
          return Json(new { angle = angle, prize = prize, id = id });
        }return Json(data);
      }


확률 을 계산 하 는 부분:

/// <summary>
    ///       
    /// </summary>
    /// <param name="prob">        </param>
    /// <returns>              </returns>
    private static int Get(double[] prob)
    {
      int result = 0;
      int n = (int)(prob.Sum() * 1000);      //      ,  1000 
      Random r = rnd;
      float x = (float)r.Next(0, n) / 1000;    //    0~       

      for (int i = 0; i < prob.Count(); i++)
      {
        double pre = prob.Take(i).Sum();     //    
        double next = prob.Take(i + 1).Sum();  //    
        if (x >= pre && x < next)        //         ,         
        {
          result = i;
          break;
        }
      }
      return result;
    }
    private static Random rnd = new Random();

 기본적으로 이 정도 입 니 다.부족 한 점 이 있 으 면 보충 해 주세요.읽 어 주 셔 서 감사합니다.

좋은 웹페이지 즐겨찾기