程序博客网 > 股票虚拟盘软件

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

来源：互联网发布：股票虚拟盘软件编辑：程序博客网时间：2024/05/02 04:59

首先在你的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

0 0

股票虚拟盘软件

股票虚拟盘软件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子火车铁道网火车网火车网火车火车网火车站网火车网火车预定网火车网预订火车网下载全国火车网订火车网火车线路网火车客运网火车网网址火车网怎么样火车网登录火车司机网火车晚点网火车网注册火车网1 h火车网火车服务网 \'火车网火在票火车火车过山洞火车预订火车撞火车火车k2286 k1572火车火车k2285 k1628火车 z112火车 t234火车在火车火车k1336 火车k1332 火车k2503 火车k2502 火车k1338 火车k1286 火车k1902 火车k1264