jquery实现简单抽奖功能

最新推荐文章于 2020-04-19 22:33:35 发布
最新推荐文章于 2020-04-19 22:33:35 发布
阅读量447 收藏
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/tattoo/p/3441532.html
版权

    一直纠结要怎么用jquery实现抽奖功能，看别人很多都是用flash制作的，找了很多资料，最终找到一个比较适合需求的，我做了些许调整，以下是代码展示（复制下来可以直接使用）。

　　先上图：

<!DOCTYPE html>
<html>
    <head>
        <title>抽奖页面</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <link rel="stylesheet" href="http://static1.cdn.1happy.com/assets/base/reset.css"/>
        <script type="text/javascript" src="http://static1.cdn.1happy.com/assets/lib/jquery-1.10.2.js"></script>

        <style type="text/css">
            body {
                background: #190700;
            }
            .header {
                height: 528px;
                background: url("http://imgs3.mxthcdn.com/d/I36gcdpl9nl3895837844_BOPkGh.jpg") no-repeat top center;
            }
            .active-inner,.wrapper-inner {
                width: 1000px;
                margin: 0 auto;
            }
            .active {
                height: 142px;
                background: url("http://imgs2.mxthcdn.com/g/I26gcdpnjl62772276630_HKkCBB.jpg") no-repeat top center;
            }
            .search {
                text-align: center;
            }
            .search a {
                display: inline-block;
                width: 127px;
                height: 50px;
                margin-left: 5px;
            }

            /* 中间抽奖转盘 */
            .wrapper {
                height: 530px;
                background: url("http://imgs1.mxthcdn.com/n/I16gce006nk2098941450_rwSCBi.jpg") no-repeat top center;
            }
            .luck {
                position: relative;
                float: right;
                margin-right: 85px;
                display: inline;
                width: 450px;
                height: 485px;
                text-align: center;
            }
            .luck .hd a,.luck .bd .gift {
                background: url("http://imgs1.mxthcdn.com/d/I16gce07mgp4271535942_clNbBR.jpg") no-repeat;
            }
            .luck .hd a {
                display: inline-block;
                width: 116px;
                height: 30px;
                margin: 5px;
                background-position: -100px 0;
                font-size: 20px;
                color: white;
            }
            .luck .bd .gift {
                height: 350px;
                padding: 11px 14px;
                background-position: 0 -35px;
            }

            /* 开始按钮 */
            .start {
                position: absolute;
                left: 98px;
                top: 141px;
                width: 255px;
                height: 174px;
                cursor: pointer;
            }
            .gift table td {
                width: 85px;
                height: 88px;
            }
            .playcurr{
                background-color:#F60;
                opacity: 0.5;
                filter: Alpha(opacity=50);
            }

            /* 温馨提示 */
            .tips {
                margin-top: 5px;
                text-align: left;
                color: white;
                font-family: "宋体";
            }


        </style>

    </head>
    <body>
        <div class="header"></div>
        <div class="active">
            <div class="active-inner">
                <div class="search">
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>

        </div>
        <div class="wrapper">
            <div class="wrapper-inner">
                <div></div>
                <div class="luck">
                    <div class="hd">
                        <a href="#">抽奖10次</a>
                        <a href="#">抽奖50次</a>
                    </div>
                    <div class="bd">
                        <div class="start"></div>
                        <div class="gift">
                            <table id="tb" cellpaddig="0" cellspacing="0">
                                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                            </table>
                        </div>
                    </div>

                    <script type="text/javascript">

                        $(".start").click(function(){
                            StartGame();
                        })

                        /*
                         * 删除左右两端的空格
                         */
                        function Trim(str){
                            return str.replace(/(^\s*)|(\s*$)/g, "");
                        }

                        /*
                         * 定义数组
                         */
                        function GetSide(m,n){
                            //初始化数组
                            var arr = [];
                            for(var i=0;i<m;i++){
                                arr.push([]);
                                for(var j=0;j<n;j++){
                                    arr[i][j]=i*n+j;
                                }
                            }
                            //获取数组最外圈
                            var resultArr=[];
                            var tempX=0,
                                    tempY=0,
                                    direction="Along",
                                    count=0;
                            while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n)
                            {
                                count++;
                                resultArr.push([tempY,tempX]);
                                if(direction=="Along"){
                                    if(tempX==n-1)
                                        tempY++;
                                    else
                                        tempX++;
                                    if(tempX==n-1&&tempY==m-1)
                                        direction="Inverse"
                                }
                                else{
                                    if(tempX==0)
                                        tempY--;
                                    else
                                        tempX--;
                                    if(tempX==0&&tempY==0)
                                        break;
                                }
                            }
                            return resultArr;
                        }

                        var index=0,           //当前亮区位置
                                prevIndex=0,          //前一位置
                                Speed=300,           //初始速度
                                Time,            //定义对象
                                arr = GetSide(4,5),         //初始化数组
                                EndIndex=0,           //决定在哪一格变慢
                                tb = $("#tb"),     //获取tb对象
                                cycle=0,           //转动圈数
                                EndCycle=0,           //计算圈数
                                flag=false,           //结束转动标志
                                quick= 0,           //加速
                                end = 0;
                        btn = $(".start");

                        function StartGame(){
                            clearInterval(Time);
                            cycle=0;
                            flag=false;
                            EndIndex = 6+Math.floor(Math.random()*10);
                            end = 1+Math.floor(Math.random()*13);
                            //EndCycle=Math.floor(Math.random()*4);
                            EndCycle=1;
                            Time = setInterval(Star,Speed);
                        }

                        function Star(num){
                            //跑马灯变速
                            if(flag==false){
                                //走五格开始加速
                                if(quick==5){
                                    clearInterval(Time);
                                    Speed=50;
                                    Time=setInterval(Star,Speed);
                                }
                                //跑N圈减速
                                if(cycle==EndCycle+1 && index==parseInt(EndIndex)){
                                    clearInterval(Time);
                                    Speed=300;
                                    flag=true;       //触发结束
                                    Time=setInterval(Star,Speed);
                                }
                            }
                            if(index>=arr.length){
                                index=0;
                                cycle++;
                            }

                            //结束转动并选中号码
                            //trim里改成数字就可以减速，变成Endindex的话就没有减速效果了
                            if(flag==true && index==parseInt(end-1)){
                                quick=0;
                                clearInterval(Time);
                            }
                            tb[0].rows[arr[index][0]].cells[arr[index][1]].className="playcurr";
                            if(index>0)
                                prevIndex=index-1;
                            else{
                                prevIndex=arr.length-1;
                            }
                            tb[0].rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className="";
                            index++;
                            quick++;

                        }

                    </script>

                    <div class="tips">
                        <p>
                            温馨提示：<br/>
                            抽奖次数将于11月30号23:59分清空，请您务必在此之前用完抽奖次数！
                            活动中奖名单：“大奖中奖名单详情请点击查看”
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

 

转载于:https://www.cnblogs.com/tattoo/p/3441532.html

weixin_30732825
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现幸运抽奖页面
qq_36190858的博客
03-21 1573
JS实现幸运抽奖页面  JS实现简单的幸运抽奖页面  效果图：  图片素材 ：     代码如下，复制即可使用： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;幸运抽
jquery跑马灯抽奖
啊哈前端的专栏
06-01 866
抽奖
jQuery九宫格抽奖功能的实现
陈大文的博客
10-18 5100
var lottery={     index:-1,    //当前转动到哪个位置，起点位置     count:0,    //总共有多少个位置     timer:0,    //setTimeout的ID，用clearTimeout清除     speed:10,    //初始转动速度     times:0,    //转动次数     cycle:50,    //转动基
Cocos Creator 如何实现类似王者荣耀里积分夺宝抽奖功能！
一枚小工
04-19 938
●效果预览● 操作方法输入框内输入需要中的奖品，方位是 [1,8]，如果需要抽中多个，数字以 / 分割，如上图效果图示例一样。● UI布局ui很简单，三部分组成：奖品列表、输入结果、开...
程序员求签
03-21
插件描述：程序员求签.
jquery实现转盘抽奖功能
01-19
实现这个其实蛮简单的，转动的效果用的jqueryRotate插件，所以只要判断每个奖荐对应的角度，然后设置指针的转动角度就可以了。比如关键的是jqueryRotate这个插件的用法。 jqueryRotate的资料： 支持Internet ...
jQuery实现简单的抽奖游戏
01-19
今天要写的是，利用jQuery写一个...我们主要实现的是功能 首先在body中定义组件 <body> <input type = button class = btn id = start value = 开始> <input type = button class = btn id = stop va
简单的jquery代码实现转盘抽奖效果源码下载
11-04
这里我们探讨的是一种使用jQuery实现的简单转盘抽奖效果。jQuery是一款轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理、动画效果等任务，使得开发者能够快速构建动态交互的网页。 ### 一、jQuery基础 ...
jQuery实现的点名器抽奖特效
06-01
《使用jQuery实现的点名器抽奖特效详解》 在当今的网页开发中，JavaScript库如jQuery极大地简化了DOM操作、事件处理以及动画效果的实现。本篇文章将详细讲解如何利用jQuery来创建一个功能丰富的点名器抽奖特效，...
jquery 抽奖小程序实现代码
10-21
本文将详细介绍如何使用jQuery实现一个简单的抽奖小程序，并探讨其实现原理及关键代码。 首先，HTML结构是抽奖小程序的基础。在这个例子中，我们有一个包含“开始抽奖”按钮的`<div>`元素，其CSS样式定义了抽奖盘的...
【抽奖平台开发（1）】抽奖功能的前端实现（HTML+JS+CSS）
热门推荐
Deng's Blog
08-18 1万+
文章通过使用HTML+JS+CSS，记录了一次抽奖功能的前端实现方法。
jquery实现转盘抽奖
weixin_34192732的博客
07-21 270
jquery实现转盘抽奖 一、总结 一句话总结：这里环形转盘，环形的东西可以化成线性的，然后访问到哪个，给他加上背景为红的样式，用定时器开控制转盘的速度，函数执行的时间间隔越小，就运动的越快。   1、如何实现类似9宫格形式抽奖盘的样式？ 背景图加上表格布局   2、在表格实现类似9宫格形式抽奖盘的样式的时候，最中间的开始抽奖占据的2*2如何留出来？ &lt;td colspan=...
模拟抽奖效果（多线程+定时器 ）
张平的专栏
02-25 1148
此文以模拟抽奖为例介绍多线程的使用。设计handler和定时器Timer的使用。 功能描述： 点击开始抽奖按钮，在屏幕视图框位置显示 抽奖结果筛选 快速随机变换的效果，一定时间后停止变换得出最终中奖结果。 实现步骤： 1、
抽奖随机数产生效果
一只程序媛
03-07 1180
在一定范围内（2~~8），生成一组（4个） 不重复的随机数<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function fn(n){ var b=[]; var Rand =0
利用随机数 产生抽奖结果 输出中奖号码和对应的名称
songbai220
07-15 1622
之前接触到了 猜数字游戏 （给出被猜测的数值 和 最大猜测次数，输出猜测结果) 当时想 既然是游戏 就不应该提前知道 被猜测的数字，所以产生了，利用随机数产生 被猜测数字的想法，经过一番摸索， 最终实现了"真正的猜数字游戏"； 再后来，看到有人利用代码随即产生 n 个数，然后再随机抽取其中一个的案例；感觉自己由学到了一些好东西； 在完善以上代码的时候，"灵光乍现"，产生了，利用随机数抽奖的...
js实现随机数抽奖
gxm13835177730的博客
05-09 6171
&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt;&lt;title&gt;幸运抽奖&lt;/title&gt;&lt;script type="text/javascript"&gt; var randNum=Math.random()*100;function testTime(){document.getEl
抽奖JQ
09-25 192
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>抽签</title> <scriptsrc="jquery-3.4.1.min.js"></script> ...
js框架jquery实现灯光圆盘抽奖程序活动特效
云淡风轻、仅此一抹
06-03 1998
js框架jquery实现灯光圆盘抽奖程序活动特效 源代码下载地址：http://www.zuidaima.com/share/1796540618558464.htm
html+css+js实现抽奖功能
诗雨远方的博客
11-03 1万+
html+css+js实现抽奖功能 一、代码 Document *{ padding: 0; margin: 0; } #uls{ width: 500px; height: 500px; margin: 50px auto; } li{ width: 150px; height: 150px; backgro
JQuery框架实现抽奖
最新发布
12-24
JQuery框架可以通过使用CSS3属性和插件来实现抽奖功能。其中，可以使用jQuery点击翻牌抽奖游戏代码和queryRotate插件来实现这个功能。 以下是一个使用jQuery点击翻牌抽奖游戏代码和queryRotate插件的示例： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值