<!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. php读取3389脚本

    <?php $regkey = 'HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\Wds\rdpwd\Td ...

  2. Java栈与堆一篇好文

    http://blog.csdn.net/zhangao0086/article/details/6347342

  3. 分布式架构高可用架构篇_07_MySQL主从复制的配置（CentOS-6.7+MySQL-5.6）

    参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...

  4. eclipse安装swing插件

    最近想用java做个小应用,是那种可视化图形类的应用.因为一直比较懒,所以打算用swt拖拖拽拽.于是在就去找swt,这是以前的办法.结果发现原来最新版的eclipse自己带有一个windowbuild ...

  5. GWP PHP auth page works

    经过修改,看起来GWP能工作了.不过还是需要深入了解ca的page flow,PHP and Perl大不同 1015  ls /var/www/html/gwp/lib/database.php 1 ...

  6. PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [4] 首页 APP 接口开发方案 ③ 定时读取缓存方式

    用于 linux 执行 crontab 命令生成缓存的文件 crop.php <?php //让crontab 定时执行的脚本程序 require_once 'db.php'; require_ ...

  7. MySQL update语句和insert插入语句写法完全不一样啊，不要搞混

    1.mysql update 语句: update user set name = 'xiaoming',age = 18 where uid = 3000; 更新记录时update操作也不需要写ta ...

  8. 使用spring等框架的web程序在Tomcat下的启动顺序及思路理清

    大牛请绕过,此文仅针对自己小白水平,对web程序的启动流程做个清晰的回顾. 一.使用spring等框架的web程序在Tomcat下的启动流程 1)Tomcat是根据web.xml来启动的.首先到web ...

  9. Yii源码阅读笔记（十五）

    Model类,集中整个应用的数据和业务逻辑——验证 /** * Returns the attribute labels. * 返回属性的标签 * * Attribute labels are mai ...

  10. 纸牌project

    用range[0,8)的列表表示牌,这些数字要出现两次.我们建议你通过连接两个range[0,8)的列表来创建这个list.利用Docs来安排列表串联操作 写一个draw handler啥样的draw ...