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 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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重定向的3种方式
2013/03/07 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
python BeautifulSoup使用方法详解
2013/11/21 Python
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python 自定义对象的打印方法
2019/01/12 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Python函数生成器原理及使用详解
2020/03/12 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
建筑工程实习自我鉴定
2013/09/19 职场文书
yy生日主持词
2014/03/20 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
病房管理制度范本
2015/08/06 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS