微信小程序实现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;
}

猜你喜欢

转载自blog.csdn.net/weixin_43624626/article/details/108921088