jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

在线实例

查看演示

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>jQuery幸运大转盘_jQuery+PHP抽奖程序(上)</title>

        <style type="text/css">

            .demo{ position:relative;width:417px;}

            #disk{width:417px; height:417px; background:url(/api/jq/5733e347040d9/images/disk.jpg) no-repeat;}

            #start{width:163px; height:320px; position:absolute; top:46px; left:130px;}

            #start img{cursor:pointer}

        </style>

    </head>

    <body>

        <div class="container">

            <div class="demo">

                <div id="disk"></div>

                <div id="start"><img src="/api/jq/5733e347040d9/images/start.png" id="startbtn" alt="转盘开启"/></div>

            </div>

        </div>

        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>

        <script type="text/javascript" src="/api/jq/5733e347040d9/jQueryRotate.2.2.js"></script>

        <script type="text/javascript" src="/api/jq/5733e347040d9/jquery.easing.min.js"></script>

        <script type="text/javascript">

            $(function() {

                $("#startbtn").rotate({

                    bind: {

                        click: function() {

                            var random = Math.floor(Math.random() * 360); //生成随机数

                            $(this).rotate({

                                duration: 3000, //转动时间间隔（速度单位ms）

                                angle: 0, //指针开始角度

                                animateTo: 3600 + random, //转动角度，当转动角度到达3600+random度时停止转动。

                                easing: $.easing.easeOutSine, //easing动画效果

                                callback: function() {  //回调函数

                                    alert('恭喜您，中奖了！');

                                }

                            });

                        }

                    }

                });

            });

        </script>

    </body>

</html>

　　

jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现的更多相关文章

  1. jQuery幸运大转盘_jQuery+PHP抽奖程序

    http://www.thinkphp.cn/code/1153.html 网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序. 若是想看更多js特效.网站源码. ...

  2. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  3. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  4. PHP+AJAX开发幸运大转盘抽奖

    PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...

  5. asp.net+jQueryRotate开发幸运大转盘

    在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源 ...

  6. PHP幸运大转盘源码，支持ThinkPHP

    原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之 ...

  7. html5简单拖拽实现自动左右贴边+幸运大转盘

    此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...

  8. Vue 幸运大转盘

    转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不 ...

  9. 跟我一起学编程—《Scratch编程》第24课：幸运大转盘

    同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工 ...

随机推荐

  1. 通过telnet来实践HTTP协议。

    这是一篇实践教程,能够让你更加深刻的理解HTTP协议,因此需要一定的HTTP基础. 协议:一种规定,规定了你应该怎么去做,如w3c规定了浏览器应该怎么去解析HTML,CSS,JS.而HTTP则规定了客 ...

  2. MySQL数据库工具类之——DataTable批量加入MySQL数据库(Net版)

    MySQL数据库工具类之——DataTable批量加入数据库(Net版),MySqlDbHelper通用类希望能对大家有用,代码如下: using MySql.Data.MySqlClient; us ...

  3. Zepto中文API

    原文地址:http://zeptojs.com/ 译文地址:http://www.html-5.cn/Manual/Zepto/ Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,  ...

  4. [c++] Basic ideas and Style Guide

    Get your own compiler: sudo add-apt-repository ppa:ubuntu-toolchain-r/testsudo apt-get updatesudo ap ...

  5. ASP.NET 网站从Sever2003迁移到Sever 2008部署后不能访问

    最近公司运维迁移网站遇到部署后始终不能访问,一直提示无法访问请求的页面,但是请求页面正常,程序没问题,在本地电脑运行正常,运维找了好久没找到原因. 后来问我,我也找了好久,最后终于解决了. 解决方法是 ...

  6. 吐槽坑爹的微软win store app审核

    从学习win store app 开发到做出第一个应用 博客园cnblogs 花了一个多月的全部业余和上班空闲时间, 上周在端午节放假期间终于完成了计划的全部开发和测试, 6月10号怀着无比激动的心情 ...

  7. 【模式匹配】更快的Boyer-Moore算法

    1. 引言 前一篇中介绍了字符串KMP算法,其利用失配时已匹配的字符信息,以确定下一次匹配时模式串的起始位置.本文所要介绍的Boyer-Moore算法是一种比KMP更快的字符串匹配算法,它到底是怎么快 ...

  8. Elasticsearch入门必备——ES中的字段类型以及常用属性

    使用Elasticsearch时,了解字段的概念,是必不可少的.毕竟无论是es还是传统的数据库,都无法弱化字段的类型. 背景知识 在Es中,字段的类型很关键: 在索引的时候,如果字段第一次出现,会自动 ...

  9. Django之Form、CSRF、cookie和session

    Django是一个大而全的web框架,为我们提供了很多实用的功能,本文主要介绍Form.CSRF.cookie和session 一.Form 在web页面中form表单是重要的组成部分,为了数据安全和 ...

  10. 高逼格前端开发工具-FIDDLER

    1.Fiddler相对其他调试工具的优势 HttpWatch 和 Firebug绝大多数前端开发人员都比较熟悉,但是HttpWatch虽然可以抓到每个 HTTP 请求的全部数据,但无法修改返回的数据: ...