jquery php 抽奖,jquery实现抽奖系统
闲来无事做了一个抽奖的系统:
抽奖系统
#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;
}
p{
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;
}
获奖者
开始
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
{
$('.show').eq(i).css({'background':'#ff0'}); //去掉所有的背景色
}
$('.show').eq(idx).css({'background':'#f00'}); //为当前选中的人加背景色
$("#person").html($('.show').eq(idx).html()); //将当前选中的人的名字显示在下面的框内
}
}
试用效果还可以.如图:
jquery php 抽奖,jquery实现抽奖系统相关推荐
- 翻牌抽奖 php,PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: 1 2 3 ...
- 扭蛋机html源码,jQuery动画扭蛋机抽奖代码
特效描述:jQuery动画 扭蛋机抽奖.jQuery动画扭蛋机抽奖代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 100/次 10000 > 恭喜你! 获得一等奖! 恭喜你 ...
- 微信转发抽奖+php,jQuery+PHP实现微信转盘抽奖功能的方法
本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作 首先要准备素材,抽奖的界面用到两张 ...
- js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
原文:js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器 源代码下载地址:http://www.zuidaima.com/share/1779633798073344.htm 看到网页上有 ...
- PHP做大转盘抽奖的思路,jQuery+PHP实现微信转盘抽奖功能的方法
本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作 首先要准备素材,抽奖的界面用到两张 ...
- jquery实现酷炫的抽奖器效果
请在这里查看示例 ☞ award示例 使用介绍 可以自定义行.列数以及每次选中的个数 点击初始化按钮,即可加载功能,点击开始抽奖进行第一次抽奖 已抽过的用户不会再被抽到 鼠标移出再移入可继续下一次抽奖 ...
- html+抽奖游戏,九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
- java 9宫格抽奖_九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
- JQuery模板插件jquery.tmpl-动态ajax扩展
在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...
- php jquery教程下载,jquery怎么下载和引用
下载和引用jquery的方法:首先进入jQuery的官网:然后找到jQuery官网首页右侧的下载按钮:接着点击进入jQuery的下载页面并进行下载:最后用script标签引入jquery即可. 本教程 ...
最新文章
- Error:could not open'C:\Porogram Files\Java\jrelib\j386\jvm.cfg'
- IT十八掌作业_java基础第六天_接口与适配器模式、多态、内部类
- 矩阵分析与多元统计1 线性空间与线性变换1
- Matlab---傅里叶变换---通俗理解(一)
- 文档中没有介绍的SQL Server DBCC命令
- rtmp官方协议详解
- 基于数据库的事务消息解决分布式事务方案
- s5pv210——时钟系统
- 电子邮件客户端程序_您更喜欢哪个电子邮件客户端?
- whoosh mysql_使用WhooshAlchemy报错'function' object has no attribute 'config'
- python计算圆周率、根据下面的泰勒级数关系式_C语言 计算圆周率 根据下面关系式,求圆周率的值,直到最后一项的值小于给定阈值。...
- 八款最佳的远程桌面工具
- Python爬虫之青果教务系统
- Jmeter 使用详解、性能压测分析与性能优化思路
- 全球链界科技发展大会_科技界的女性-过去,现在和未来
- 这样设置定时消息通知提醒,重要的信息肯定不会错过
- leetcode21 合并两个有序链表
- 有没有什么靠谱的副业?
- ASP.NET + adminLTE (一)
- Alienware TactX 更换了德国樱桃微动DG6
热门文章
- MDNICE使得你只需要关注内容
- 信标组裁判系统原理与实现
- mac上安装python详细教程_mac安装python环境
- mfc倾斜文本输入_文本检测知识梳理(持续更新)
- anaconda在ubuntu中安装后没有_听说90后的现状,并没有想象中那么美好!
- android朋友圈图片背景图片,做个很哇塞的女孩背景图朋友圈
- 计算机软考高级论文,【2019年软考高项论文一定要避开这些坑】- 环球网校
- 最短路径树 php,CCNA-开放式最短路径优先(OSPF)真实考题
- springboot2 war页面放在那_成为微服务架构师--SpringBoot2学习笔记
- golag mysql_golang连接mysql操作示例增删改查