精华内容
下载资源
问答
  • html5 九宫格抽奖

    2018-10-05 10:01:52
    基于html5 的九宫格抽奖页面,代码仅供学习用。无后台支撑代码。做抽奖前段交互的童鞋可以拿去研究研究。
  • 前后端分离,后端为java,(固定中奖概率和变化的概率俩种模式,设定有抽奖次数,预留有关键字(这个比较敏感大家懂的),前端图片可以更换自己想要的图片
  • 九宫格抽奖代码

    2018-01-14 17:00:09
    抽奖类,转盘 源代码,...............................................................................................................................................
  • 九宫格抽奖前端demo

    2020-03-27 11:35:21
    微信端,移动端,电脑端都可以用的九宫格demo。本人已经优化过代码,直接上手就能用。有需要的小伙伴可以下载去用~下期分享常用抽奖后端代码
  • 前端九宫格抽奖代码,把静态数据改成后台api对接,即可使用。前端九宫格抽奖代码,前端九宫格抽奖代码
  • H5+JS九宫格抽奖

    2018-12-07 09:37:20
    简单实用的H5+JS九宫格抽奖,也可后台交互,动态改变奖品配置
  • 年会抽奖代码(刮一刮猜数字抽奖和九宫格翻牌抽奖),演示地址:http://t.iaozi.com/web/choujiang/2016 和 http://t.iaozi.com/web/choujiang/2018
  • jQuery的手机端九宫格转盘抽奖代码</title> <link href="css/layer.css?3.1.64" rel="stylesheet" type="text/css" /> [removed][removed] <style> *, :after, :before { margin: 0; ...
  • 九宫格抽奖- 前后端代码

    万次阅读 2017-11-21 16:11:17
    前端:jq+h5 实现九宫格动效 后端:thinkphp3.2.3 实现中奖概率算法 功能:支持读取数据库预设的中奖率及奖品池,中奖率可以自定义,必须是整数 最终效果如下: 代码: choujiang.html代码如下:&lt;!...

    前言:
    前端:jq+h5 实现九宫格动效
    后端:thinkphp3.2.3 实现中奖概率算法
    功能:支持读取数据库预设的中奖率及奖品池,中奖率可以自定义,必须是整数
    最终效果如下:

    代码:
    choujiang.html代码如下:

    <!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" />
    <meta name="author" content="武当山道士" />
    <title>九宫格抽奖转盘</title>
    <style type="text/css">
    .container{width:100%;height:auto;line-height: 100%;text-align: center;}
    #lottery{width:425px;height:425px;margin:auto;background:#e5e5e5;}
    #lottery table td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999;
    	
    }
    /*#lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}*/
    #lottery table td.active{background-color:#fff333;border-radius: 10px;}
    
    #start {color:white;background:orange;
    	border-radius: 10px;
    	height:130px;
    	line-height: 130px;
    	width:130px;
    	margin: auto;
    	/*margin: 10% 10% 10% 10%;*/
    	text-align: center;
    	display: block;
    	text-decoration: none;
    }
    #con_prize{display: none;margin-top: 10px;}
    #pname{color:red;margin-left: 5px;margin-right: 10px;font-size: 20px;}
    .prize{background:#000 ;opacity: 0.5;
    	height:130px;width: 130px;
    	border-radius: 5px;margin: auto;line-height: 130px;
    	text-shadow: 1px 1px 2px;
    }
    .on{opacity: 1;color:#fff;background: #a5a5d1}
    </style>
    </head>
    <body>
    <div class="container">
    	<div id="lottery">
    	    <table border="0" cellpadding="0" cellspacing="0" style="background:#e3f4a1">
    	        <tr>
    	            <td class="lottery-unit lottery-unit-0"><div class="prize prize-0">安慰奖</div></td>
    	            <td class="lottery-unit lottery-unit-1"><div class="prize prize-1">玩具车</div></td>
    	            <td class="lottery-unit lottery-unit-2"><div class="prize prize-2">自行车</div></td>
    	        </tr>
    	        <tr>
    	            <td class="lottery-unit lottery-unit-7"><div class="prize prize-7">奥迪</div></td>
    	            <td ><a href="#" class = "lottery-unit" id="start">开始抽奖</a></td>
    	            <td class="lottery-unit lottery-unit-3"><div class="prize prize-3">电动车</div></td>
    	        </tr>
    	        <tr>
    	            <td class="lottery-unit lottery-unit-6"><div class="prize prize-6">夏利</div></td>
    	            <td class="lottery-unit lottery-unit-5"><div class="prize prize-5">拖拉机</div></td>
    	            <td class="lottery-unit lottery-unit-4"><div class="prize prize-4">摩托</div></td>
    	        </tr>
    	    </table>
    	</div>
    	<div id="con_prize" data-pname="长宜太盛100元优惠券" data-pid="1">恭喜您获得奖品:<span id="pname"></span><button onclick="getPrize()">领取奖品</button></div>
    </div>
    
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    
    
            var lottery={
                    index:-1,    //当前转动到哪个位置,起点位置
                    count:8,    //总共有多少个奖品位置,9宫格就是8个奖品位置
                    timer:0,    //setTimeout的ID,用clearTimeout清除
                    speed:10,    //初始转动速度
                    times:0,    //转动次数
                    cycle:50,    //转动基本次数:即至少需要转动多少次再进入抽奖环节
                    prize:0,    //默认中奖位置,放默认奖品
                    init:function(id){
                            if ($("#"+id).find(".lottery-unit").length>0) {
                                    $lottery = $("#"+id);
                                    $units = $lottery.find(".lottery-unit");
                                    this.obj = $lottery;
                                    this.count = $units.length;
                                    $lottery.find(".prize-"+this.index).addClass("on");
                            };
                    },
                    roll:function(){
                            var index = this.index;
                            var count = this.count;
                            var lottery = this.obj;
                            $(lottery).find(".prize-"+index).removeClass("on");
                            index += 1;
                            if (index>count-1) {
                                index = 0;
                            };
                            $(lottery).find(".prize-"+index).addClass("on");
                            this.index=index;
                            return false;
                        },
                  	stop:function(index){
                            this.prize=index;
                            return false;
                        }
            };
    
            //存储奖品信息
            var prize_data = {
            	pname:'默认奖品',    //奖品名称
                pnum:0,    //中奖位置 默认0,重要,转盘据此来定位获奖商品
                pid:1,    //奖品id 默认1
            };
    
            
            function roll(){
                lottery.times += 1;
                lottery.roll();
                
                if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
                    clearTimeout(lottery.timer);
                    lottery.times=0;
                    click=false;
                    //显示中奖信息
                    showDetail();
                }else{
                	//速度控制
                    if (lottery.times<lottery.cycle) {
                        lottery.speed -= 10;
                    }else if(lottery.times==lottery.cycle) {
                        index = lottery.prize;     
                    }else{
                        if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                            lottery.speed += 110;
                        }else{
                            lottery.speed += 20;
                        }
                    }
                    if (lottery.speed<40) {
                        lottery.speed=40;
                    };
                    //延时递归调用
                    lottery.timer = setTimeout(roll,lottery.speed);
                    
                }
                
                return false;
            }
            /*
    		 * 获取中奖位置
    		 * @param {string} name 用户昵称(必须)
    		 * @param {string} avatar 微信头像网址(必须)
    		 * @param {string} openid 微信openid(必须,用于验证唯一性,一个用户只能抽奖一次)
    		 * @return {bool} 
    		 */
    		function doRoll(url,name,avatar,openid){
    			$.ajax({ url: url, data:{name:name,avatar:avatar,openid:openid}, async:false,dataType:'json',success: function(rst){
    				lottery.speed=100;
    		        var data = rst.data;
    		        
    		        lottery.prize = data.pnum;
    		        prize_data = {
                    		pname:data.pname,
                    		pnum:data.pnum,
                    		pid:data.pid
                    	};
                    roll();
                    click=true;
                    return false;
    
    	      	}});
    		}
    
            //领奖(跳转收货地址页面,或者弹出收货地址页面)
            function getPrize(){
            	alert("请填写收货地址");
            }
            //清空中奖信息
            function clearDetail(){
            	$("#con_prize").hide();
                $("#pname").html("");
            }
            //显示中奖信息
            function showDetail(){
            	$("#con_prize").show();
                $("#pname").html(prize_data.pname);
            }
    
            var click=false;
    
            window.function(){
            	var url = 'http://test.com/api/Shop/ex/';//这里改成实际后台抽奖接口
                lottery.init('lottery');
                $("#start").click(function(){
                    if (click) {
                        return false;
                    }else{
                    	clearDetail();
                    	doRoll(url,"name","avatar","openid");
                    }
                });
            };
    
    </script>
    </body>
    </html>
    

    thinkphp接口代码如下:

    namespace Api\Controller;
    use Think\Controller;
    class ShopController Extends Controller{
    	/**
         * 抽奖后台接口
         * @author 武当山道士
         */
        
         public function ex(){
            $nick = I('nick','','trim');
            $avatar = I('avatar','','trim');
            $openid = I('openid','','trim');
            //if(empty($nick)) $this->error('empty nick');
            //if(empty($avatar)) $this->error('empty avatar');
            //if(empty($openid)) $this->error('empty openid');
            /*自己封装的error函数,正常应该这样写:
            $this->ajaxReturn(array(
            		'data'=>'',
            		'info'=>$info,
            		'status'=>$status
            	));*/
            	
            //初始化奖品池,8个奖品,满概率100,最小概率为1(id,name以实际数据库取出的数据为准,percent之和等于100)
            $arr8 = array(
                array("id"=>1,"name"=>"安慰奖","percent"=>69),
                array("id"=>2,"name"=>"玩具车","percent"=>10),
                array("id"=>3,"name"=>"自行车","percent"=>6),
                array("id"=>4,"name"=>"电动车","percent"=>5),
                array("id"=>5,"name"=>"摩托","percent"=>4),
                array("id"=>6,"name"=>"拖拉机","percent"=>3),
                array("id"=>7,"name"=>"夏利","percent"=>2),
                array("id"=>8,"name"=>"奥迪","percent"=>1),
                );
            //下标存储数组100个下表,0-7 按概率分配对应的数量
            $indexArr = array();
            for($i=0;$i<sizeof($arr8);$i++){
                for($j=0;$j<$arr8[$i]['percent'];$j++){
                    //index 追加到数组indexArr
                    array_push($indexArr, $i);
                }
            }
            //数组乱序
            shuffle($indexArr);
            //从下标数组中随机取一个下标作为中奖下标,$rand_index 是$indexArr的随机元素的下标(0-99)
            $rand_index = array_rand($indexArr,1);
            //获取中奖信息
            $prize_index = $indexArr[$rand_index];
            $prizeInfo = $arr8[$prize_index];
    
            
            $data['pnum'] = $prize_index;//对应前端奖品编号
            $data['pid'] = $prizeInfo['id'];
            $data['pname'] = $prizeInfo['name'];
            $this->success($data);/*自己封装的success,正常应该这样写 
            $this->ajaxReturn(array(
            		'data'=>$data,
            		'info'=>'成功',
            		'status'=>1
            	));*/
        }
        
    }
    
    展开全文
  • H5小游戏-九宫格抽奖

    2020-04-28 16:44:11
    H5移动端小游戏 - 九宫格抽奖,内容完整,代码简洁,注释明确,特别容易读懂,简易上手使用!(下载后如果需要技术支持可留言博主或者私信)
  • 先给大家展示下效果图: HTML代码: <title-bar :title=title></title-bar> 我的积分: <span>1000</span></p> <li class=row>
  • jquery九宫格图片大转盘抽奖代码,使用jquery制作的大转盘抽奖,现在很多网站都会有抽奖的效果,例如百度知道,如果我们制作一个商城网站,购买商品送积分,那么积分就可以用来抽奖了。php中文网推荐下载!
  • html5双十二购物狂欢节九宫格抽奖代码一款html5双十二购物狂欢节九宫格抽奖页面代码,天猫双12手机抽奖特效。
  • 微信小程序 九宫格抽奖demo 需要自己改些细节
  • JQuery CSS3 登录页 实现 获得焦点之后 提示文字上浮的动画效果 点击抽奖 $btn.click(function () { if (bool) {//若未按下 bool = false; if (data.count > 0) {//若还有次数 data.count--; ...

    jQuery手机端九宫格抽奖代码

    JQuery CSS3 登录页 实现 获得焦点之后 提示文字上浮的动画效果

    点击抽奖

     $btn.click(function () {
            if (bool) {//若未按下
                bool = false;
                if (data.count > 0) {//若还有次数
                    data.count--;
                    $change.html(data.count);
                    clickFn();
                } else {
                    alert("您剩余抽奖次数为0,不能抽奖~");
                }
            }
        });

    点击旋转

     function clickFn() {
            clearInterval(timer);//点击抽奖时清除定时器
            var random = [1, 2, 3, 4, 5, 6, 7, 8];//抽奖概率
            //data为随机出来的结果,根据概率后的结果
            random = random[Math.floor(Math.random() * random.length)];//1-8的随机数
            mark += random;
            mark %= 8;
            //控制概率,永远抽不中谢谢参与
            if (mark === 3) {//抽中第一个谢谢参与则向前一位
                random++;
                mark++;
            }
            if (mark === 6) {//抽中第二个谢谢参与则向后一位
                random--;
                mark--;
            }
            //默认先转4圈
            random += 32;//圈数 * 奖品总数
            //调用旋转动画
            for (var i = 1; i <= random; i++) {
                setTimeout(animate(), 2 * i * i);//第二个值越大,慢速旋转时间越长
            }
            //停止旋转动画
            setTimeout(function () {
                console.log("中了" + mark);
                setTimeout(function () {
                    bool = true;
                    win();
                }, 1000);
            }, 2 * random * random);
        }

    动画效果

     function animate() {
            return function () {
                $blin.toggleClass("blin");//彩灯动画
                //九宫格动画
                length++;
                length %= 8;
                $prize.eq(length - 1).removeClass("select");
                $prize.eq(length).addClass("select");
            }
        }

    在线预览:http://www.jquery66.com/demos/js/j20194102/index.html
    下载地址:https://u18725144.ctfile.com/fs/18725144-357933582

    转载于:https://blog.51cto.com/14168515/2372453

    展开全文
  • html5双十二购物狂欢节九宫格抽奖代码一款html5双十二购物狂欢节九宫格抽奖页面代码,天猫双12手机抽奖特效。
  • JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还...jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。
  • js实现九宫格抽奖

    2021-10-02 15:15:07
    js实现九宫格抽奖一、效果图二、实现思路三、核心代码 一、效果图 二、实现思路 第一步:先建立所有奖品的集合,设置随机奖品的索引 第二步:设置转圈的圈数 第三步:给选到的奖品变换颜色 第四步:设置转圈...

    一、效果图

    在这里插入图片描述

    二、实现思路

    • 第一步:先建立所有奖品的集合,设置随机奖品的索引
    • 第二步:设置转圈的圈数
    • 第三步:给选到的奖品变换颜色
    • 第四步:设置转圈的速度,由慢到快,再由快到慢

    三、核心代码

        //点击开始抽奖
        var item9=document.querySelector(".item-9");
        var item=document.querySelectorAll(".item");
        var isStart=true;
        var time=null;
        var speed=100;
        var index = 0;//随机奖项的索引
        var save=null;
        var count = 0;
        var num = 0;
        var arr = ["笔记本", '电冰箱', '谢谢惠顾', '10元代金券', '5元代金券', '2元代金券', '谢谢惠顾', '水杯(高级)'];
        item9.onclick=function(){
            if(isStart){
                isStart=false;
                index=Math.floor(Math.random()*arr.length);
                Rotate();
            }
        }
        function Rotate(){
            if(num>=item.length){
                num=0;
                count++;
            }
            if(save){
                save.classList.remove("ck");
            }
            item[num].classList.add("ck");
            save=item[num];
            //对speed速度进行设置
            if(count<6){
                speed-=2;//提速
            }
            else{
                //大于等于5圈,开始减速
                speed+=30;
            }
            //限制speed最小值
            if(speed<=10){
                speed=10;
            }
            if(count>=8&&num==index){
                clearTimeout(time);
                return;
            }
            num++;
            time=setTimeout(Rotate,speed);
        } 
    
    展开全文
  • jQuery九宫格转盘抽奖代码基于jQuery.1.2.1.js制作,点击立即抽奖,光标转动随机停留在相应奖品格子。
  • 九宫格抽奖HTML+JS版

    2015-08-25 14:43:00
    html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;style&gt; div{ margin: 100px auto 0px; // ...
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    div{
        margin: 100px auto 0px; // 居中
        width:500px;
        height:250px;
        border:3px solid black; // 边框
    }
    li{ 
        width:129px;
        height:59px; 
        border:3px solid  black; 
        float:left;   // 向左浮动
        margin:8px 0 0 8px; // 设置图片间的间距
        list-style:none;
    }
    .btn{
         border:3px solid blue;  // 设置为红色边框
        cursor:pointer;        // 设置光标类型为指针  
    }
    .cur{
         border:3px solid red;  // 设置为红色边框
    }
    </style>
    <title>zhuanpan</title>
    </head>
    <body>
        <div>
            <ul>
                <li id="c1">1</li>
                <li id="c2">2</li>
                <li id="c3">3</li>
                <li id="c8">谢谢参与</li>
                <li class="btn" onclick="run();">点击抽奖</li>
                <li id="c4">1</li>
                <li id="c7">2</li>
                <li id="c61">3</li>
                <li id="c51">谢谢参与</li>
            </ul>
        </div>
    </body>
    </html>
    
    <script type="text/javascript" src="http://www.jiurong.com/public/2014_2/js/jquery.min.js?v=1.5.5.8.27"></script>
    <script type="text/javascript">
    // 整个转动过程所需的步骤
    
    var step = [
    ['c1',0],    // 第一个元素特殊设置
    ['c1', 500],
    ['c2', 100],
    ['c3', 300],
    ['c4', 200],
    ['c5', 200],
    ['c6', 200],
    ['c7', 200],
    ['c8', 200],
    ['c1', 100],
    ['c2', 100],
    ['c3', 100],
    ['c4', 100],
    ['c5', 100],
    ['c6', 100],
    ['c7', 100],
    ['c8', 100],
    ['c1', 100],
    ['c2', 100],
    ['c3', 100],
    ['c4', 100],
    ['c5', 100],
    ['c6', 100],
    ['c7', 100],
    ['c8', 100],
    ['c1', 100],
    ['c2', 100],
    ['c3', 100],
    ['c4', 100],
    ['c5', 100],
    ['c6', 100],
    ['c7', 100],
    ['c8', 100],
    ['c1', 100],
    ['c2', 200],
    ['c3', 300],
    ['c4', 300],
    ['c5', 300],
    ['c6', 300],
    ['c7', 300],
    ['c8', 300],
    ['c1', 400],
    ['c2', 400],
    ['c3', 400],
    ['c4', 400],
    ['c5', 400],
    ['c6', 400],
    ['c7', 400],
    ['c8', 400]
    ];
    
    // 记录当前步数,即step数组的下标
    var current = 1;
    
    // 设置样式和重新设置定时器
    function run(){
        // 删除之前设置的cur类
        $('#'+step[current-1][0]).removeClass('cur');
        // 为当前元素设置cur类
        $('#'+step[current][0]).addClass('cur');
    
        // 判断step数组所有步骤是否已经走完
        if(current == step.length - 1){  
    
            alert(step[current][0]);
            window.location.reload();
        }else{
            // 重新设置定时器
            setTimeout('run()', step[current][1]);
            current++;
        }
    }
    </script>

     

    展开全文
  • JS九宫格抽奖

    千次阅读 2018-12-13 17:18:02
    注:此篇文章的图片及样式参考https://www.cnblogs.com/starof/p/4933907.html网站,js内容主要是根据自己所学去写的 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&...
  • js:九宫格抽奖

    千次阅读 2017-11-22 17:44:25
    js简单实现九宫格,demo
  • 原生js实现九宫格抽奖

    千次阅读 2019-12-23 09:52:51
    预览效果 完整代码 留意注释文字的解释。记得更换图片。 <!DOCTYPE html> ...html>...meta name="viewport" content="width=device-width, initial-scale=1.0">...JavaScript 实现九宫格抽奖</title> ...
  • 抽奖”是最合适商家产品口碑式的宣传方式,商家通过抽奖提高用户活跃性,来参与活动获奖也可以进一步增加进店率,让想获奖的人在朋友圈主动性进行宣传获得新的抽奖次数:   一、丰富型抽奖活动   为什么称为丰富...
  • 《jQuery》实现一个H5的九宫格抽奖

    千次阅读 2020-06-25 19:06:50
    这是之前在玩游戏的时候,发现平台为了这个游戏做了一个九宫格抽奖,虽然之前业务上没有这方面的需求,但本人对这个很感兴趣,在完成之后,现在有时间因此整理一下供有需求的同学参考; 简介 代码已上传JQ的一个...
  • vue实现九宫格抽奖

    千次阅读 2019-09-04 16:05:20
    html <div class="gameBox"> <div class="bg1"></div> <div class="bg2" v-show="lampShow"></div> <div class="start" @click="move"> <p>({{numb...
  • 九宫格抽奖逻辑梳理

    2020-10-23 10:08:33
    8、九宫格抽奖逻辑梳理 一、页面布局 图一: 【默认九宫格图】 图二: 【九宫格占位图】 HTML页面代码: <!-- center为九宫格区域 --> <div class="center"> <!-- box为九个格子,DOM拼接区域 -...
  • 九宫格抽奖是在移动端常见开发功能点之一,那如何实现一个高度可复用的九宫格逻辑就显的特别重要了。接下来我们来制作一个九宫格。 使用版本 CocosCreator 版本 2.4.3 最终效果 cocos creator目录结构: 代码: ...
  • 效果如上图所示,下面对其实现代码进行分析,看能不能破解其抽奖规则。需要引入jquery-1.8.3.min.js和images/9张图片。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3...
  • react实现九宫格抽奖

    2021-04-28 15:51:32
    九宫格实现抽奖功能 需求: 1.能够实现跑马灯效果(抽奖效果) 2.中奖消息轮播 3.根据后端返回抽中奖品,跑马灯跑到抽中奖品的位置 实现思路: 1.目标:将静态页面布局出来 –奖品卡片组件(基操) –奖品池,将奖品卡片依次...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 284
精华内容 113
关键字:

html九宫格抽奖代码