jquery实现抽奖系统

闲来无事做了一个抽奖的系统:

<!DOCTYPE html>

<head>

<style>

#box{

width:450px;

margin:0 auto;

}

.show{

width:100px;

height:55px;

text-align:center;

background:#ff0;

line-height:55px;

border:1px solid #000;

border-radius:5px;

font-size:20px;

font-family:微软雅黑;

float:left;

margin:5px 5px 0px 5px;

}

#person{

width:450px;

height:100px;

background:#ff0;

text-align:center;

line-height:100px;

font-size:45px;

margin:0 auto;

margin-top:25px;

border:1px dotted #000;

font-family:楷体;

border-radius:10px;

}

margin-top:25px;

text-align:center;

}

button{

width:65px;

height:35px;

text-align:center;

border:0px;

border-radius:5px;

background:#f36;

font-size:16px;

color:#fff;

cursor:pointer;

}

.active{

background:#f00;

}

</style>

</head>

<body>

</div>

获奖者

</div>

<p>

</p>

</body>

var showlen=$('.show').length; //获取人员总数

var time=null; //初始化计时器

$('#btn').click(function(){

var flag=$(this).html();

flag=flag=='开始'?'停止':'开始'; //交换按钮上的内容

$(this).html(flag);

switch(flag)

{

case '停止': //这里是开始作抽奖

getIndex(0);

break;

case '开始': //这里是停止循环

getIndex(1);

$('#person').html('恭喜:'+$("#person").html()); //汇报结果

break;

}

});

function getIndex(mark)

{

if(mark==1)

{

clearInterval(time); //终止计时器

}

else

{

time=setInterval(show,1); //开启计时器

}

function show()

{

var idx=Math.floor(Math.random()*showlen); //生成随机数

for(var i=0;i<showlen;i++)

{

$('.show').eq(i).css({'background':'#ff0'}); //去掉所有的背景色

}

$('.show').eq(idx).css({'background':'#f00'}); //为当前选中的人加背景色

$("#person").html($('.show').eq(idx).html()); //将当前选中的人的名字显示在下面的框内

}

</script>

</html>

试用效果还可以.如图:

转载于:https://blog.51cto.com/phpwzh/1717906

jquery实现抽奖系统相关推荐

php jq实现抽奖,jquery实现抽奖系统
闲来无事做了一个抽奖的系统: 抽奖系统 #box{ width:450px; margin:0 auto; } .show{ width:100px; height:55px; text-align: ...
jquery php 抽奖,jquery实现抽奖系统
闲来无事做了一个抽奖的系统: 抽奖系统 #box{ width:450px; margin:0 auto; } .show{ width:100px; height:55px; text-align: ...
抽奖 html5 jquery,jquery实现抽奖系统
闲来无事做了一个抽奖的系统: 抽奖系统 #box{ width:450px; margin:0 auto; } .show{ width:100px; height:55px; text-align: ...
小猿圈web前端之jQuery抽奖系统
你有没有想过有一天可以成为千万富翁呢?你是通过自己的努力和奋斗还是其他手段获得的呢?前端程序员是通过jQuery获得的,他自己写了一个抽奖系统,下面就小猿圈前端讲师分享给大家. 效果图: <!D ...
JS实现一个简单的抽奖系统
本文主要介绍如何通过js中的setInterval()函数实现一个抽奖系统.在该系统中,我们不只是可以通过点击按钮来进行操作,还可以通过敲击键盘来进行操作.这里主要涉及到js中的事件处理程序,用到了o ...
python七夕快乐_python编写简单抽奖系统
python编写简单抽奖系统 #!/usr/bin/env python #coding=utf-8 from Tkinter import * import time import random c ...
从限流削峰到性能优化,谈1号店抽奖系统架构实践
1.前言抽奖是一个典型的高并发场景应用,平时流量不多,但遇到大促活动,流量就会暴增,今年的周年庆期间的日均UV就超过百万.在过去的一年里,负责过这个项目的多次重构工作,期间各种踩坑无数,就以此文当做 ...
抽奖系统的流量削峰方案
如果观看抽奖或秒杀系统的请求监控曲线,你就会发现这类系统在活动开放的时间段内会出现一个波峰,而在活动未开放时,系统的请求量.机器负载一般都是比较平稳的.为了节省机器资源,我们不可能时时都提供最大化的资 ...
java简单小项目_Java简易抽奖系统小项目
本文实例为大家分享了Java简易抽奖系统的具体代码,供大家参考,具体内容如下需求: 实现一个抽奖系统 1 注册 2 登录 3 抽奖必须先注册再登陆再抽奖随机产生4个随机数作为幸运卡号用 ...

jquery实现抽奖系统

jquery实现抽奖系统相关推荐

最新文章

热门文章