如何兩步完成一個抽獎小程序
前言
這是一個簡單的抽獎+鬧鐘小程序，起源於本人不想去上課又以爲內心有愧(大學生懂得都懂)，乾脆作一個抽獎系統，讓系統幫我決定是否去上課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 };
}
})
複製代碼
完整效果圖
當時間到了的時候
總結
這只是我臨時興起的一個小項目，若是你以爲還不錯，不妨給個贊鼓勵下，您的鼓勵是我前進的動力。
最後奉上源碼。
相關文章
- 1. 發佈一個JS抽獎小程序
- 2. 抽獎小程序
- 3. 如何用 Python 寫一個簡易的抽獎程序
- 4. 微信小程序 抽獎
- 5. 隨機抽獎小程序
- 6. 如何用C#中的Windows窗體寫一個抽獎小程序。
- 7. 發佈一個圖片抽獎程序
- 8. Axure RP9教程 抽獎小程序
- 9. 用 python 寫一個年會抽獎小程序
- 10. 一個簡單的抽獎（機率）小程序
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • 算法總結-歸併排序
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 發佈一個JS抽獎小程序
- 2. 抽獎小程序
- 3. 如何用 Python 寫一個簡易的抽獎程序
- 4. 微信小程序 抽獎
- 5. 隨機抽獎小程序
- 6. 如何用C#中的Windows窗體寫一個抽獎小程序。
- 7. 發佈一個圖片抽獎程序
- 8. Axure RP9教程 抽獎小程序
- 9. 用 python 寫一個年會抽獎小程序
- 10. 一個簡單的抽獎（機率）小程序