ウィーチャットのプログラムは回転式抽選を実現します。
4205 ワード
本論文の例では、微信小プログラムのディスク抽選を実現するための具体的なコードを共有します。参考にしてください。具体的な内容は以下の通りです。
効果図は以下の通りです。
.wxml
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
効果図は以下の通りです。
.wxml
<view class="index">
<view class="xian"></view>
<view class="xian"></view>
<view class="xian"></view>
<view class="detail"> </view>
<view class="detail"> </view>
<view class="detail"> </view>
<view class="detail"> </view>
<view class="detail"> </view>
<view class="detail"> </view>
<span bindtap="zhuanin" style="transform:rotate({{trasn}}deg);"></span>
</view>
.wxss
.index{
width: 300px;
margin: 50rpx calc((100% - 300px) / 2);
border:1px solid #ffcccc;
border-radius: 50%;
height: 300px;
position: relative;
overflow: hidden;
font-size: 26rpx;
}
.xian{
width:300px;
height:1px;
background:#d6d6d6;
position:absolute;
top:150px;
left:0;
}
.index>.xian:nth-child(2){
transform:rotateZ(60deg)
}
.index>.xian:nth-child(3){
transform:rotateZ(120deg)
}
.detail{
position: absolute;
}
.index>.detail:nth-child(4){
top:25px;left:132px;
}
.index>.detail:nth-child(5){
top:90px;left:225px;
}
.index>.detail:nth-child(6){
top:190px;left:225px;
}
.index>.detail:nth-child(7){
top:250px;left:132px;
}
.index>.detail:nth-child(8){
top:190px;left:40px;
}
.index>.detail:nth-child(9){
top:90px;left:40px;
}
.index>span{
width: 30px;
height: 30px;
background-color: #ffcccc;
border-radius: 50%;
position: absolute;
left: 135px;
top:135px;
}
.index>span::after{
content: ' ';
width:0;
height:0;
border-right:6px solid transparent;
border-left:6px solid transparent;
border-bottom:26px solid #ffcccc;
z-index: 10;
position: absolute;
left: 8.5px;
top: -24px;
}
js.
Page({
data: {
random:'',
trasn:0,
},
zhuanin:function(e){
let that = this
let num = 0
that.setData({
random:Math.floor(Math.random() * 360),
trasn:0,
})
let a = setInterval(function () {
that.setData({
trasn:that.data.trasn+5
})
if(360 <= that.data.trasn){
that.data.trasn = 0
num = num + 1
}
if(num == 3){
that.currinl()
clearInterval(a)
}
},5)
},
currinl:function(e){
let that = this
let name = ''
if(that.data.random == 30 || that.data.random == 90 || that.data.random == 150 || that.data.random == 210 || that.data.random == 330){
that.setData({
random:that.data.random + 1
})
}
if(that.data.random < 30 || 330 < that.data.random){
name = ' '
}else if(that.data.random > 30 && that.data.random < 90){
name = ' '
}else if(that.data.random > 90 && that.data.random < 150){
name = ' '
}else if(that.data.random > 150 && that.data.random < 210){
name = ' '
}else if(that.data.random > 210 && that.data.random < 270){
name = " "
}else{
name = " "
}
let b = setInterval(function () {
that.setData({
trasn:that.data.trasn+2
})
if(that.data.random <= that.data.trasn){
wx.showToast({
title: name,
icon: 'none',
duration: 2000
})
clearInterval(b)
}
},10)
},
})
今注目度の高いWeChat小プログラムを紹介します。以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。