Implementing the effect of the nine-square grid carousel based on javascript

Home

Web Front-end

JS Tutorial

Implementing the effect of the nine-square grid carousel based on javascript_javascript skills

May 16, 2016 pm 03:07 PM

The example in this article shares with you the js implementation of the lucky draw nine-square grid wheel effect for your reference. The specific content is as follows

Implementation code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;九宫格大转盘&lt;/title&gt;
 &lt;style type="text/css"&gt;
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
#lottery{width:400px;height:400px;margin:20px auto 0; position:relative;}
#lottery div{width:100px;height:100px;text-align:centerfont-size:24px;color:#333; float:left;}
#lottery .cent{ background:#C33;}
#lottery .lottery-unit-0{ background:#CC6;}
#lottery .lottery-unit-1{ background:#F99;}
#lottery .lottery-unit-2{ background:#CC6;}
#lottery .lottery-unit-3{ background:#F99;}
#lottery .lottery-unit-4{ background:#CC6;}
#lottery .lottery-unit-5{ background:#F99;}
#lottery .lottery-unit-6{ background:#CC6;}
#lottery .lottery-unit-7{ background:#F99;}
#lottery .lottery-unit-8{ background:#CC6;}
#lottery .lottery-unit-9{ background:#F99;}
#lottery .lottery-unit-10{ background:#CC6;}
#lottery .lottery-unit-11{ background:#F99;}

#lottery div.select{background:#F0F;}

#lottery .start{ position:absolute; left:100px; top:100px; height:200px; width:200px;background:#C33; font-size:30px; text-align:center; cursor:pointer; line-height:200px; color:#fff;}
&lt;/style&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt; 
 &lt;!--九宫格大转盘--&gt;
 &lt;div id="lottery"&gt;
  
  &lt;div class="lottery-unit lottery-unit-0"&gt;1&lt;/div&gt;
  &lt;div class="lottery-unit lottery-unit-1"&gt;2&lt;/div&gt;
  &lt;div class="lottery-unit lottery-unit-2"&gt;3&lt;/div&gt;
  &lt;div class="lottery-unit lottery-unit-3"&gt;4&lt;/div&gt;
  
  &lt;div class="lottery-unit lottery-unit-11"&gt;12&lt;/div&gt;   
  &lt;div class="cent"&gt;&lt;/div&gt;
  &lt;div class="cent"&gt;&lt;/div&gt;   
  &lt;div class="lottery-unit lottery-unit-4"&gt;5&lt;/div&gt;
  
  &lt;div class="lottery-unit lottery-unit-10"&gt;11&lt;/div&gt;   
  &lt;div class="cent"&gt;&lt;/div&gt;
  &lt;div class="cent"&gt;&lt;/div&gt;   
  &lt;div class="lottery-unit lottery-unit-5"&gt;6&lt;/div&gt;
 
  &lt;div class="lottery-unit lottery-unit-9"&gt;10&lt;/div&gt;
  &lt;div class="lottery-unit lottery-unit-8"&gt;9&lt;/div&gt;
  &lt;div class="lottery-unit lottery-unit-7"&gt;8&lt;/div&gt;
  &lt;div class="lottery-unit lottery-unit-6"&gt;7&lt;/div&gt;

  &lt;div class="start" id="start"&gt;抽奖&lt;/div&gt;
 &lt;/div&gt;
&lt;/body&gt;
&lt;script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function(){
 //九宫格大转盘
 var count=3;//可用次数 
 var i=null;//初始位置，
 var speed=80;//转动速度
 var ok=null;//产生0-11的整数，标记中奖位置
 var count=null;//总变化次数
 var nowcount=null;//当前的变化位置
 var n=5;//圈数
 var paly=false;
 var xq=0;
 function dong(){//利用递归模拟setinterval的实现 
 if(nowcount&gt;count){
 setTimeout(function(){
 paly=false;
 alert("恭喜你，中了"+eval(ok)+"等奖");
 },500);
 }else{ 
 nowcount+=1;
 if(i&gt;10){ 
 xq+=1; 
 if(xq==n-1){
  speed=300;
 }; 
 $(".lottery-unit").removeClass("select");
 $(".lottery-unit-11").addClass("select");
 i=0;
 }else{
 $(".lottery-unit").removeClass("select");
 $(".lottery-unit-"+i).addClass("select");
 i+=1;
 };
 setTimeout(dong,speed); 
 }; 
 
 }; 
 $(".start").click(function(){
 if(!paly){
 if(count==0){
 alert("已经没有机会，下次再来！");
 }else{
 ok=Math.floor((Math.random()*12));//产生0-11的整数，标记中奖位置
 count=n*12+ok;//总变化次数
 nowcount=0;//当前的变化位置
 i=0;//初始位置，
 paly=true;
 count-=1;
 dong();
 };
 
 }else{
 
 };
 
 }); 
});
&lt;/script&gt;
&lt;/html&gt;

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn