精华内容
下载资源
问答
  • 本篇文章主要介绍了原生JS实现九宫格抽奖效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
  • 主要为大家详细介绍了原生JS九宫格抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 一款基于vue.js实现的九宫格抽奖代码,界面UI很精美。参数设置在lottery.js文件里修改,注释很详细。
  • H5+JS九宫格抽奖

    2018-12-07 09:37:20
    简单实用的H5+JS九宫格抽奖,也可后台交互,动态改变奖品配置
  • 前后端分离,后端为java,(固定中奖概率和变化的概率俩种模式,设定有抽奖次数,预留有关键字(这个比较敏感大家懂的),前端图片可以更换自己想要的图片
  • javaScript原生九宫格抽奖插件,适用于跳转性抽奖效果,具体抽奖数目和样式可自行设置 特点:原生插件,体积小 使用方法: var lottery=new Lottery({ prefix:"lottery-unit",//抽奖元素类名前缀 例如:class=...
  • vue.js九宫格抽奖代码是一款基于VUE框架自定义动态数据抽奖奖品,九宫格转盘抽奖效果。
  • 主要介绍了php+lottery.js制作九宫格抽奖实例,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • js 九宫格抽奖

    2021-01-22 14:12:10
    <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...抽奖案例</title> <style> *{margin: 0;padding: 0

    html部分

     <div id="box">
            <div id="wrap"></div>
            <button id="start" class="a"> 开始</button>
             <button id="end" class="a">停止</button>
             <div class="cotion"></div>
        </div>
    

    css部分

      *{margin: 0;padding: 0;}
            #box{
                position: relative;
                width: 800px;
                height: 600px;
                margin: 0 auto;
    
            }
            #wrap{
                width: 600px;
                height: 600px;
                position: relative;
            }
            #wrap div{
                width: 198px;
                height: 198px;
                /* background-color:#ccc;  */
                 border: 1px solid orangered;
                text-align: center;
                line-height: 200px;
                position: absolute;
                
                border-radius: 100px;
               
            }
            #wrap .active{
                background-color: red;
                color: white;
            }
            .a{
                position: absolute;
                left: 200px;
                top: 200px;
                border: 0;
                background: none;
                font-size: 33px;
                font-family: '楷体';
                line-height: 200px;
                text-align: center;
                width: 200px;
                outline: none; 
            }
            #end{display: none;}
            .cotion{
                width: 180px;
                height: 580px;
                position: absolute;
                top: 0;
              left: 600px;
              line-height: 300px;
              padding: 10px;
            }
    

    js部分

     //用户看到的所有 商品
            let goodList  = ['嫁', '不嫁', '嫁', '不嫁', '嫁', '不嫁', '嫁', '不嫁']
            //允许用户抽到的奖品
            let list = ['嫁','嫁','嫁','嫁','嫁','嫁','嫁','嫁']
            //随机商品名
            let wrap = document.querySelector('#wrap')
            let cotion = document.querySelector('.cotion')
            //插入商品
            for (let i = 0; i < goodList.length; i++) {
                wrap.innerHTML += '<div>'+goodList[i]+'</div>';
                
            }
            //调整元素位置
            let itmes  = wrap.children;//拿到所有抽奖div
            itmes[1].style.left='200px'
            itmes[2].style.left='400px'
            itmes[3].style.left='400px'
            itmes[3].style.top='200px'
            itmes[4].style.left='400px'
            itmes[4].style.top='400px'
            itmes[5].style.left='200px'
            itmes[5].style.top='400px'
            itmes[6].style.top='400px'
            itmes[7].style.top='200px'
    
            //记录当前div在数组索引变量
            let x=0
            itmes[x].className = 'active'
            //标记开始的布尔值
            let flag = true  //true代表开始
    
            let start =document.querySelector("#start")
            //初始的切换时间
            let t =200;
            //记录随机商品名称
            let randomGood ;
            //封装一个生成随机概率的方法
            function random(a,b){
                return Math.floor(Math.random()*(b-a+1)+a);
            } 
            let count ;
            //封装一个切换的方法
            let time =null;
            function f (){
                //先清空上一次的active
                itmes[x].className = '';
                x++;
                if(x>7){
                    x=0;
                    count++
                }
                itmes[x].className = 'active'
                if(flag){
                    t-=10;//持续一段时间后保持匀速
                    if(t<=80){
                        t=80;
                    }
                }else{
                   t+=20
                   if(t>=600){
                       t=600
                     
                       //慢匀速 准备抽奖过程
                       if(itmes[x].innerHTML == randomGood){
                           cotion.innerHTML = '恭喜你获得了'+'<b>'+randomGood+'</b>'
                           flag=true;
                           //结束当前方法
                           clearInterval(time);
                           time = null;
                           end.style.display = 'none'
                            start.style.display = 'block'
                           return;
                       } 
                    }
                }
                //开启定时器
               time = setTimeout(f,t)
            }
        
            //开始抽奖
            start.onclick= function(){
                cotion.innerHTML = ''
                     if (time==null){
                        if(flag){
                        t=200;
                        //封装一个随机商品的方法
                        randomGood = list[random(0,list.length-1)]
                        console.log(randomGood);
                        f()
                    }
                }
                end.style.display = 'block'
                start.style.display = 'none'
            }
            //停止
            let end =document.querySelector('#end')
            end.onclick =function(){
                //点击停止的时候 函数是否执行
                flag = false;
                
                
            }
    
    展开全文
  • JS 九宫格抽奖模板

    2016-06-01 16:02:28
    一个简单的九宫格抽奖的模板 一看就会 适合新人 学习 理解原理 老手见笑。
  • 一款简单的vue.js手机移动端九宫格抽奖页面代码,适用于抽奖活动,奖品可以修改换成自己的。
  • vue.js九宫格抽奖代码

    2021-04-25 05:49:08
    vue.js九宫格抽奖代码是一款基于VUE框架自定义动态数据抽奖奖品,九宫格转盘抽奖效果。
  • 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&...

    注:此篇文章的图片及样式参考https://www.cnblogs.com/starof/p/4933907.html网站,js内容主要是根据自己所学去写的

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		ul{ 
    			margin: 0 auto;
    			padding: 0;
    			width: 576px;
    			height: 513px;
    			border:4px solid red;
    			font-size: 0;
    		}
    		li,a{
    			display: inline-block;
    			width: 190px;
    			height: 170px;
    			border:0.5px solid red;
    			font-size: 14px;
    		}
    		ul li .mask{
                width: 190px;
    			height: 170px;
                position: relative;
                left:0;
                top:-172px;
                display: none;
                box-shadow:0px -5px 10px 0px white inset,/* 添加转动时图片的阴影 */
                    -5px 0px 10px 0px white inset,
                    5px 0px 10px 0px white inset,
                    0px 5px 10px 0px white inset; 
                }
            ul .active .mask{
                display: block;
                }
            #page {
                line-height: 32px;
                color: #9a9a9a;
                text-align: center;
                position:absolute;
                left: 50%;
                top: 50px;
                width: 300px;
                height: 50px;
                margin-left: -150px;
                display: none;
                background: #000;
                color: #fff;
            }
    		
    		
    		.act .mask{
    			display: block;
    		}
    	</style>
    </head>
    <body>
    <ul>
    	<li><img class="active" src="images/1.jpg" alt=""><div class="mask"></div></li>
    	<li><img src="images/2.jpg" alt=""><div class="mask"></div></li>
    	<li><img src="images/3.jpg" alt=""><div class="mask"></div></li>
    	<li><img src="images/4.jpg" alt=""><div class="mask"></div></li>
    	<a><img src="images/9.jpg" alt=""></a>
    	<li><img src="images/5.jpg" alt=""><div class="mask"></div></li>
    	<li><img src="images/6.jpg" alt=""><div class="mask"></div></li>
    	<li><img src="images/7.jpg" alt=""><div class="mask"></div></li>
    	<li><img src="images/8.jpg" alt=""><div class="mask"></div></li>
    </ul>
    <div id="page"></div>
    </body>
    <script type="text/javascript">
        
    	var arr=[0,1,2,4,7,6,5,3]  //给图片设置一个转动的方向
    	var arrLi=document.getElementsByTagName("li");
    	var oBtn=document.getElementsByTagName("a")[0];
    	
    	var tim; //时间
    	var index=0  
    	var swh=true
    	oBtn.onclick=function(){
    		
    		if(swh){
    			swh=false;
    			time=setInterval(function(){
    				arrLi[arr[index]].className="";
    			index++;  //将物品连续在一起转动
    			if(index>=8){
    				index=0;
    			}
    			arrLi[arr[index]].className="active"
    		},50);  //转动的速度
    		setTimeout(function(){
    			clearInterval(time);
    			if(index==0){   //抽奖时阻止抽到最好的物品
    				arrLi[arr[index]].className="";
    				arrLi[arr[index+1]].className="active";
    			}
    			
    			swh=true;
    		},Math.random()*500+1000)  //转动的时间
    	}	
    	}	
    		
    		
    	
    	
    </script>
    </html>
    

    在这里插入图片描述

    展开全文
  • js九宫格抽奖

    千次阅读 2020-11-01 21:59:53
    js简易抽奖 今天讲下js抽奖 流程图: 代码部分 首先是html部分和css布局部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style ...

    js简易抽奖

    今天讲下js抽奖
    流程图:在这里插入图片描述

    代码部分
    首先是html部分和css布局部分:
    首先利用绝对定位将每一个按钮的样式固定然后调整样式。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			body {
    				margin: 0;
    			}
    
    			.prize {
    				width: 300px;
    				height: 300px;
    				margin: 50px auto 0 auto;
    				position: relative;
    				background: lightgoldenrodyellow;
    			}
    
    			.prize span {
    				display: block;
    				width: 100px;
    				height: 100px;
    				border: 1px solid #fff;
    				position: absolute;
    				text-align: center;
    				line-height: 80px;
    				background: lightsalmon;
    				font-style: normal;
    				color: #fff;
    			}
    
    			.btn {
    				position: absolute;
    				top: 50%;
    				left: 50%;
    				width: 80px;
    				height: 80px;
    				border-radius: 50%;
    				border: none;
    				margin-left: -40px;
    				margin-top: -40px;
    				background: lightsalmon;
    				outline: none;
    				font-family: "微软雅黑", Arial, sans-serif;
    				font-weight: bold;
    				font-size: 18px;
    				color: #fff;
    				cursor: pointer;
    			}
    
    			.prize span.active {
    				background: lightcoral;
    				color: #fff;
    			}
    
    			.prize span:nth-child(1) {
    				left: 0;
    			}
    
    			.prize span:nth-child(2) {
    				left: 100px;
    			}
    
    			.prize span:nth-child(3) {
    				left: 200px;
    			}
    
    			.prize span:nth-child(4) {
    				top: 100px;
    				left: 200px;
    			}
    
    			.prize span:nth-child(5) {
    				top: 200px;
    				right: 0;
    			}
    
    			.prize span:nth-child(6) {
    				right: 100px;
    				top: 200px;
    			}
    
    			.prize span:nth-child(7) {
    				right: 200px;
    				top: 200px;
    			}
    
    			.prize span:nth-child(8) {
    				left: 0px;
    				top: 100px;
    			}
    
    			div .aa {
    				background: rgb(78, 78, 78);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="prize">
    			<span>100元现金</span>
    			<span>谢谢参与</span>
    			<span>50积分</span>
    			<span>谢谢参与</span>
    			<span>100积分</span>
    			<span>谢谢参与</span>
    			<span>10元现金</span>
    			<span>谢谢参与</span>
    			<button class="btn" id="btn">抽奖</button>
    		</div>
    	</body>
    </html>
    

    js实现部分:

    js这一部分的思路是,利用了每一个span的下标给当前下标添加一个class命名利用class命名添加样式这样就完成了高亮部分。
    首先先要获取到button按钮和所有的奖品标签。

    
    	<script type="text/javascript">
    		var btn = document.getElementById("btn"); //获取button按钮
    		var prize = document.querySelectorAll("div>span"); //获取所有的span
    		// console.log(prize) //打印span
    	</script>
    

    然后利用获取到的随机数,当成转动的圈数

    <script type="text/javascript">
    		function getRandom(n, m) {
    			return Math.floor(Math.random() * (m - n + 1) + n); //获取随机数
    		}
    </script>
    

    点击按钮实现部分:

    然后给按钮添加点击事件,这个点击事件利用forEach循环遍历获取到的奖品数组判断当前的下标是否是1是1的话清除当前的class命名,然后获取下标和随机数每一次确定一个随机数,然后声明旋转圈数,接下来需要if判断当前的下标是否是最后一个或者是清除前第最后一个的class命名,给第一个下标添加class.添加高亮,同理其他的if判断逻辑是这样的。
    最后一个判断是抽奖完成后的善后工作,需要判断当前的圈数是否是大于当前的随机数的,大于就会执行停止定时器和样式的重置,并弹出提示将是否获奖告知用户。

    <script type="text/javascript">
    		btn.onclick = function() {
    			btn.setAttribute("disabled", "disabled");
    			btn.style.backgroundColor = "#FFC8AD";
    			btn.innerHTML = "抽奖中";
    			prize.forEach(function(el, index) {
    				if (index != 0) {
    					el.classList.remove('aa'); // 清空上一次结果
    				}
    				el.classList.add('aa'); // 清空上一次结果
    			})
    			var needNum = -1;//获取下标
    			var rand = getRandom(1, 100);//确定随机数
    			var time = 0;//旋转圈数
    			var speed = 100;//旋转时间
    			timer = setInterval(function() {
    				needNum++;//下标自加
    				time++;//圈数自加
    				console.log(timer)
    				if (needNum > 7) {//判断下标是否大于最后一个
    					needNum = 0;
    					prize[0].classList.add('aa');
    					prize[7].classList.remove('aa');
    				} else if (needNum == 0) {//判断当前下标是否是0
    					prize[needNum].classList.add('aa');
    					prize[7].classList.remove('aa');
    				} else {
    					prize[needNum].classList.add('aa');
    					prize[needNum - 1].classList.remove('aa');
    				}
    				if (time > rand) {//判断当前圈数是否大于随机数实现随机抽奖
    					clearInterval(timer)//清除定时器
    					btn.removeAttribute("disabled");
    					btn.style.backgroundColor = "lightsalmon";
    					btn.innerHTML = "抽奖";
    					prize.forEach(function(el, index) {
    						if (index != 0) {
    							el.classList.remove('aa'); // 清空所有的样式
    						}
    					})
    					alert('恭喜您抽中了' + prize[needNum-1].textContent + '!!!')
    				}
    			}, speed)
    			// console.log(prize)
    		}
    	</script>
    

    完整的dome

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			body {
    				margin: 0;
    			}
    
    			.prize {
    				width: 300px;
    				height: 300px;
    				margin: 50px auto 0 auto;
    				position: relative;
    				background: lightgoldenrodyellow;
    			}
    
    			.prize span {
    				display: block;
    				width: 100px;
    				height: 100px;
    				border: 1px solid #fff;
    				position: absolute;
    				text-align: center;
    				line-height: 80px;
    				background: lightsalmon;
    				font-style: normal;
    				color: #fff;
    			}
    
    			.btn {
    				position: absolute;
    				top: 50%;
    				left: 50%;
    				width: 80px;
    				height: 80px;
    				border-radius: 50%;
    				border: none;
    				margin-left: -40px;
    				margin-top: -40px;
    				background: lightsalmon;
    				outline: none;
    				font-family: "微软雅黑", Arial, sans-serif;
    				font-weight: bold;
    				font-size: 18px;
    				color: #fff;
    				cursor: pointer;
    			}
    
    			.prize span.active {
    				background: lightcoral;
    				color: #fff;
    			}
    
    			.prize span:nth-child(1) {
    				left: 0;
    			}
    
    			.prize span:nth-child(2) {
    				left: 100px;
    			}
    
    			.prize span:nth-child(3) {
    				left: 200px;
    			}
    
    			.prize span:nth-child(4) {
    				top: 100px;
    				left: 200px;
    			}
    
    			.prize span:nth-child(5) {
    				top: 200px;
    				right: 0;
    			}
    
    			.prize span:nth-child(6) {
    				right: 100px;
    				top: 200px;
    			}
    
    			.prize span:nth-child(7) {
    				right: 200px;
    				top: 200px;
    			}
    
    			.prize span:nth-child(8) {
    				left: 0px;
    				top: 100px;
    			}
    
    			div .aa {
    				background: rgb(78, 78, 78);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="prize">
    			<span>100元现金</span>
    			<span>谢谢参与</span>
    			<span>50积分</span>
    			<span>谢谢参与</span>
    			<span>100积分</span>
    			<span>谢谢参与</span>
    			<span>10元现金</span>
    			<span>谢谢参与</span>
    			<button class="btn" id="btn">抽奖</button>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var btn = document.getElementById("btn"); //获取button按钮
    		var prize = document.querySelectorAll("div>span"); //获取所有的span
    		// console.log(prize) //打印span
    		function getRandom(n, m) {
    			return Math.floor(Math.random() * (m - n + 1) + n); //获取随机数
    		}
    		btn.onclick = function() {
    			btn.setAttribute("disabled", "disabled");
    			btn.style.backgroundColor = "#FFC8AD";
    			btn.innerHTML = "抽奖中";
    			prize.forEach(function(el, index) {
    				if (index != 0) {
    					el.classList.remove('aa'); // 清空上一次结果
    				}
    				el.classList.add('aa'); // 清空上一次结果
    			})
    			var needNum = -1;//获取下标
    			var rand = getRandom(1, 100);//确定随机数
    			var time = 0;//旋转圈数
    			var speed = 100;//旋转时间
    			timer = setInterval(function() {
    				needNum++;//下标自加
    				time++;//圈数自加
    				console.log(timer)
    				if (needNum > 7) {//判断下标是否大于最后一个
    					needNum = 0;
    					prize[0].classList.add('aa');
    					prize[7].classList.remove('aa');
    				} else if (needNum == 0) {//判断当前下标是否是0
    					prize[needNum].classList.add('aa');
    					prize[7].classList.remove('aa');
    				} else {
    					prize[needNum].classList.add('aa');
    					prize[needNum - 1].classList.remove('aa');
    				}
    				if (time > rand) {//判断当前圈数是否大于随机数实现随机抽奖
    					clearInterval(timer)//清除定时器
    					btn.removeAttribute("disabled");
    					btn.style.backgroundColor = "lightsalmon";
    					btn.innerHTML = "抽奖";
    					prize.forEach(function(el, index) {
    						if (index != 0) {
    							el.classList.remove('aa'); // 清空所有的样式
    						}
    					})
    					alert('恭喜您抽中了' + prize[needNum-1].textContent + '!!!')
    				}
    			}, speed)
    			// console.log(prize)
    		}
    	</script>
    </html>
    
    展开全文
  • js实现九宫格抽奖

    2020-10-15 12:08:08
    主要为大家详细介绍了js实现九宫格抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 题:九宫格抽奖 上代码: <div class="wrapper"> <div>谢谢惠顾</div> <div>十万元现金</div> <div>谢谢惠顾</div> <div>iphone11</div> <div>...

    题:九宫格抽奖

    上代码:

    <div class="wrapper">
            <div>谢谢惠顾</div>
            <div>十万元现金</div>
            <div>谢谢惠顾</div>
            <div>iphone11</div>
            <div>抽奖</div>
            <div>美的冰箱</div>
            <div>谢谢惠顾</div>
            <div>50元红包</div>
            <div>谢谢惠顾</div>
        </div>
        <div class="result"></div>
    

    CSS样式代码:

    <style>
            .wrapper {
                width: 300px;
                height: 300px;
                display: flex;
                flex-flow: row wrap;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                border: 1px solid red;
            }
            
            .wrapper div {
                flex: none;
                width: 100px;
                height: 100px;
                box-sizing: border-box;
                border: 1px solid red;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .active {
                background-color: red;
            }
            
            .wrapper div:nth-child(5) {
                cursor: pointer;
            }
            
            .result {
                height: 100px;
                display: inline-block;
                position: absolute;
                top: 50px;
                left: 0;
                right: 0;
                margin: auto;
                text-align: center;
                line-height: 100px;
                font-size: 40px;
                font-weight: 700;
                color: #ff4400;
            }
        </style>
    

    JS代码:

    <script>
            var t, m, num, time, index, target, current;
            //以索引值为0,1,2,5,8,7,6,3的div元素为循环目标,
            //因为以num总数递减的方式进行循环,故将数组倒序定义
            var arr = [3, 6, 7, 8, 5, 2, 1, 0];
            var div = document.querySelectorAll('.wrapper div');
            var result = document.querySelector('.result');
            div[4].onclick = function() {
                clearInterval(time);
                div[4].innerHTML = '抽奖中...';
                result.innerHTML = '';
                //中奖目标设为0到7的随机整数
                target = Math.floor(Math.random() * 8);
                //起始位置设为随机,且以num为总的循环数
                num = Math.floor(Math.random() * 8) + 40;
                //将总循环数的2/3保存,方便调整速率峰值出现的时间
                //若m为总循环的1/2,则速度峰值会在总时长的中间出现
                m = Math.floor(num * 2 / 3);
                //此处if语句可限制中奖,从第一个开始外圈顺时针分别对应7,6,5,4,3,2,1,0
                //如设置target == 6 即限制中十万元现金,以下代码为100%不中奖
                if (target == 6|| target == 4 || target == 2 || target == 0) { 
                     target++;
                 }
                speed();
    
                function speed() {
                    //将循环目标div的索引值转换为循环总数的表达式
                    index = arr[num % 8];
                    //给当前循环元素添加样式,并移除之前的样式
                    if (current) {
                        current.remove('active');
                    }
                    div[index].classList.add('active');
                    current = div[index].classList;
                    //速度函数,可调试速率
                    t = Math.floor(Math.pow((num - m), 2) + 250);
                    //一次性定时器,嵌套递归循环控制速度
                    time = setTimeout(function() {
                            speed()
                        }, t)
                    //判断中奖结果
                    if (num == target) {
                        clearTimeout(time);
                        div[4].innerHTML = '抽奖';
                        switch (target) {
                            case 6:
                                result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML + '大奖';
                                break;
                            case 4:
                                result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML;
                                break;
                            case 2:
                                result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML;
                                break;
                            case 0:
                                result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML;
                                break;
                            default:
                                result.innerHTML = div[arr[target % 8]].innerHTML;
                        }
                    }
                    num--;
                }
            }
        </script>
    
    展开全文
  • 原生JS 九宫格抽奖

    2020-03-18 16:44:29
    九宫格抽奖 DEMO:传送门 源码:传送门 <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js l...
  • 简洁轻量的抽奖插件,未压缩,源码清晰明了。自己纯手敲。
  • 原生js 实现九宫格抽奖功能

    千次阅读 2021-01-08 11:45:55
    1.先绘制一个九宫格轮盘 <div class="bodydom"> <div class="block">鸿蒙紫气*1</div> <div class="block">现金百万*1</div> <div class="block">复活戒指*1</div> &...
  • 随机闪烁九宫格抽奖js特效代码,用padding实现高度自适应,百分比实现宽度自适应,整体九宫格适应屏幕,并随机获取标签和颜色,利用定时器实现开始和停止。
  • 基础CSS+JS练习,小白入门级。
  • 前端九宫格抽奖

    2018-12-07 14:36:47
    基于前端的九宫格抽奖,可以设定抽奖的几率,抽奖的位置,抽奖结束之后的弹框
  • js九宫格抽奖

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

    千次阅读 2019-12-23 09:52:51
    预览效果 完整代码 留意注释文字的解释。记得更换图片。 <!DOCTYPE html> ...meta name="viewport" content="width=device-width, initial-scale=1.0">...JavaScript 实现九宫格抽奖</title> ...
  • js代码 ```javascript //每个单元格 var divnum=document.getElementsByClassName("num"); //开始按钮 var startbtn=document.getElementById("start"); //随机的停止位(整数) var stopPosition =Math.floor(Math....
  • 如何优雅的实现一个九宫格抽奖

    千次阅读 2020-06-28 17:00:18
    作者:黄鹏如何优雅的实现一个九宫格抽奖九宫格抽奖是在移动端常见开发功能点之一,那如何实现一个高度可复用的九宫格逻辑就显的特别重要了。接下来我们来分析下如何实现一个优雅的抽奖功能。功能分析...
  • 微信小程序 九宫格抽奖demo 需要自己改些细节

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 571
精华内容 228
关键字:

js九宫格抽奖