您的位置：首页 > Web前端 > JQuery

用jquery写的”抽奖“小游戏的转盘。顺带选人

2015-10-08 21:47 736 查看

首先在你的html页面导入jquery包<script type="text/javascript" src="jquery-2.1.3.min.js"></script> //附件中也有

然后做好你的页面内容

样式文件 <link rel="stylesheet" type="text/css" href="css/test.css"></link> / / 附件中有，就不说明了

<body bgcolor="rbg(cc,ff,ff)">

<div style="margin-left: 300px;">

<div class="sup" style="height:60px;">

<input type="button" class="btnclass" id="manbtn" value="选人">

<input type="button" class="btnclass" id="okbtn" value="停止">

</div>

<div class="sup" style="height:80px;">

<span id="manspan" style="width: 220px; height: 100px;">0</span>

<span

id="namespan" style="width: 220px; height: 100px;"></span>

</div>

<div class="sup" style="height:80px;"> 

<input type="button" class="btnclass" id="gobtn" value="翻牌">

<input type="button" class="btnclass" id="stopPai" value="停牌">

<input type="button" class="btnclass" id="gobtn2" value="盖牌">

</div>

<div class="sup"> 

<div class="line" id="d1"></div>

<div class="line2" id="p1" style="display: none"></div>

<div class="line" id="d2"></div>

<div class="line2" id="p2" style="display: none"></div>

<div class="line" id="d3"></div>

<div class="line2" id="p3" style="display: none"></div>

</div>

<div class="sup">

<div class="line" id="d8"></div>

<div class="line2" id="p8" style="display: none"></div>

<div class="line" style="visibility:hidden" ></div>

<div class="line2" style="display: none"></div>

<div class="line" id="d4"></div>

<div class="line2" id="p4" style="display: none"></div>

</div>

<div class="sup">

<div class="line" id="d7"></div>

<div class="line2" id="p7" style="display: none"></div>

<div class="line" id="d6"></div>

<div class="line2" id="p6" style="display: none"></div>

<div class="line" id="d5"></div>

<div class="line2" id="p5" style="display: none"></div>

</div>

<input id="hid" type="hidden" value = "1"/>

</div>

</body>

下面是js代码

var c = 1;

var t;

var t2;

//定义人名数组和游戏数组

var nameArray = [ "刘", "政", "山", "杰", "丹", "鹏", "鄢", "黄", "飞",

"柳", "斌", "超", "江", "宣", "宏", "蝶", "热", "世" ];

var gameArray = [ "1.与下一位被选中的人一起跳钢管舞", "2.对着旁边的同事，嗲声的说：“死鬼，臣妾卖身不卖艺哟！”",

"3.贴在墙壁上大喊一声：“啊！冰冰凉凉的，好爽啊~”", "4.一口气喝完一瓶农夫山泉（可请人代替）",

"5.去开发测试班给大家讲个笑话", "6.用屁股写字", "7.亲plus一口", "8.向班上的人大声表白", "9.跳拍怕操",

"10.去开发测试班背一位异性绕场一周", "11.在走廊大声喊：“我是猪，我要滚泥巴！看我带你装逼带你飞”",

"12.背一位异性绕教室一周", "13.向一位异性表白三分钟", "14.与一位异性十指相扣，对视十秒不许笑，笑了重来",

"15.邀请一位异性与自己唱“今天你要嫁给我”", "16.深深的吻墙10秒", "17.俯卧撑男30个，女10个",

"18.8秒转10圈", "19.嘴里喊着“呱呱呱”蛙跳10个", "20.去开发测试班大叫“我很空虚，谁来陪陪我！”",

"21.真心话大冒险", "22.惩罚转移给自己指定的人(惩罚全班同学定)", "23.和老师手挽手微笑着到开发测试班绕教室一圈",

"24.抱着老师到开发测试班大喊“我们要结婚了！”" ];

//改变背景颜色

function changeBack(c){

$("#d"+c).css("background-color","yellow");

}

function timedCount() { //开始选人

$("#manbtn").val("寻人中");

$("#namespan").hide();

c = parseInt($("#manspan").html());

c = c + 1;

if (c == nameArray.length) {

c = 0;

}

$("#manspan").html(c);

t = setTimeout("timedCount()", 2);

}

function fanpai() {

c = parseInt($("#hid").val());

c = c + 1;

if (c == 9) {

c = 1;

}

$("#hid").val(c);

$("#d"+c).css("background-color","red");

t2 = setTimeout("changeBack(c)", 100);

t = setTimeout("fanpai()", 100);

}

function napai() {

var a = new Array();

for (i = 1; i <= 8; i++) {

var length = gameArray.length;

var idx = parseInt(Math.random() * gameArray.length-1);

if (!check(a, idx)) {

idx = parseInt(Math.random() * gameArray.length-1);

if (!check(a, idx)) {

idx = parseInt(Math.random() * gameArray.length-1);

}

}

if(idx == -1){

idx = 0;

}

a[i] = idx;

var game = gameArray[idx];

//alert(game);

$("#p" + i).html(game);

}

}

function check(a, b) { //防止拿到的牌重复了

var flag = true;

for (k = 0; k < a.length; k++) {

if (a[k] == b) {

flag = false;

}

}

return flag;

}

function gaipai() {

for (i = 1; i <= 8; i++) {

if ($("#d" + i).css("display") == "none") {

$("#d" + i).css("display", "inline-flex");

$("#d" + i).css("background-color", "yellow");

}

if ($("#p" + i).css("display") != "none") {

$("#p" + i).css("display", "none");

}

}

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

}

function tingpai(){

clearTimeout(t);

clearTimeout(t2);

for(j = 1; j <= 8; j++){

if($("#d" + j).css("background-color") == "rgb(255, 0, 0)"){

$("#d" + j).hide();

$("#p" + j).show();

break;

}

}

}

$(document).ready(function(){

$("#gobtn").click(function() {

var i = parseInt(Math.random() * 8 + 1);

gaipai();

napai();

fanpai();

});

$("#stopPai").click(function(){

setTimeout("tingpai()",1000);

});

$("#gobtn2").click(function() {

gaipai();

});

$("#manbtn").click(function() {

timedCount();

});

$("#okbtn").click(function() {

clearTimeout(t);

index = parseInt($("#manspan").html());

$("#manbtn").val("选人");

$("#namespan").show();

var name = nameArray[index];

$("#namespan").html(name);

});

});

最有运行结果如图

这样就实现了动态选择一个人，并且动态的拿一个获取游戏了啦。。

源代码下载：http://yun.baidu.com/s/1i3EU7Xj

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航