<!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. OpenCV 2.4.11 VS2010 Configuration

    Add in the system Path: C:\opencv\build\x86\vc10\bin; Project->Project Property->Configuration ...

  2. Programming with gtkmm 3

      https://developer.gnome.org/gtkmm-tutorial/unstable/index.html.zh_CN 1. 序言 1.1. 本书 1.2. gtkmm 2. 安 ...

  3. 更新AD对象属性值

    1. 对于Set-ADUser不包含的对象属性,可以采用replace来操作 Set-ADUser -Identity 'UserA' -Replace @{userWorkstations = 'C ...

  4. Powershell的远程管理

    powershell有强大的远程管理功能,但是现在遇到个问题,我们之前的客户端操作系统都是默认安装的,没做默认设置,请问如何通过gpo将所有和远程有关的设置都搞定啊?到底要设置哪些个选项?   我的环 ...

  5. html5：服务器事件推送（server-sent events）Asp.net

    支持 不支持IE 个人理解说明 个人理解:这种消息推送方式不太推广,原因有以下三点~~~`我怎么老是学这些自己认为不会推广的东西呢~汗 在.net中,framework4.5以上就可以由SignalR ...

  6. win7锁定到任务栏的路径在哪里

    You can find pinned apps in: %AppData%\Microsoft\Internet Explorer\Quick Launch\User Pinned\TaskBar ...

  7. MySQL 创建用户 与 授权

    例,需要给 121.52.215.100 连接添加一个用户 dee,密码是 123456,他只能对数据库 vshop 有 select 权限: CREATE USER '; GRANT SELECT ...

  8. PHP 开发 APP 接口 学习笔记与总结 - XML 方式封装通信接口

    1.PHP 生成 XML 数据 ① 拼接字符串 ② 使用系统类(DomDocument,XMLWriter,SimpleXML) 例1 使用 PHP 系统类中的 DomDocument 类: < ...

  9. Android 通过网页打开自己的APP(scheme)

    Android 通过网页打开自己的APP(scheme) 分类: android2014-07-09 17:35 8565人阅读 评论(2) 收藏 举报 通过用手机的浏览器(内置,第三方都可)访问一个 ...

  10. PHP基本使用

    本篇说的基本使用包括: php常规的语法 date,number,array等对象的处理方式 程序语言的常规的语法都比较好理解,大致相同.假如你是精于其它解释型语言的程序员,迁移到php几乎不费力气. ...