jquery中奖实例代码
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>中奖实例</title> <style> * { padding: 0; margin: 0; } body,html { width: 100%; height: 100%; } .ctn { width: 100%; height: 100%; background-color: #ccc; } .ctn .disk { width: 446px; height: 446px; border-radius: 1000px; position: relative; margin: 0 auto; background: url(http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/disk.jpg) no-repeat center; } .ctn .disk .btn { width: 85px; height: 85px; border-radius: 100px; position: absolute; top: 189px; left: 178px; cursor: pointer; } .ctn .disk img { position: absolute; top: 119px; left: 165px; } .ctn .disk .word { font-weight: bold; } </style> <script id="jquery_182" type="text/javascript" class="library" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.2.min.js"></script> <script id="jqueryplugins9_jquery_rotate_22" type="text/javascript" class="library" src="http://runjs.cn/js/sandbox/jquery-plugins/jQueryRotate.2.2.js"></script> </head> <body> <div class="ctn"> <div class="disk"> <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/start.png" width="112" /> <div class="btn"></div> <p class="word">点击小图开始吧~</p> </div> </div> <script> //转盘数据 var data = [ {angle: 0, reward: "恭喜您中了一等奖,呵呵~"}, {angle: 30, reward: "谢谢参与,呵呵~"}, {angle: 60, reward: "谢谢您的参与,呵呵~"}, {angle: 90, reward: "要加油哦,呵呵~"}, {angle: 120, reward: "恭喜您中了三等奖,呵呵~"}, {angle: 150, reward: "运气先攒着,呵呵~"}, {angle: 180, reward: "谢谢您的参与,呵呵~"}, {angle: 210, reward: "再接再厉,呵呵~"}, {angle: 240, reward: "恭喜您中了二等奖,呵呵~"}, {angle: 270, reward: "祝您好运,呵呵~"}, {angle: 300, eward: "谢谢您的参与,呵呵~"}, {angle: 330, reward: "不要灰心,呵呵~"} ]; //鼠标事件 var onoff = true; $(".btn").click(function() { if(onoff){ var result = whichNum(), angle = 0; angle = data[result]["angle"]; $("img").rotate({ angle: angle, animateTo: 3600 + data[result]["angle"], duration: 6000, callback: function() { $(".word").text(data[result]["reward"]); onoff = true; } }); } onoff = false; }); //分散中奖概率 function whichNum() { var index = Math.ceil(Math.random()*100), num = 0; switch(true) { case (index==1)://一等奖 num = 0; break; case (index>1&&index<=4)://二等奖 num = 1; break; case (index>4&&index<=10)://三等奖 num = 2; break; default://参与奖 num = 3; } if(num==3) { num = Math.floor(Math.random()*9) + 3; } return num; } </script> </body> </html>
jquery中奖实例代码的更多相关文章
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下 一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...
- 三种动态加载js的jquery实例代码另附去除js方法
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
- jQuery Ajax方法调用 Asp.Net WebService、WebMethod 的详细实例代码
将以下html存为ws.aspx <%@ Page Language="C#" AutoEventWireup="true" %> <scri ...
- 后台接受ajax传递值的实例代码
后台接受ajax传递值的实例代码: 使用ajax可以实现无刷新数据交互,下面是一段后台代码接收ajax传递值的实例代码供需要的朋友参考,希望能够带来帮助. ajax代码如下: $(function ( ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)转
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...
- Jquery zTree实例
zTree[简单介绍] zTree 是利用 JQuery 的核心代码,实现一套能完毕大部分经常使用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同一时候生成 ...
- jquery ajax实例教程和一些高级用法
jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...
随机推荐
- OpenCV 2.4.11 VS2010 Configuration
Add in the system Path: C:\opencv\build\x86\vc10\bin; Project->Project Property->Configuration ...
- Programming with gtkmm 3
https://developer.gnome.org/gtkmm-tutorial/unstable/index.html.zh_CN 1. 序言 1.1. 本书 1.2. gtkmm 2. 安 ...
- 更新AD对象属性值
1. 对于Set-ADUser不包含的对象属性,可以采用replace来操作 Set-ADUser -Identity 'UserA' -Replace @{userWorkstations = 'C ...
- Powershell的远程管理
powershell有强大的远程管理功能,但是现在遇到个问题,我们之前的客户端操作系统都是默认安装的,没做默认设置,请问如何通过gpo将所有和远程有关的设置都搞定啊?到底要设置哪些个选项? 我的环 ...
- html5:服务器事件推送(server-sent events)Asp.net
支持 不支持IE 个人理解说明 个人理解:这种消息推送方式不太推广,原因有以下三点~~~`我怎么老是学这些自己认为不会推广的东西呢~汗 在.net中,framework4.5以上就可以由SignalR ...
- win7锁定到任务栏的路径在哪里
You can find pinned apps in: %AppData%\Microsoft\Internet Explorer\Quick Launch\User Pinned\TaskBar ...
- MySQL 创建用户 与 授权
例,需要给 121.52.215.100 连接添加一个用户 dee,密码是 123456,他只能对数据库 vshop 有 select 权限: CREATE USER '; GRANT SELECT ...
- PHP 开发 APP 接口 学习笔记与总结 - XML 方式封装通信接口
1.PHP 生成 XML 数据 ① 拼接字符串 ② 使用系统类(DomDocument,XMLWriter,SimpleXML) 例1 使用 PHP 系统类中的 DomDocument 类: < ...
- Android 通过网页打开自己的APP(scheme)
Android 通过网页打开自己的APP(scheme) 分类: android2014-07-09 17:35 8565人阅读 评论(2) 收藏 举报 通过用手机的浏览器(内置,第三方都可)访问一个 ...
- PHP基本使用
本篇说的基本使用包括: php常规的语法 date,number,array等对象的处理方式 程序语言的常规的语法都比较好理解,大致相同.假如你是精于其它解释型语言的程序员,迁移到php几乎不费力气. ...