用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

如何兩步完成一個抽獎小程序

Rolan 2019-7-4 00:49

前言 這是一個簡單的抽獎+鬧鐘小程序,起源于本人不想去上課又覺得心里有愧(大學生懂得都懂),干脆做一個抽獎系統,讓系統幫我決定是否去上課 作者是一名在校大學生兼前端小白,剛開始學習前端,這個小程序算是一個 ...

前言

這是一個簡單的抽獎+鬧鐘小程序,起源于本人不想去上課又覺得心里有愧(大學生懂得都懂),干脆做一個抽獎系統,讓系統幫我決定是否去上課

作者是一名在校大學生兼前端小白,剛開始學習前端,這個小程序算是一個鞏固練手項目吧,若文章中有錯誤的地方歡迎指正

描述

我的想法是把頁面分為首頁和鬧鐘頁,首頁實現點擊按鈕隨機抽取一個選項 根據所選中的選項彈出相應的提示框,若選中的選項為時間,則跳轉到鬧鐘頁,鬧鐘頁開始倒計時,時間到了之后播放鬧鈴并彈出提示框,下面讓我們開始吧

第一步

頁面

頁面方面比較簡單,首頁就是把九張圖片以九宮格的形式放置,這里直接貼上代碼

index.html

<view class="container">
  <view class='frame_view'>
    <view class='frame_row'>
      <image class='frame_item' style='opacity:{{color[0]}}' src='{{images[0]}}'></image>
      <image class='frame_item' style='opacity:{{color[1]}}' src='{{images[1]}}'></image>
      <image class='frame_item' style='opacity:{{color[2]}}' src='{{images[2]}}'></image>
    </view>
    <view class='frame_row'>
      <image class='frame_item' style='opacity:{{color[7]}}' src='{{images[7]}}'></image>
      <image class='frame_item' src='{{btnconfirm}}' bindtap='{{clickLuck}}'></image>
      <image class='frame_item' style='opacity:{{color[3]}}' src='{{images[3]}}'></image>
    </view>
    <view class='frame_row'>
      <image class='frame_item' style='opacity:{{color[6]}}' src='{{images[6]}}'></image>
      <image class='frame_item' style='opacity:{{color[5]}}' src='{{images[5]}}'></image>
      <image class='frame_item' style='opacity:{{color[4]}}' src='{{images[4]}}'></image>
    </view>
  </view>
</view>
復制代碼

這時我們的頁面應該是這樣的

閃電代表的是立即去上課, 微笑代表的是不去上課,Iconfont里找的圖屬實有點抽象 

值得注意的是這里把圖片的透明度和地址都放在了一個數組里,方便后面實現輪播的功能,初始數據為

data: {
    color: [0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5],
    images: ['/images/likequ.png', '/images/fiveminutes.png', '/images/thirtyminutes.png', '/images/likequ.png', '/images/onehour.png', '/images/fiveminutes.png', '/images/likequ.png', '/images/buqu.png'],
    btnconfirm: '/images/dianjichoujiang.png',
    clickLuck: 'clickLuck',
    luckPosition: 0
  },
復制代碼

第二步

開始抽獎

在此之前先在app.js中定義全局變量

globalData: {
  number: 0,
  numbers: 0,
  remainTime: 0
}
復制代碼

點擊開始抽獎之后設置按鈕為不可點擊,并生成一個1-7的隨機數,根據生成的隨機數改變圖片的透明度實現抽中效果,之后把全局變量傳給鬧鐘頁面

index.js

clickLuck() {
    let self = this
    self.setData({
      btnconfirm: '/images/bunengdianji.png',
      clickLuck: '',
      luckPosition: parseInt(Math.random()*8)
    })

    clearInterval(interval)
    let index = 0
    interval = setInterval(() => {
      if (index > 7) {
        index = 0
        self.data.color[7] = 0.5
      } else if (index !=0) {
        self.data.color[index-1] = 0.5
      }
      self.data.color[index] = 1
      self.setData({
        color: self.data.color
      })
      index++
    },intime)
    setTimeout(() => {
      self.stop(self.data.luckPosition)
    },2000)
  },
  stop(which) {
    let self = this
    clearInterval(interval)
    let current = -1
    let color = self.data.color
    for(let i=0;i<color.length;i++) {
      if(color[i] == 1) {
        current = i
      }
    }
    let index = current + 1
    self.stopLuck(which, index, intime, 10)
  },
  stopLuck(which, index, time, splittime) {
    let self = this
    let color = self.data.color
    setTimeout(() => {
      if(index > 7) {
        index = 0
        color[7] = 0.5
      } else if (index != 0) {
        color[index - 1] = 0.5
      }
      color[index] = 1
      self.setData({
        color
      })
      if (time < 400 || index != which) {
        splittime++
        time +=splittime
        index++
        self.stopLuck(which, index, time, splittime)
      } else {
        setTimeout(() => {
          if (which == 0 || which == 3 || which == 6) {
            wx.showModal({
              title: '提示',
              content: '別偷懶,立刻去上課',
              showCancel: false,
              success(res) {
                self.setData({
                  btnconfirm: '/images/dianjichoujiang.png',
                  clickLuck: 'clickLuck'
                })
                self.loadAnimation()
              }
            })
          } else if (which == 1 || which == 5) {
            wx.showModal({
              title: '提示',
              content: '五分鐘后再去上課,點擊確定開始計時',
              showCancel: false,
              success(res) {
                wx.switchTab({
                  url:"/pages/clock/clock",
                  success: function(res) {
                    getApp().globalData.number = 1;
                    getApp().globalData.numbers = 1;
                    getApp().globalData.remainTime = 300000;
                  }
                })
              }
            })
          } else if (which == 2) {
            wx.showModal({
              title: '提示',
              content: '三十分鐘后再去上課,點擊確定開始計時',
              showCancel: false,
              success(res) {
                wx.switchTab({
                  url:"/pages/clock/clock",
                  success: function(res) {
                    getApp().globalData.number = 2;
                    getApp().globalData.numbers = 2;
                    getApp().globalData.remainTime = 1800000;
                  }
                })
              }
            })
          } else if (which == 4) {
            wx.showModal({
              title: '提示',
              content: '一小時后再去上課,點擊確定開始計時',
              showCancel: false,
              success(res) {
                wx.switchTab({
                  url:"/pages/clock/clock",
                  success: function(res) {
                    getApp().globalData.number = 3;
                    getApp().globalData.numbers = 3;
                    getApp().globalData.remainTime = 3600000;
                  }
                })
              }
            })
          } else {
            wx.showModal({
              title: '提示',
              content: '今天有點累,就不去上課了吧',
              showCancel: false,
              success(res) {
                self.setData({
                  btnconfirm: '/images/dianjichoujiang.png',
                  clickLuck: 'clickLuck',
                })
                self.loadAnimation()
              }
            })
          }
        },1000)
      }
    },time)
  },
復制代碼

現在一個簡單的抽獎功能已經完成了,讓我們看下效果

輪播

接下來讓我們實現一下輪播的效果,就像小時候玩的老虎機一樣,當沒有人在玩的時候,它會自動轉動
loadAnimation() {
    let self = this
    let index = 0
    interval = setInterval(() => {
      if (index > 7) {
        index = 0
        self.data.color[7] = 0.5
      } else if (index !=0) {
        self.data.color[index-1] = 0.5
      }
      self.data.color[index] = 1
      self.setData({
        color: self.data.color
      })
      index++
    },100)
  }
復制代碼

把它放入onLoad生命周期中,這樣抽獎頁面就完成了

鬧鐘頁面

clock.html

<view class="container">
		<view class="clock">
			<view>{{listData[0].countDown}}</view>
		</view>
		<view wx:if="{{number == 0}}">
			<botton class="btn" loading="{{loading}}" disabled="{{disabled}}" bindtap="primary">點擊抽獎</botton>
		</view>
		<view wx:if="{{number != 0}}">
			<botton class="btn" loading="{{loading}}" disabled="{{disabled}}" bindtap="primary_fq">放棄計時</botton>
		</view>
</view>
復制代碼

初始數據為

data: {
    number: 0,
    numbers: 0,
    listData: [
      {
        id: 0,
        remainTime: 0
      }
    ]
  },
復制代碼

倒計時

這里的思路是根據首頁傳回來的數據用定時器對數組進行減少處理

setCountDown () {
    let time = 1000;
    let { listData } = this.data;
    let list = listData.map((e) =>{
      if (e.remainTime <= 0) {
          e.remainTime = 0;
      }
      let formatTime = this.getFormat(e.remainTime);
      e.remainTime -= time;
      e.countDown = `${formatTime.mm}:${formatTime.ss}`;
      if (e.remainTime == 0) {
        wx.playBackgroundAudio({
          dataUrl: '/images/naozhong.mp3',
          title: '鬧鐘',
          coverImgUrl: ''
        })
        wx.showModal({
          title: '提示',
          content: '時間到啦!',
          showCancel: false,
          success(res) {
            wx.pauseBackgroundAudio()
          }
        })
      }
      return e;
    })
    this.setData({
        listData: list
    });
    setTimeout(this.setCountDown, time);
  },
復制代碼

getFormat()是一個格式化時間的函數

getFormat (msec) {
    let ss = parseInt(msec / 1000);
    let ms = parseInt(msec % 1000);
    let mm = 0;
    let hh = 0;
    if (ss > 60) {
      mm = parseInt(ss / 60);
      ss = parseInt(ss % 60);
      if (mm > 60) {
        hh = parseInt(mm / 60);
        mm = parseInt(mm % 60);
      }
    }
    ss = ss > 9 ? ss : `0${ss}`;
    mm = mm > 9 ? mm : `0${mm}`;
    hh = hh > 9 ? hh : `0${hh}`;
    return { ms, ss, mm, hh };
  }
})
復制代碼

完整效果圖

當時間到了的時候

總結

這只是我臨時興起的一個小項目,如果你覺得還不錯,不妨給個贊鼓勵下,您的鼓勵是我前進的動力。
最后奉上源碼


鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 三口木 來自: 掘金
致青春APP