위 챗 애플 릿 은 간단 한 주사위 놀 이 를 실현 한다.
페이지 코드
<view class='top'>{{txt}}</view>
<view class='point1'>
<image src='{{one_img}}'></image>
</view>
<view class='point2'>
<image src='{{two_img}}'></image>
<image src='{{three_img}}'></image>
</view>
<view class='btn' bindtap='enter'>{{msg}}</view>
스타일 코드
.top{
width: 220px;
height: 30px;
font-size: 25px;
margin: 20px auto;
}
.point1 image,.point2 image{
width: 150px;
height: 150px;
}
.point1 image{
display: block;
margin:45px auto;
}
.point2 image{
margin-top: -20px;
margin-left: 25px;
}
.btn{
width:100%;
height:60px;
background:green;
border-radius: 10px;
line-height: 60px;
text-align: center;
font-size: 30px;
margin-top: 60px;
}
js 코드
//index.js
//
const app = getApp()
Page({
data: {
one_img:'../../image/6-point.png',
two_img: '../../image/6-point.png',
three_img: '../../image/6-point.png',
flag:true,
timer:null,
msg:' ',
total:0,
txt:' :0',
//
arr:[
'../../image/1-point.png',
'../../image/2-point.png',
'../../image/3-point.png',
'../../image/4-point.png',
'../../image/5-point.png',
'../../image/6-point.png',
]
},
enter:function(event){
let obj = this;
if(obj.data.flag==true){
obj.data.timer = setInterval(function () {
let one = Math.floor(Math.random() * 6);
let two = Math.floor(Math.random() * 6);
let three = Math.floor(Math.random() * 6);
obj.setData({
one_img: obj.data.arr[one],
two_img: obj.data.arr[two],
three_img: obj.data.arr[three],
flag:false,
msg:' ',
total:one+two+three+3,
// total:18,
txt:'',
})
}, 50);
}else{
clearInterval(obj.data.timer);
obj.setData({
//one_img: obj.data.arr[5],
//two_img: obj.data.arr[5],
//three_img: obj.data.arr[5],
msg:' ',
flag:true,
txt:' :'+obj.data.total,
})
}
},
})
그림 소재 와 효과 도이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.