jQuery实现简单的抽奖游戏


Posted in jQuery onMay 05, 2017

今天要写的是,利用jQuery写一个抽奖的案例,页面包含四个组件,两个按钮分别是开始和停止的按钮。两个box,分别盛放人员和奖品。当点击开始按钮时,人员不停地进行切换。抽奖的box中显示等待抽奖结果。当按下停止按钮时,两个盒子分别显示人员名,和所中的奖品。

页面的效果图如下:

jQuery实现简单的抽奖游戏

可能页面没有那么好看。我们主要实现的是功能

首先在body中定义组件

<body>
<input type = "button" class = "btn" id = "start" value = "开始">
<input type = "button" class = "btn" id = "stop" value = "停止">

<div id = "number" class = "box1"></div>
<div id = "jiangpin" class = "box2"></div>
</body>

再进行样式设置:

css代码:

<style type="text/css">
 *{
 margin: 0px;
 padding: 0px;
 }
 .btn{
 width: 90px;
 height: 40px;
 background-color: lightgreen;
 color: white;
 font-size: 18px;
 font-family: "微软雅黑";
 text-align: center;
 line-height: 40px;

 }
 .box1{
 position: absolute;
 width: 230px;
 height: 100px;
 margin: 10px 50px;
 top:150px;
 left: 60%;
 background-color: gold;
 color: black;
 border-radius: 8%;
 font-size: 30px;
 text-align: center;
 line-height: 100px;
 }
 .box2{
 position: absolute;
 width: 230px;
 height: 100px;
 margin: 10px 50px;
 top: 300px;
 left: 60%;
 background-color: gold;
 color: black;
 border-radius: 8%;
 font-size: 30px;
 text-align: center;
 line-height: 100px;
 }
 </style>

接下来就是写函数了。在这里我引用的是”http://libs.baidu.com/jquery/1.9.0/jquery.js“;的jQuery库。

<script >
$(document).ready(function(){

// 1. 首先第一步定义两个数组,存放人员和奖品

var list1 = [ 'A君' , ' B君 ' , ' C君 ' , ' D君 ', ' E君 ' , ' F君 ' , ' G君 '];
var list2 = ['YSL', ' iphone7', ' iphone6', ' 手表', ' 小红花', ' 谢谢参与',' 谢谢参与',' 谢谢参与'];


// 2. 为开始按钮绑定点击事件

$("#start").click(function(){
 //2.1 先将奖品的盒子中的内容初始化
 $("#jiangpin").html("等待抽奖中...");

 //2.2 利用setInterval()函数进行人员名字切换
 // 定义一个变量去接受它每次的状态
 functionId = setInterval(function(){
 var n = Math.floor(Math.random() * list1.length);
 $("#number").html(list1[n]);
 },30);

 });

// 3. 为停止按钮绑定点击事件
 $("#stop").click(function(){
 // 3.1 清除setInterval()。并停止在最后一次的人员名上
 clearInterval(functionId);
 // 3.2 随机产生奖品数组的下标,并将下标对应的元素写入奖品区
 var jiang = Math.floor(Math.random() * list2.length);
 $("#jiangpin").html(list2[jiang]);
 });
})
</script>

这个案例比较简单,所以就不赘述了,下面附上最后的效果图:

这个是点击了开始按钮之后,人员名进行快速的切换中:

jQuery实现简单的抽奖游戏

下面这个是点击了停止按钮的最终中奖人员和对应的奖品

jQuery实现简单的抽奖游戏

jQuery实现简单的抽奖游戏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery仿微信聊天界面
May 06 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jquery中each循环的简单回滚操作
May 05 #jQuery
jquery dataTable 获取某行数据
May 05 #jQuery
js和jquery中获取非行间样式
May 05 #jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 #jQuery
jquery中封装函数传递当前元素的方法示例
May 05 #jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 #jQuery
jQuery树插件zTree使用方法详解
May 02 #jQuery
You might like
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
js版本A*寻路算法
2006/12/22 Javascript
js 函数的副作用分析
2011/08/23 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python sleep和wait对比总结
2021/02/03 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
临床医学专业毕业生的自我评价
2013/10/17 职场文书
家长评语大全
2014/01/22 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
公司授权委托书
2014/04/04 职场文书
情人节寄语大全
2014/04/11 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
DQL数据查询语句使用示例
2022/12/24 MySQL