抽獎代碼

時間 2019-11-24

標籤抽獎代碼简体版

原文原文鏈接

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="renderer" content="webkit">

<title>年會節慶等活動經常使用數字滾動抽獎js特效代碼</title>

<meta name="keywords" content="年會,節慶,活動,經常使用,數字滾動,抽獎,js特效代碼" />

<meta name="description" content="年會節慶等活動經常使用數字滾動抽獎js特效代碼。" />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

function stops(){

return false;

}

document.oncontextmenu=stops;

</script>

<style>

*{margin:0;padding:0;}

img{display:block;}

i{font-style:normal;}

.vetically{justify-content:center;align-items:center;display:-webkit-flex;}

.prize_con{position: absolute;width: 100%;height: 100%;background: url(https://wx.houxiaoshan.com/choujiang/firstp_bg.jpg) no-repeat left top / 100% 100%;overflow: hidden;}

.prize_grade{font-size:98px;color: #ffe9af;text-align: center;margin: 60px auto 0;}

.prize_list{width:55%;height:230px;margin: 20px auto 55px;text-align: center;overflow: hidden;}

.prize_list ul{width:100%;font-size:0;}

.prize_list li{display:inline-block;font-size:45px;color:#f1bf90;text-align: center;width:20%;line-height:50px;font-family:Arial;}

.start{width: 250px;height: 90px;margin:0 auto;cursor:pointer;}

.prize_set{position: absolute;right: 60px;bottom:140px;font-size: 16px;color: #f7f3e8;line-height: 30px;}

.prize_set li{display: inline-block;margin-left: 20px;}

.set_grade select,.set_people input, .set_money input{background: #fff;width:110px;height:36px;border:1px solid #8f0000;margin-left: .1rem;color: #000;padding-left:10px;}

</style>

</head>

<body>

<div class="wrap">

<div class="prize_con">

<p class="prize_grade"><span>開始抽獎</span></p>

<div class="prize_list vetically">

<ul>

<li>000</li>

<li>000</li>

<li>000</li>

<li>000</li>

<li>000</li>

<li>000</li>

<li>000</li>

<li>000</li>

<li>000</li>

<li>000</li>

</ul>

</div>

<p class="start"><img src="https://wx.houxiaoshan.com/choujiang/prize_start.png" alt=""></p>

<ul class="prize_set">

<li class="set_grade">獎等

<select id="set_grade">

<option>選擇獎等</option>

<option>特等獎</option>

<option>一等獎</option>

<option>二等獎</option>

<option>三等獎</option>

</select>

</li>

<li class="set_people">人數<input type="tel" placeholder="輸入中獎人數" id="prizeCount"></li>

</ul>

</div>

</div>

<input type="hidden" value="0" id="prize_btn">

<script>

var myNumber;

var arr = [];

var code = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80];

/*隨機全部的code而且不重複*/

function showRandomNum(num) {

var li = "";

arr = [];

for(var i = 0; i < code.length; i++){

arr[i] = i;

//console.log(arr[i]); //取到的數是0-79；

}

arr.sort(function(){

return 0.5 - Math.random();

});

console.log(arr) //數組有80個數，0-79

for(var i = 0; i < num; i++){

var index = arr[i];

li += '<li>'+code[index]+'</li>';

}

//console.log(code[index]);

$(".prize_list ul").html(li);

}

$(function () {

$(".start").click(function(){

if($("#prize_btn").val() == 0){

if($("#set_grade").val() == "選擇獎等") {

alert("請選擇獎等");

return;

}else if($("#prizeCount").val() == "") {

alert("請輸入中獎人數");

return;

}else if($("#prizeCount").val() > 10) {

alert("單次抽獎人數不能超過10人");

return;

}else{

$("#prize_btn").val(1);

var num = $("#prizeCount").val();

$(this).find("img").attr("src","https://wx.houxiaoshan.com/choujiang/prize_stop.png");

myNumber = setInterval(function(){

showRandomNum(num);

}, 30);

}

}else{

$("#prize_btn").val(0);

clearInterval(myNumber);

$(this).find("img").attr("src","https://wx.houxiaoshan.com/choujiang/prize_start.png");

//console.log( $(".prize_list ul"));

var a = $(".prize_list ul li").length;

//console.log(a);

for(var b=0;b<a;b++){

//console.log(b);

var value = $(".prize_list ul").find("li").eq(b).html();

console.log(value); //中獎的數字

for(var x=0;x<code.length;x++){

if(code[x]==value){

code.splice(x,1);

}

}

}

console.log(code);

}

});

//回車鍵控制開始和中止

$(document).keydown(function (event) {

var e = event || window.event || arguments.callee.caller.arguments[0];

if (e && e.keyCode == 13) { // enter 鍵

$(".start").click();

}

});

$("#set_grade").change(function(){

$(".prize_grade span").text($(this).val());

});

});

</script>

</body>

</html>

相關文章

相關標籤/搜索

Python實戰+抽獎

Hibernate教程

代碼格式化

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<