<!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. jsoncpp代码实例

    最近开始使用 jsoncpp,以前一直在使用cJSON,但是使用cJSON的时候经常会忘记free掉json的内存,结果造成了内存泄露,程序跑着跑着就崩溃了.所以最近把json转移到了jsoncpp上 ...

  2. IIS浏览提示无法显示网页的解决方法

    1.错误号401.1 症状:HTTP 错误 401.1 - 未经授权:访问由于凭据无效被拒绝. 分析: 由于用户匿名访问使用的账号(默认是IUSR_机器名)被禁用,或者没有权限访问计算机,将造成用户无 ...

  3. Odoo 二次开发教程【一】 Odoo 的安装

    一,安装的两种方式: 1) deb包安装: 此安装方式适用于简单不需要太多的人工干预,大多数插件都在deb中涵盖了.具体的步骤如下: 1.编辑 /etc/apt/source.list 文件,在末尾添 ...

  4. CentOS网卡配置文件

    [root@xaiofan ~]# cat /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0TYPE=EthernetONBOOT=yesNM ...

  5. hdu Pie

    这道题是一道二分搜索的题,首先计算出最大的平均体积:mx=V总/f:然后去left=0,right=mx,mid=(left+right)/2进行二分搜索,当所有pi分割出的mid的个数是大于等于f时 ...

  6. HDU 1176 经典dp

    记录最晚时间 从time为2枚举到最晚时间 每个时间段的x轴节点都等于上一个时间段的可触及的最大馅饼数 #include<stdio.h> #include<string.h> ...

  7. jQuery 利用 $.getJson() 实现跨域

    数据量不大时,跨域的不二之选,而且操作简单,易上手. a.com/test.html //这里我假定有一些数据: var formData = form.serialize(); //这里的jsonc ...

  8. 图解SQL多表关联查询

      图解SQL多表关联查询     网上看了篇文章关于多表连接的,感觉很好,记录下来,以便日后自己学习  内连接     左连接     右连接       全外连接   1. 查两表关联列相等的数据 ...

  9. von Neumann architecture

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION 3.1 COMPUTER COMPONEN ...

  10. 【Android测试】【第七节】Monkey——源码浅谈

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/4713466.html 前言 根据上一篇我们学会了Monke ...