用jquery写的”抽奖“小游戏的转盘。顺带选人
2015-10-08 21:47
766 查看
首先在你的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
然后做好你的页面内容
样式文件 <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
相关文章推荐
- jquery向列表添加新元素
- jquery组织结构图插件 (基于jit-yc 做可拖动、自适应伸缩的orgchart)
- jquery中是否加()的问题
- 学习笔记:《jQuery基础教程》第四版第三章课后练习
- CSS3 border-image详解、应用及jQuery插件
- 学习笔记:《jQuery基础教程》第四版第二章课后练习
- jQuery 遍历ul li 添加 移除
- jquery的ajax方法
- jquery删除动态增加的li
- JQuery中两个ul标签的li互相移动实现方法
- jquery倒计时功能
- jquery特效(1)—点击展示与隐藏全文
- java 跨越访问 (jquery,jsonp)
- jquery cookie控制过期时间解决方案
- jquery 让滚动条处于div底部
- Qrcode生成二维码(logo篇)之jquery.qrcode.min.js
- jquery应用 php和html交互
- jQuery ajax loading
- jQuery ——Ajax
- [从jQuery看JavaScript]-匿名函数与闭包(Anonymous Function and Closure)【转】