WeChat Mini Program Lottery Number Generator

This article shares the specific code of the WeChat applet lottery number generator for your reference. The specific content is as follows

1. Case Description

Design a small program to generate a note of 7 lottery numbers (1-31) and display them on a circular icon, plus a button that regenerates each time you click it, and also generates circular icons of different colors.

2. Case code

1) index.wxml file

<!--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">Lottery Generator</view>
  <view>Generated lottery sequence:</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}};">{{b}}</view>
  <view class="item" style="background-color: {{color3}};">{{c}}</view>
  <view class="item" style="background-color: {{color4}};">{{d}}</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">Generate new lottery numbers</button>

2) index.wxss file

/**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: bold;
  color: rgb(28, 3, 56);
}
 
.item{
  flex-grow: 1;
  
  border-radius: 50px; 
}

3) index.js file

// 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);              
    } //Generate a non-zero number r=(r/Math.pow(10,2)).toFixed(2).substr(2) //Control the generated number to be two digits, add "0" in front of the single-digit number
    rand[i]=r;
 
    for (var j=0;j<i;j++){
      if (rand[j]==r){i=i-1;}
    } // Ensure that the number generated previously is not repeated 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); //randomly generate color}
    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]   
    })
  }, //Color loading 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],
    })
  },
 
})

Note: This case requires that the lottery number generated cannot be repeated with the previous one, and the generated number is 1-31, so the number "0" cannot appear.

3. Case Screenshots

4. Analysis and Summary

In the index.wxml file code, the interface design of seven "colorful balls" is implemented by nesting seven view components inside one view. And add a button component below, which binds the click event to generate new lottery numbers.

In the index.js file, the createRand() function is defined to generate a random number sequence. The function first uses a for loop to generate 7 random numbers and adds these data to an array. The Math.random() function is used to generate a random number between 0 and 1. Math.random()*32 can generate a random number between 0 and 32. (r/Math.pow(10,2)).toFixed(2).substr(2) can control the randomly generated r to be a two-digit number and add "0" before the single-digit number. The defined onLoad function and newRand function render the results to the view layer through the this.sarData() method.

This case also involves creating random colors in JavaScript. The design idea of creating colors is: use Math.random() and Math.floor() functions to randomly find 6 characters from the 16 hexadecimal characters (0~F) that make up the color to form a color. Finding 6 characters in a row 7 times can generate 7 random colors.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: