微信小程序实现7个彩票号码的生成
发表时间:2020-10-4
发布人:葵宇科技
浏览次数:62
目标:利用微信小程序实现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;
}