如何两步完成一个抽奖小程序

时间 2019-11-30

标签如何两步完成一个抽奖程序繁體版

原文原文链接

前言

这是一个简单的抽奖+闹钟小程序，起源于本人不想去上课又以为内心有愧(大学生懂得都懂)，干脆作一个抽奖系统，让系统帮我决定是否去上课html

做者是一名在校大学生兼前端小白，刚开始学习前端，这个小程序算是一个巩固练手项目吧，若文章中有错误的地方欢迎指正前端

描述

个人想法是把页面分为首页和闹钟页，首页实现点击按钮随机抽取一个选项根据所选中的选项弹出相应的提示框，若选中的选项为时间，则跳转到闹钟页，闹钟页开始倒计时，时间到了以后播放闹铃并弹出提示框，下面让咱们开始吧git

第一步

页面

页面方面比较简单，首页就是把九张图片以九宫格的形式放置，这里直接贴上代码github

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里找的图属实有点抽象😃数组

值得注意的是这里把图片的透明度和地址都放在了一个数组里，方便后面实现轮播的功能，初始数据为app

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中定义全局变量dom

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 };
  }
})
复制代码

完整效果图

当时间到了的时候

总结

这只是我临时兴起的一个小项目，若是你以为还不错，不妨给个赞鼓励下，您的鼓励是我前进的动力。
最后奉上源码。