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();
기본적으로 이 정도 입 니 다.부족 한 점 이 있 으 면 보충 해 주세요.읽 어 주 셔 서 감사합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
WebView2를 Visual Studio 2017 Express에서 사용할 수 있을 때까지Evergreen .Net Framework SDK 4.8 VisualStudio2017에서 NuGet을 사용하기 때문에 패키지 관리 방법을 packages.config 대신 PackageReference를 사용해야...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.