멀티 그리드 복권 활동 구현-미니 프로그램 개발-php.cn

집

위챗 애플릿

미니 프로그램 개발

멀티 그리드 복권 활동 구현

小云云

Dec 07, 2017 pm 03:31 PM

성취하다운활동

WeChat 미니 프로그램이 점점 더 인기를 얻고 있는 만큼, WeChat 미니 프로그램과 관련된 튜토리얼도 계속해서 공유하고 있습니다. 이 글에서는 WeChat 미니 프로그램의 멀티 제곱 복권 기능을 계속해서 공유하겠습니다.

먼저 효과를 살펴보세요.

먼저 2개 이상의 원을 회전시킨 다음 복권을 그리는 것이 아이디어입니다. 그리드 이동은 setTimeout을 사용하여 서로 다른 시간 간격으로 실행되도록 한 다음 생성합니다. 이동 속도의 영향

자, 코드를 살펴보겠습니다

첫 번째는 WXML입니다. (여기서의 판단은 다소 복잡할 수 있으므로 순서대로 주의 깊게 읽어 보십시오. 5번째와 11번째 그리드는 다른 휴대폰에서 표시하는 데 문제가 있기 때문입니다. 화면 크기가 있으니 다시 해보세요 판단)

<view class="box">
 <view class="boxsub {{luckynum==index?&#39;luck&#39;:&#39;&#39;}}" wx:for=&#39;{{box}}&#39; style="{{index>0&&index<4?&#39;top:0;left:&#39;+index*140+&#39;rpx;&#39;:(index>3&&index<8?&#39;right:0;
 top:&#39;+((index-4)*100)+&#39;rpx;&#39;:(index>7&&index<12?&#39;bottom:0;right:&#39;+(index-7)*140+&#39;rpx;&#39;:(index>11&&index<14?&#39;left:0;bottom:&#39;+(index-11)*100+&#39;rpx;&#39;:&#39;&#39;)))}} 
 {{index==&#39;4&#39;?&#39;top:0;&#39;:&#39;&#39;}} {{index==&#39;11&#39;?&#39;left:0;&#39;:&#39;&#39;}} " wx:key=&#39;&#39;>
   <text class=&#39;boxcontent&#39; style=&#39;{{item.name.length>6?"line-height:40rpx;margin-top:10rpx;":"line-height:100rpx;"}}&#39;>{{item.name}}</text> 
  
 </view>
 <view class="lucky" catchtap="luckyTap">
  <text class="taplucky">点击抽奖</text>
  <text class="howMany">您还有<text class="howMany_num" >{{howManyNum}}</text>次抽奖机会</text>
 </view>
</view>
<view class="explain">

</view>

WXSS:

.box{
 margin:20rpx 25rpx;
 height: 400rpx;
 width: 698rpx;
 /*border:1px solid #ddd;*/
 position: relative;
 /*box-sizing: border-box;*/
}
.boxsub{
 width: 140rpx;
 height: 100rpx;
 /*border: 1px solid #f00;*/
 box-sizing: border-box;
 position: absolute;
 background: #ff6100;
 border: 1rpx solid #fff;
 
}
.boxcontent{
 text-align: center;
 font-size: 26rpx;
 display: block;
 color: #fff;
}
.lucky{
 width: 300rpx;
 height:130rpx;
 background:#ff6100;/* #ff6100;007FFF*/
 position: absolute;
 left: 0;
 bottom: 0;
 right: 0;
 top: 0rpx;
 margin: auto;
}

.lucky:active{
 opacity: 0.7;
}
.taplucky{
 display: block;
 text-align: center;
 font-size: 30rpx;
 line-height: 50rpx;
 height: 50rpx;
 color: #fff;
 margin-top: 20rpx;
}
.howMany{
 display: block;
 text-align: center;
 font-size: 26rpx;
 color: #fff;
 line-height: 40rpx;
 height: 40rpx;
}
.howMany_num{
 color:#007FFF;
 font-size:32rpx;
 line-height:40rpx;
 padding:0 10rpx;
}
.luck{
 opacity: 0.5;
 background: #ff6100;
}

var time = null;//setTimeout的ID，用clearTimeout清除
Page({
 data: {
 box: [{
  name:&#39;100积分&#39;
 }, {
  name: &#39;10元优惠券\n满100可用&#39;
 }, {
  name: &#39;60积分&#39;
 }, {
  name: &#39;30积分&#39;
 }, {
  name: &#39;50积分&#39;
 }, {
  name: &#39;30元优惠券\n满120可用&#39;
 }, {
  name: &#39;100积分&#39;
 }, {
  name: &#39;200积分&#39;
 }, {
  name: &#39;10积分&#39;
 }, {
  name: &#39;50积分&#39;
 }, {
  name: &#39;40积分&#39;
 }, {
  name: &#39;50优惠券满500可用&#39;
 }, {
  name: &#39;60积分&#39;
 }, {
  name: &#39;70积分&#39;
 }],
 luckynum:0,//当前运动到的位置，在界面渲染
 howManyNum:10,//抽奖的剩余次数
 content:{
  index: 0, //当前转动到哪个位置，起点位置
  count: 0, //总共有多少个位置
  speed: 50, //初始转动速度
  cycle: 3*14, //转动基本次数：即至少需要转动多少次再进入抽奖环节，这里设置的是转动三次后进入抽奖环节
 },
 prize:0,//中奖的位置
 luckytapif:true//判断现在是否可以点击
 },
 //点击抽奖
 luckyTap:function(){
 var i=0,
  that=this,
  howManyNum = this.data.howManyNum,//剩余的抽奖次数
  luckytapif = this.data.luckytapif,//获取现在处于的状态
  luckynum = this.data.luckynum,//当前所在的格子
  prize =Math.floor(Math.random()*14) ;//中奖序号,随机生成
 if (luckytapif && howManyNum>0){//当没有处于抽奖状态且剩余的抽奖次数大于零，则可以进行抽奖
  console.log(&#39;prize:&#39;+prize);
  this.data.content.count=this.data.box.length;
  this.setData({
  howManyNum:howManyNum-1//更新抽奖次数
  });
  this.data.luckytapif=false;//设置为抽奖状态
  this.data.prize = prize;//中奖的序号
  this.roll();//运行抽奖函数
 } else if (howManyNum == 0 && luckytapif){
  wx.showModal({
  title: &#39;&#39;,
  content: &#39;您的抽奖次数已经没有了&#39;,
  showCancel:false
  })
 }
 },
//抽奖
 roll:function(){
 var content=this.data.content,
  prize = this.data.prize,//中奖序号
  that=this;
 if (content.cycle - (content.count-prize)>0){//最后一轮的时间进行抽奖
  content.index++;
  content.cycle--;
  this.setData({
  luckynum: content.index%14 //当前应该反映在界面上的位置
  });
  setTimeout(this.roll, content.speed);//继续运行抽奖函数
 }else{
  if (content.index < (content.count*3 + prize)){//判断是否停止

  content.index++; 
  content.speed += (550 /14);//最后一轮的速度，匀加速，最后停下时的速度为550+50
  this.data.content=content;
  this.setData({
   luckynum: content.index % 14
  });
  console.log(content.index, content.speed);//打印当前的步数和当前的速度
  setTimeout(this.roll,content.speed);
  }else{
  //完成抽奖，初始化数据
  console.log(&#39;完成&#39;);
  content.index =0;
  content.cycle = 3 * 14;
  content.speed = 50;
  this.data.luckytapif = true;
  clearTimeout(time);
  wx.showModal({
   title: &#39;&#39;,
   content: &#39;恭喜你抽到了&#39;+that.data.box[prize].name,
   showCancel:false
  })
  }
 }
 },
 onLoad: function (options) {
 
 },
 onReady: function () {
 
 },
 onShow: function () {
 
 },
 onHide: function () {
 
 },
 onUnload: function () {
 
 }
})

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는