微信小程序实现7个彩票号码的生成 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2020-10-4

发布人:葵宇科技

浏览次数:46

目标:利用微信小程序实现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;
}

相关案例查看更多