<!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中奖实例代码的更多相关文章

  1. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  2. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  3. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  4. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  5. jQuery Ajax方法调用 Asp.Net WebService、WebMethod 的详细实例代码

    将以下html存为ws.aspx <%@ Page Language="C#" AutoEventWireup="true" %> <scri ...

  6. 后台接受ajax传递值的实例代码

    后台接受ajax传递值的实例代码: 使用ajax可以实现无刷新数据交互,下面是一段后台代码接收ajax传递值的实例代码供需要的朋友参考,希望能够带来帮助. ajax代码如下: $(function ( ...

  7. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  8. Jquery zTree实例

    zTree[简单介绍] zTree 是利用 JQuery 的核心代码,实现一套能完毕大部分经常使用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同一时候生成 ...

  9. jquery ajax实例教程和一些高级用法

    jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...

随机推荐

  1. Centos下设置静态IP

    使用VirtualBox装了很多虚拟机,默认采用的DHCP的方式,但是随着虚拟机越来越多以后,这种方式很不方便,所以需要将机器的IP都设置为静态IP 需要添加的几项内容的解释:IPADDR    IP ...

  2. 网页制作常见的问题（怎样兼容IE6/IE7/火狐浏览器）

    1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG 例如: <style type="t ...

  3. lvs原理和实战

     lvs-dr原理 lvs-nat原理:  当我们的网站流量越来越大时一台web服务器已经无法满足需求了,我们该如何解决呢??把服务器连接起来实现负载均衡或许是个不错的办法..下面我就来看看怎么实现吧 ...

  4. Win2K3一句话开3389

    网上流传了很多开3389的exe小工具,还有读写注册表的bat批处理,有的是操作注册表,有的是操作各种组件这里提供一个不会被拦截,而且可以使用的开3389的cmd一句话: wmic RDTOGGLE  ...

  5. IOS 今天学到太多的知识了，赶快记录下来

    TabBarController 修改tabbar的背景颜色和选中时候的颜色: func application(application: UIApplication, didFinishLaunch ...

  6. Html - 404页面

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  7. 在树莓派上使用ss和iptables实现fq功能

    VPS购买地址 以下所有叙述均来自互联网上已有文章, 本人只做收集和整理工作. 写在前面的话: 一直想把家里的树梅派做成一个fq路由器, 期间也看过很多GitHub上的开源项目: Redsock, C ...

  8. CSS兼容性(IE和Firefox)技巧大全

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  9. [办公自动化]无法使用江南天安usbkey 无法使用视频网站

    同事打来电话说,无法使用江南天安开发的usbkey. 修复基本步骤记录如下: 1.卸载一切设备管理器中与之相关的驱动.拔出key. 2.重启计算机. 3.前往业务公开网站安装驱动. 4.插入key测试 ...

  10. 【ZZ】 移位贴图 Displacement Mapping

    http://blog.csdn.net/huazai434/article/details/5650629 说明:该技术需要VS3.0的支持!!! 一,移位贴图类似于地形渲染.不过由于移位纹理可以做 ...