preface

This is a simple lottery + alarm clock small procedures, originated from I do not want to go to class and feel guilty (college students know all understand), simply do a lottery system, let the system to help me decide whether to go to class

The author is a college student and front end small white, just began to learn front end, this small program is a consolidation practice project, if there is a mistake in the article welcome correction

describe

My idea is that the page is divided into front page and the alarm page, home page click button random one option Popup corresponding prompt box according to the selected options, if the selected options for time, page jump to the alarm clock, alarm clock page start the countdown, time to play after the alarm and pop-up prompts, let’s begin

The first step

page

Page aspect is relatively simple, the home page is to put nine pictures in the form of nine grid, here directly affixed with the code

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>
Copy the code

Our page should look something like this

⚡ means go to class immediately, 😠 means don’t go to class, and the graph found in Iconfont is true and somewhat abstract 😃

It is worth noting that the transparency and address of the picture are put in an array, which is convenient to realize the function of rotation later. The initial data is

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
  },
Copy the code

The second step

Began to draw

Before doing so, define global variables in app.js

globalData: {
  number: 0.numbers: 0.remainTime: 0
}
Copy the code

Click to start the lottery set the button as unclickable, and generate a random number of 1-7, according to the generated random number to change the transparency of the picture to achieve the effect of drawing, and then send the global variable to the alarm page

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((a)= > {
      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((a)= > {
      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((a)= > {
      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((a)= > {
          if (which == 0 || which == 3 || which == 6) {
            wx.showModal({
              title: 'tip'.content: 'Don't be lazy. Go to class now.'.showCancel: false,
              success(res) {
                self.setData({
                  btnconfirm: '/images/dianjichoujiang.png'.clickLuck: 'clickLuck'
                })
                self.loadAnimation()
              }
            })
          } else if (which == 1 || which == 5) {
            wx.showModal({
              title: 'tip'.content: 'Come back to class in five minutes and hit OK to start the timer.'.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: 'tip'.content: 'Come back to class in 30 minutes and hit OK to start the timer.'.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: 'tip'.content: 'Come back to class in an hour and hit OK to start the timer.'.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: 'tip'.content: 'I'm a little tired today, so I'm not going to class.'.showCancel: false,
              success(res) {
                self.setData({
                  btnconfirm: '/images/dianjichoujiang.png'.clickLuck: 'clickLuck',
                })
                self.loadAnimation()
              }
            })
          }
        },1000)
      }
    },time)
  },
Copy the code

Now that a simple sweepstakes feature is complete, let’s take a look

shuffling

loadAnimation() {
    let self = this
    let index = 0
    interval = setInterval((a)= > {
      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)}Copy the code

Put it into the onLoad life cycle and the sweepstakes page is complete

The alarm page

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">Click on the draw</botton>
		</view>
		<view wx:if="{{number ! = 0}}">
			<botton class="btn" loading="{{loading}}" disabled="{{disabled}}" bindtap="primary_fq">Time to give up</botton>
		</view>
</view>
Copy the code

The initial data is

data: {
    number: 0.numbers: 0.listData: [{id: 0.remainTime: 0}},Copy the code

The countdown

The idea here is to use a timer to reduce the array according to the data returned from the home page

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: 'clock'.coverImgUrl: ' '
        })
        wx.showModal({
          title: 'tip'.content: 'Time's up! '.showCancel: false,
          success(res) {
            wx.pauseBackgroundAudio()
          }
        })
      }
      return e;
    })
    this.setData({
        listData: list
    });
    setTimeout(this.setCountDown, time);
  },
Copy the code

GetFormat () is a function that formats the time

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 }; }})Copy the code

Full rendering

When the time is up

conclusion

This is just a small project I started temporarily. If you think it is good, you may as well give me a thumbs-up and encouragement. Your encouragement is my motivation to move forward. Finally, the source code.