一款不错的JS制作在线抽奖系统,配合json实现实时抽奖

  • 内容
  • 相关
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">    
<html>    
<head>    
<title>    
源创会抽奖    
</title>    
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>    
<script type="text/javascript" src="http://oschina.net/js/wind/wind-core.js">    
</script>    
<script type="text/javascript" src="http://oschina.net/js/wind/wind-compiler.js">    
</script>    
<script type="text/javascript" src="http://oschina.net/js/wind/wind-builderbase.js">    
</script>    
<script type="text/javascript" src="http://oschina.net/js/wind/wind-async.js">    
</script>    
<link rel="stylesheet" type="text/css" href="http://oschina.net/css/reset_y.css">    
<style type="text/css">    
body{    
background-color:#FFF;    
font-family: 微软雅黑, Verdana, sans-serif, 宋体;    
}    
.controls{    
background-color:#EEE;    
height:50px;    
line-height:50px;    
text-align:center;    
}    
.controls input,.controls button{    
height:25px;    
margin:12px 0px;    
}    
.controls button{    
margin-left:10px;    
line-height:normal;    
}    
.controls input#choose_count{    
margin-left:10px;    
}    
.canvas{    
text-align:center;    
margin-top: 5px;    
}    
.canvas li{    
width:40px;    
height:40px;    
float:left;    
margin:4px;    
text-align:center;    
line-height:40px;    
border:2px solid #FFF;    
-webkit-transition: width 0.4s ease,height 0.4s ease;    
-moz-transition: width 0.4s ease,height 0.4s ease;    
-ms-transition: width 0.4s ease,height 0.4s ease;    
-o-transition: width 0.4s ease,height 0.4s ease;    
transition: width 0.4s ease,height 0.4s ease;    
}    
.canvas li img{    
width:40px;    
height:40px;    
}    
.canvas li.active{    
border:2px solid #A00;    
color:#FFF;    
}    
.chosen{    
position: absolute;    
width: 200px;    
height:250px;    
text-align:center;    
background-color: #EEE;    
color: #A00;    
font-size: 30px;    
display: none;    
}    
.chosen{    
background:url("") no-repeat;    
background-size:200px 200px;    
}    
.chosen .name{    
word-break:break-all;    
background-color: #FFF;    
position:absolute;    
bottom:0;    
left:0;    
text-align:center;    
width:100%;    
}    
.winners li{    
width:60px;    
height:60px;    
float:left;    
line-height: 60px;    
text-align: center;    
border: 1px solid #CCC;    
margin: 5px;    
}    
.winners li img{    
width:60px;    
height:60px;    
}    
.winners .title{    
margin: 5px;    
}    
.blink .name{    
font-size:60px;    
-webkit-transition: font-size 0.4s ease;    
-moz-transition: font-size 0.4s ease;    
-ms-transition: font-size 0.4s ease;    
-o-transition: font-size 0.4s ease;    
transition: font-size 0.4s ease;    
}    
@media (max-width: 1024px){    
.canvas li{    
width:30px;    
height: 30px;    
margin:2px;    
line-height: 30px;    
font-size: 12px;    
}    
.canvas li img{    
width:30px;    
height:30px;    
}    
}    
</style>    
</head>    
<body>    
<div class="controls">    
总人数:    
<span style="color:#A00">    
200    
</span>    
,抽奖人数:    
<input type="text" id="choose_count" placeholder="抽奖人数" value="20"/>    
<button id="lottery">    
抽奖    
</button>    
</div>    
<div class="canvas clearfix">    
<ul>    
</ul>    
</div>    
<div class="chosen">    
<div class="img">    
</div>    
<div class="name">    
</div>    
</div>    
<div class="winners">    
<div class="title">    
中奖者(<span id="winner_count">0</span>)    
<a href="javascript:showWinners();">    
<span style="font-size:14px;">    
查看获奖名单    
</span>    
</a>    
</div>    
<ul>    
</ul>    
</div>    
</body>    
</html>    
<style></style>     
<script>var winners = [];    
var sound1, sound2, sound3;    
var allCount = function() {    
return 200;    
};    
var loadSongs = function() {    
sound1 = new Audio("http://www.oschina.net/uploads/e.wav");    
sound1.load();    
sound2 = new Audio("http://www.oschina.net/uploads/e2.wav");    
sound2.load();    
sound3 = new Audio("http://www.oschina.net/uploads/e3.wav");    
sound3.load();    
};    
var buildLi = function(count){    
var canvas = $(".canvas");    
var hdimages = [    
"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/253224_100.jpg",    
"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/130291_100.jpg",    
"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/139572_100.jpg",    
"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/127735_100.jpg",    
"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/571282_100.jpg",    
"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/590093_100.jpg",    
"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/912704_100.jpg",    
"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/933828_100.jpg"    
];    
var li = "<li><img src='{img}' onerror=\"this.src='http://oschina.net/img/group/man.gif'\" data-name=\"{name}\"/></li>";    
var html = [];    
for(var i=0;i<count;i++){    
var image_index = Math.round(Math.random()*hdimages.length);    
html.push(li.replace(/\{img\}/ig,hdimages[image_index]).replace(/\{name\}/ig,'OSCER'+Math.round(Math.random()*100)));    
}    
canvas.html(html.join('\n'));    
};    
var showWinners = function() {    
var args = jQuery.map(winners,function(v) {    
return v + 1;    
}).join(",");    
location.href = "?" + args;    
};    
var addWinner = eval(Wind.compile("async",function(no) {    
var target = $(".canvas li").eq(no).find("img");    
var chs = $(".chosen");    
var win = $(".winners ul");    
winners.push(no);    
var li = $("<li></li>");    
var src = target.attr("src");    
var img = $("<img/>").attr("src", src);    
li.append(img);    
win.append(li);    
$("#winner_count").html(winners.length);    
chs.addClass("blink");    
$await(Wind.Async.sleep(1200));    
chs.removeClass("blink");    
}));    
var resetChosenPos = function() {    
var chs = $(".chosen");    
var w = $(window).width();    
var h = $(window).height();    
var cw = chs.width();    
var ch = chs.height();    
chs.css({    
left: w / 2 - cw / 2,    
top: h / 2 - ch / 2    
});    
};    
var doResponsive = function() {    
resetChosenPos();    
};    
var showChosen = eval(Wind.compile("async",function(idx) {    
var target = $(".canvas li").eq(idx).find("img");    
var chs = $(".chosen").show();    
chs.css({    
"background": "url('" + target.attr("src") + "') no-repeat",    
"background-size": "200px 200px"    
});    
chs.find(".name").html(target.data("name"));    
}));    
var animate = eval(Wind.compile("async",function(idx) {    
var others = $(".canvas li").removeClass("active");    
var target = $(".canvas li").eq(idx).addClass("active");    
$await(showChosen(idx));    
}));    
var buildCanvas = function(count) {    
var canvas = $(".canvas").html("");    
var ul = $("<ul></ul>");    
for (var i = 0; i < count; i++) {    
var li = $("<li></li>");    
li.html(i + 1);    
ul.append(li);    
};    
canvas.append(ul);    
};    
var finishLottery = function() {    
var chs = $(".chosen");    
chs.fadeOut();    
$(".canvas li").removeClass("active");    
$("#lottery").removeAttr('disabled')    
};    
var heartBeat = eval(Wind.compile("async",function(interval, count, itv, max_winner) {    
var c = itv;    
if (max_winner <= winners.length || allCount() <= winners.length) {    
finishLottery();    
return;    
}    
while (true) {    
var no = 0;    
do {    
no = Math.floor(Math.random() * count);    
} while ( jQuery . inArray ( no , winners ) != -1);    
try {    
sound1.play();    
} catch(e) {}    
$await(animate(no));    
$await(Wind.Async.sleep(interval));    
if (--c == 0) {    
c = itv;    
$await(addWinner(no));    
}    
if (max_winner <= winners.length || allCount() <= winners.length) {    
finishLottery();    
break;    
}    
}    
}));    
loadSongs();    
$(window).resize(doResponsive);    
var count = allCount();    
var max_winner = 0;    
var animation_count = 10;    
var itv = 100; //ms    
buildLi(count);    
$("#lottery_count").val(count);    
$("#lottery").on("click",function() {    
if ($(this).attr('disabled')) {    
return;    
}    
if (parseInt($("#choose_count").val()) > count) {    
alert("抽奖人数不能大于总人数!");    
return;    
}    
$(this).attr('disabled', 'disabled');    
max_winner += parseInt($("#choose_count").val());    
resetChosenPos();    
heartBeat(itv, count, animation_count, max_winner).start();    
});</script>

RunJS在线演示代码 http://sandbox.runjs.cn/show/9xk5mrc0

本文标签:

版权声明:若无特殊注明,本文皆为《鬼少》原创,转载请保留文章出处。

本文链接:一款不错的JS制作在线抽奖系统,配合json实现实时抽奖 - http://tv1314.com/post-125.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

2条评论
  1. avatar

    小刀 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

    [织]

    美国 新泽西州Linode公司

    00:00 / 00:00
    顺序播放