获取幸运数

1、html 部分

<view>  <view class="text_align_center padding_tb_26 font_size_32"> <text class="color_blue font_weight_700"> {{minVal}}{maxVal}} <view> <inputBox parameters="{{sValueTransfer}}" bind:myEvent="startOnMyEvent">{eValueTransfer}}" bind:myEvent="endOnMyEvent"> <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}} 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、演示