微信小程序彩票號(hào)碼生成器

更新時(shí)間：2021年09月27日 16:59:27 作者：桃豆豆

這篇文章主要為大家詳細(xì)介紹了微信小程序彩票號(hào)碼生成器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文為大家分享了微信小程序彩票號(hào)碼生成器的具體代碼，供大家參考，具體內(nèi)容如下

一、案例說明

設(shè)計(jì)一個(gè)小程序，生成一注7個(gè)彩票號(hào)碼(1-31)，并在圓形圖標(biāo)上顯示，加上一個(gè)按鈕，每點(diǎn)一次重新生成，同時(shí)生成不同的顏色圓形圖標(biāo)。

二、案例代碼

1）index.wxml文件

<!--index.wxml-->
 
<image src="/image/caipiao.png" style="width: 750rpx; height: 256rpx; display: inline-block; box-sizing: border-box; left: NaNrpx; top: NaNrpx"></image>
 
<view class="box">
  <view class="title">彩票生成器</view>
  <view>生成的彩票序列：</view>
  <view wx:for="{{rand}}">{{item}}</view>
</view>
 
<view class="context">
  <view class="item" style="background-color: {{color1}};">{{a}}</view>
  <view class="item" style="background-color: {{color2}};">{}</view>
  <view class="item" style="background-color: {{color3}};">{{c}}</view>
  <view class="item" style="background-color: {{color4}};">{vvxyksv9kd}</view>
  <view class="item" style="background-color: {{color5}};">{{e}}</view>
  <view class="item" style="background-color: {{color6}};">{{f}}</view>
  <view class="item" style="background-color: {{color7}};">{{g}}</view>
</view>
==================================
<button type="primary" bindtap="newRand">生成新的彩票號(hào)碼</button>

2）index.wxss文件

/**index.wxss**/
 
.box{
  margin: 20rpx;
  padding: 20rpx;
  border: 3px dashed rgb(248, 72, 2);
  background-color: rgba(110, 144, 216, 0);
}
 
.title{
  font-size: 30px;
  text-align: center;
  margin-bottom: 15px;
  color: rgb(59, 15, 252);
}
 
.context{
  display: flex;
  text-align: center;
  line-height: 100rpx;
  font-weight: bolder;
  color: rgb(28, 3, 56);
}
 
.item{
  flex-grow: 1;
  
  border-radius: 50px; 
}

3）index.js文件

// index.js
 
var rand;
 
function createRand(){
  rand=[];
  
  for(var i=0;i<7;i++){
    var r=0;
 
    while(r==0){
      r=parseInt(Math.random() * 32);              
    }    //生成不為0的數(shù)
                                          
    r=(r/Math.pow(10,2)).toFixed(2).substr(2)  //控制生成數(shù)的形式為兩位，在一位數(shù)的前面補(bǔ)“0”
    rand[i]=r;
 
    for (var j=0;j<i;j++){
      if (rand[j]==r){i=i-1;}
    }    //保證與之前生成的數(shù)不重復(fù)
                                     
    console.log(rand[i]);
  }
};
 
Page({
  CreateColor:function(){
    var color=[];
    var letters="0123456789ABCDEF";
    for(var i=0;i<7;i++){
      var c="#";
      for(var j=0;j<6;j++){
        c+=letters[Math.floor(Math.random()*16)]
      }
      color.push(c);   //隨機(jī)生成顏色
    }
    console.log(color);
    this.setData({
      color1:color[0],
      color2:color[1],
      color3:color[2],
      color4:color[3],
      color5:color[4],
      color6:color[5],
      color7:color[6]   
    })
  },      //顏色的加載
  
  onLoad:function(){
    createRand();
    this.CreateColor();
    this.setData({
      rand:rand,
      a:rand[0],
      b:rand[1],
      c:rand[2],
      d:rand[3],
      e:rand[4],
      f:rand[5],
      g:rand[6],
    })
  },
  newRand:function(){
    createRand();
    this.CreateColor();
    this.setData({
      rand:rand,
      a:rand[0],
      b:rand[1],
      c:rand[2],
      d:rand[3],
      e:rand[4],
      f:rand[5],
      g:rand[6],
    })
  },
 
})

注意：本案例要求彩票生成數(shù)不能與之前的重復(fù)，且生成的是1-31的數(shù)字，所以不可以出現(xiàn)數(shù)字“0”。

三、案例截圖

四、分析總結(jié)

在 index.wxml 文件代碼中，利用1個(gè)view內(nèi)部嵌套7個(gè)view組件的方法實(shí)現(xiàn)七個(gè)“彩球”的界面設(shè)計(jì)。并在下面添加一個(gè)button組件，該組件綁定點(diǎn)擊事件，實(shí)現(xiàn)生成新的彩票號(hào)碼。

在index.js文件中，定義了createRand（）函數(shù)，用于產(chǎn)生隨機(jī)數(shù)列，該函數(shù)首先利用for循環(huán)產(chǎn)生7個(gè)隨機(jī)數(shù)并將這些數(shù)據(jù)添加到數(shù)組中。Math.random（）函數(shù)用于產(chǎn)生0～1之間的隨機(jī)數(shù)，Math.random()*32能夠產(chǎn)生0～32之間的隨機(jī)數(shù)，(r/Math.pow(10,2)).toFixed(2).substr(2)可控制隨機(jī)生成的r為兩位數(shù)，同時(shí)在一位數(shù)之前補(bǔ)“0”。定義的onLoad函數(shù)和newRand函數(shù)，通過this.sarData()方法將結(jié)果渲染到視圖層。

本案還涉及了在JavaScript中創(chuàng)建隨機(jī)顏色的方法。創(chuàng)建顏色的設(shè)計(jì)思想是：利用Math.random()和Math.floor()函數(shù)從構(gòu)成顏色的16個(gè)十六進(jìn)制字符(0~F)中隨機(jī)找出6個(gè)字符構(gòu)成一種顏色，連續(xù)找7次就可以生成7種隨機(jī)顏色。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: