获取幸运数
Posted web晨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取幸运数相关的知识，希望对你有一定的参考价值。
1、html 部分
<view>
<!-- 幸运数字范围 -->
<view class="text_align_center padding_tb_26 font_size_32">
<text class="color_blue font_weight_700"> {{minVal}}</text>
到<text class="color_blue font_weight_700"> {{maxVal}}</text>
</view>
<!-- 输入框 -->
<view>
<inputBox parameters="{{sValueTransfer}}" bind:myEvent="startOnMyEvent"></inputBox>
<inputBox parameters="{{eValueTransfer}}" bind:myEvent="endOnMyEvent"></inputBox>
</view>
<!-- 幸运转盘 -->
<view class="border_width margin_lr_auto width_200 height_200 line_height_200 text_align_center radius_100_ font_weight_600 {{luckNumbers!='倒计时'?'font_size_40':''}} {{textColor}}" style="border-color:{{colors}}" catchtap="startNumber">{{luckNumbers}}</view>
</view>
2、javascript 部分
const {
globalData: {
showToast
}
} = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
// 传给组件的参数
sValueTransfer: {
// 输入框提示
pla: "请输入开始值",
// 校验规则
// 1 纯数字，且第一位不能为 0
verificationRules: 1,
// 输入的最大长度
maxL: 3
},
// 传给组件的参数
eValueTransfer: {
// 输入框提示
pla: "请输入结束值",
// 校验规则
// 1 纯数字，且第一位不能为 0
verificationRules: 1,
// 输入的最大长度
maxL: 3
},
minVal: 1,
maxVal: 10,
luckNumbers: '倒计时',
colors: 'red forestgreen blue cyan',
textColor: '',
isSetTime: true
},
// 开始倒计时
startNumber() {
let minVal = Number(this.data.minVal),
maxVal = Number(this.data.maxVal),
arrColor = ['red forestgreen blue cyan', 'cyan red forestgreen blue', 'blue cyan red forestgreen', 'forestgreen blue cyan red'],
count = 2,
sumCount = 2;
if (!this.data.isSetTime) return showToast('上次倒计时未结束');
if (minVal >= maxVal) return showToast('开始值要小于结束值');
this.setData({
textColor: '',
isSetTime: false
});
this.setData({
colors: arrColor[1],
luckNumbers: sumCount
});
let clearTime = setInterval(() => {
sumCount -= 1;
this.setData({
colors: arrColor[count],
luckNumbers: sumCount
});
if (sumCount == -1) {
this.setData({
luckNumbers: parseInt(Math.random() * (maxVal - minVal + 1) + minVal, 10),
textColor: 'color_theme',
isSetTime: true
});
clearInterval(clearTime);
}
if (count == 3) {
count = -1
};
count += 1;
}, 600);
},
// 收集开始值
startOnMyEvent({
detail: {
value
}
}) {
this.setData({
minVal: value || 1
});
},
// 收集结束值
endOnMyEvent({
detail: {
value
}
}) {
this.setData({
maxVal: value || 10
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
3、css 部分
.border_width {
border-style: solid;
border-width: 100rpx 100rpx 100rpx 100rpx;
}
4、说明
输入框组件
请联系：MJ2506562048
5、演示
以上是关于获取幸运数的主要内容，如果未能解决你的问题，请参考以下文章