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仿京东商品放大浏览页面
Jun 06 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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写的serv-u的web申请账号的程序
2006/10/09 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
获取python文件扩展名和文件名方法
2018/02/02 Python
python中join()方法介绍
2018/10/11 Python
python向图片里添加文字
2019/11/26 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
给男朋友的道歉信
2014/01/12 职场文书
三八节标语
2014/06/27 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书