獲取幸運數

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、演示