目標:利用微信小程序實現7個彩票號碼的生成,每點擊一次按鈕,便生成一組7位號碼,而且每個彩票號碼的范圍為 0~31微信生成小程序碼,各個彩票號碼均不重復。
實現的效果:
打開小程序的初始界面
點擊 “生成號碼” 按鈕,便顯示出了7位符合要求的彩票號碼
再次點擊 “生成號碼” 按鈕
實現代碼:
<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">{dnrv3ppvb}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;
}