微信小程序实现7个彩票号码的生成

目标：利用微信小程序实现7个彩票号码的生成，每点击一次按钮，便生成一组7位号码，而且每个彩票号码的范围为 0~31，各个彩票号码均不重复。

实现的效果：
打开小程序的初始界面

点击 “生成号码” 按钮，便显示出了7位符合要求的彩票号码

再次点击 “生成号码” 按钮

实现代码：

<!--index.wxml-->
<view class="box">
	<view class="title">彩票号码生成器</view>
	<view class="context">
		<view class="k1">{{a}}</view>
		<view class="k2">{{b}}</view>
		<view class="k3">{{c}}</view>
		<view class="k4">{{d}}</view>
		<view class="k5">{{e}}</view>
		<view class="k6">{{f}}</view>
		<view class="k7">{{g}}</view>
	</view>
	<view class="front">
		有吧，前面出现的人，把你的温暖都耗尽了，
		后面出现的，自然吃亏些。有时候，人不愿意结交新人，
		只是不愿意把自己的过往再交代一遍。
		还好，总会有一个人到处搜集你的信息，听你听过的歌，走你走过的路，看你看过的书，
		品尝你大呼好吃的东西，只是想弥补上你的青春和过往。
	</view>
	<button bindtap="mysubmit">生成号码</button>
</view>

下面是js文件的实现代码：
这里我是首先定义了一个数组a，我的思路就是依次循环生成7个随机数，但是要在每次生成随机数的时候要进行判重，判重是要将本次生成的随机数与前面生成的随机数进行循环比较，如果相等则跳出内循环，然后同时将 i 减1来返回到上一次循环。

//index.js
//获取应用实例
var a = new Array();
var b;
Page({
  mysubmit: function () {
    b = parseInt(Math.random() * 32);/*首先生成第一个彩票号码*/
    a[0] = b;
    for (var i = 1; i < 7; i++) { /*循环判断*/
      b = parseInt(Math.random() * 32);
      a[i] = b;
      for (var j = 0; j < i; j++) {/*每生成一个彩票号码就与前面生成的彩票号码相比较*/
        if (a[j] == a[i]) {   /*如果相等，将 i-1 ，跳出内层循环后 i++,重新定位到i*/
          i = i-1;/**/
          break;
        }
      }
    }
    this.setData({
      a:(a[0]/Math.pow(10,2)).toFixed(2).substr(2),/*生成两位数彩票号码，如果号码>=0且<=9,则在该数前面补一个0，例如"07"*/
      b:(a[1]/Math.pow(10,2)).toFixed(2).substr(2),
      c:(a[2]/Math.pow(10,2)).toFixed(2).substr(2),
      d:(a[3]/Math.pow(10,2)).toFixed(2).substr(2),
      e:(a[4]/Math.pow(10,2)).toFixed(2).substr(2),
      f:(a[5]/Math.pow(10,2)).toFixed(2).substr(2),
      g:(a[6]/Math.pow(10,2)).toFixed(2).substr(2),
    })
  }
})

wxss文件：

/**index.wxss**/
.context{
  display: flex;
  text-align: center;
  line-height: 100rpx;
  font-weight: bolder;
  color: aliceblue;
}
.k1{
  flex-grow: 1;
  background-color: rgb(224, 57, 57);
  border-radius: 50px;
}
.k2{
  flex-grow: 1;
  background-color: rgb(226, 124, 8);
  border-radius: 50px;
}
.k3{
  flex-grow: 1;
  background-color: rgb(248, 206, 0);
  border-radius: 50px;
}
.k4{
  flex-grow: 1;
  background-color: rgb(53, 230, 56);
  border-radius: 50px;
}
.k5{
  flex-grow: 1;
  background-color: rgb(52, 84, 201);
  border-radius: 50px;
}
.k6{
  flex-grow: 1;
  background-color: rgb(65, 0, 152);
  border-radius: 50px;
}
.k7{
  flex-grow: 1;
  background-color: rgb(89, 33, 127);
  border-radius: 50px;
}
button{
  background-color: rgb(6, 248, 139);
}
.front{
  margin-top:30px ;
  margin-bottom: 30px;
  font-size: larger;
}

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/74953.html

微信小程序实现7个彩票号码的生成

相关推荐