jQuery实现移动端扭蛋机抽奖


Posted in jQuery onNovember 08, 2020

本文实例为大家分享了jQuery实现移动端扭蛋机抽奖的具体代码,供大家参考,具体内容如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="pragram" content="no-cache" />
 
<link href="css/style.css" type="text/css" rel="stylesheet"/>
 
<title>扭蛋机</title>
<!--移动端版本兼容 -->
<script type="text/javascript">
 var phoneWidth = parseInt(window.screen.width);
 var phoneScale = phoneWidth/640;
 var ua = navigator.userAgent;
 if (/Android (\d+\.\d+)/.test(ua)){
 var version = parseFloat(RegExp.$1);
 // andriod 2.3
 if(version>2.3){
  document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
 // andriod 2.3以上
 }else{
  document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
 }
 // 其他系统
 } else {
 document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
 }
 //微信去掉下方刷新栏
 if(RegExp("MicroMessenger").test(navigator.userAgent)){
 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  WeixinJSBridge.call('hideToolbar');
 });
 }
</script>
 
 <script src="js/jquery1.8.3.min.js"></script>
 
</head>
<body>
 
<div class="niu_danji">
 <!--机器-->
 <div class="game_qu">
 <!--go-->
 <div class="game_go">100/次</div>
  <div class="wdjifen">10000</div>
 </div>
 
 <!--球-->
 <div class="dan_gund">
 <span class="qiu_1 diaol_1"></span>
 <span class="qiu_2 diaol_2"> </span>
 <span class="qiu_3 diaol_3"></span>
 
 <span class="qiu_4 diaol_4"></span>
 <span class="qiu_5 diaol_5"></span>
 <span class="qiu_6 diaol_6"></span>>
 
 <span class="qiu_7 diaol_7"></span>
 <span class="qiu_8 diaol_8"></span>
 
 
 <span class="qiu_9 diaol_9"></span>
 <span class="qiu_10 diaol_10"></span> 
 <span class="qiu_11 diaol_11"></span> 
  
 </div>
 
 <!--中奖掉落-->
 <div class="medon"><img src="images/mendong.png"/></div>
 <div class="zjdl ">
 <span></span>
 </div>
 
 </div>
 
 
 
 
<!--中奖 获得一等奖-->
<div class="zonj_zezc none" id="jianpin_one">
 <div class="jpzs aiqiyi tc_anima">
 <em><img src="images/close.png"/></em>
 <h2>
  <b>恭喜你!<br>获得一等奖!</b>
 </h2>
 </div></div>
 
<!--中奖获得二等奖-->
<div class="zonj_zezc none" id="jianpin_two">
 <div class="jpzs aiqiyi tc_anima">
 <em><img src="images/close.png"/></em>
 <h2>
  <b>恭喜你!<br>获得二等奖!</b>
 </h2>
 </div>
</div>
 
<!--中奖 获得三等奖-->
<div class="zonj_zezc none" id="jianpin_three">
 <div class="jpzs aiqiyi tc_anima">
 <em><img src="images/close.png"/></em>
 <h2>
  <b>恭喜你!<br>获得三等奖!</b>
 </h2>
 </div>
</div>
 
 
<!--没有中奖-->
<div class="zonj_zezc none" id="jianpin_kong">
 <div class="jpzs aiqiyi tc_anima">
 <em><img src="images/close.png"/></em>
 <h2>
  咦?没有抽中?
 </h2>
 </div>
</div>
 
 
<!--积分不足-->
<div class="zonj_zezc none" id="no_jifeng">
 <div class="jpzs aiqiyi tc_anima">
 <em><img src="images/close.png"/></em>
 <h2>
  对不起,积分不足!
 </h2>
 </div>
</div>
<script>
 
$(document).ready(function(e) {
 //一等奖 关闭
 $("#jianpin_one em img").click(function(){
 $("#jianpin_one").hide();
 }
 ); 
 //二等奖 关闭
 $("#jianpin_two em img").click(function(){
 $("#jianpin_two").hide();
 }
 ); 
 //三等奖 关闭
 $("#jianpin_three em img").click(function(){
 $("#jianpin_three").hide();
 }
 ); 
 //没有中奖 关闭
 $("#jianpin_kong em img").click(function(){
 $("#jianpin_kong").hide();
 }
 ); 
 //积分不足 关闭
 $("#no_jifeng em img").click(function(){
 $("#no_jifeng").hide();
 }
 ); 
 
var score=470;
$(".wdjifen").html(score);
 
 
$(".game_go").click(function(){
 score-=100;
 if(score<0){
 for(i=1;i<=11;i++){
 $(".qiu_"+i).removeClass("wieyi_"+i);
 }
 $("#no_jifeng").show();
 }else{
 draw()
 }
 });
 
 
function draw(){
 var number =Math.floor(4*Math.random()+1); 
 
 for(i=1;i<=11;i++){
 $(".qiu_"+i).removeClass("diaol_"+i);
 $(".qiu_"+i).addClass("wieyi_"+i);
 };
 
 setTimeout(function (){
 for(i=1;i<=11;i++){
 $(".qiu_"+i).removeClass("wieyi_"+i);
 }
 },1100); 
 setTimeout(function(){
 switch(number){
 case 1:$(".zjdl").children("span").addClass("diaL_one");break;
 case 2:$(".zjdl").children("span").addClass("diaL_two");break;
 case 3:$(".zjdl").children("span").addClass("diaL_three");break;
 case 4:$(".zjdl").children("span").addClass("diaL_four");break;
 }
 $(".zjdl").removeClass("none").addClass("dila_Y");
 setTimeout(function (){
 switch(number){
 case 1:$("#jianpin_one").show();break;
 case 2:$("#jianpin_two").show();break;
 case 3:$("#jianpin_three").show();break;
 case 4:$("#jianpin_kong").show();break;
 }
 },900);
 },1100)
 
 //取消动画
 setTimeout(function (){
 $(".zjdl").addClass("none").removeClass("dila_Y");
 $(".wdjifen").html(score);
 $(".zjdl").children("span").removeAttr('class');
 
 },2500)
 
} 
});
 
 
</script>
 
 
</body>
</html>

 jQuery实现移动端扭蛋机抽奖

demo下载地址:jQuery移动端扭蛋机抽奖

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

jQuery 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
Jquery Fade用法详解
Nov 06 #jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
使用jQuery实现购物车
Oct 29 #jQuery
jQuery实现简单评论区功能
Oct 26 #jQuery
jquery插件懒加载的示例
Oct 24 #jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
jquery实现抽奖功能
Oct 22 #jQuery
You might like
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
Python写的一个简单监控系统
2015/06/19 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
python定时任务 sched模块用法实例
2019/11/04 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
美国第一香水网站:Perfume.com
2017/01/23 全球购物
人力资源作业细则
2014/03/03 职场文书
公司业务员岗位职责
2014/03/18 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle