前言
这是一个简单的抽奖+闹钟小程序，起源于本人不想去上课又觉得心里有愧(大学生懂得都懂)，干脆做一个抽奖系统，让系统帮我决定是否去上课
作者是一名在校大学生兼前端小白，刚开始学习前端，这个小程序算是一个巩固练手项目吧，若文章中有错误的地方欢迎指正
描述
我的想法是把页面分为首页和闹钟页，首页实现点击按钮随机抽取一个选项 根据所选中的选项弹出相应的提示框，若选中的选项为时间，则跳转到闹钟页，闹钟页开始倒计时，时间到了之后播放闹铃并弹出提示框，下面让我们开始吧
第一步
页面
页面方面比较简单，首页就是把九张图片以九宫格的形式放置，这里直接贴上代码
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 };
}
})
完整效果图
当时间到了的时候
总结
这只是我临时兴起的一个小项目，如果你觉得还不错，不妨给个赞鼓励下，您的鼓励是我前进的动力。
最后奉上源码。
