<!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. QImage Color Convert to Gray 转为灰度图

    在Qt中,我们有时需要把QImage类的彩色图片转为灰度图,一开始我想的是用QImage的成员函数convertToFormat(),但是试了好多参数,返现转化的图片都有问题,不是我们想要的灰度图,如 ...

  2. Html - 涟漪特效

    这种效果稍加改造非常优雅.并且可以准确的实验触摸聚焦点.缺点是非常消耗内存.娱乐为主吧 js //╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣ 涟漪特效 ╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣ 涟漪 ...

  3. C#并行库（TaskParallelLibrary）用法小结

    今天有空,总结一下.NET 4.5并行库(TaskParallelLibrary)用法. 也许C和C++的程序员刚刚开始写C#还习惯于new Thread来新建一个线程,但新建线程需要内存和CPU上下 ...

  4. [转]Web Service Authentication

    本文转自:http://www.codeproject.com/Articles/9348/Web-Service-Authentication Download source files - 45. ...

  5. HP StorageWorks MSL2024 Tape Libraries - Robotic Error Sub-Codes

    Robotic error sub-codes Mechanical initialization failure 02 Connection to slave robotic failed 03 E ...

  6. 网易前端JavaScript编码规范【转】

    1. 变量命名规范 变量名包括全局变量,局部变量,类变量,函数参数等等,他们都属于这一类. 基本规范 变量命名都以类型前缀+有意义的单词组成,单词首字母都需要大写.例如:sUserName,nCoun ...

  7. HTML5 ：b/strong加粗，i/em倾斜区别

    解释1 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="ut ...

  8. Mybatis resultMap空值映射问题解决

    Mybatis在使用resultMap来映射查询结果中的列,如果查询结果中包含空值的列(不是null),则Mybatis在映射的时候,不会映射这个字段,例如 查询 name,sex,age,数据库中的 ...

  9. SIP中OPTIONS方法的用法及示例

    SIP中OPTIONS方法的用法及示例 用OPTIONS方法实现Keep Alive SIP keep-alive方法

  10. NV Perf Kit

    https://developer.nvidia.com/gameworksdownload#?dn=perfkit-4-0-0 Title Version Release Date PerfKit  ...