<template>
<view class="content">
<view class="text-area">
<rich-text class="title" :nodes="sum"></rich-text>
</view>
<view class="flex">
<image class="logo" :src="arr[nums[0]]"></image>
<image class="logo" :src="arr[nums[1]]"></image>
<image class="logo" :src="arr[nums[2]]"></image>
</view>
<view class="btn"><button type="primary" @click="start">开始</button></view>
</view>
</template>
<script>
export default {
data() {
return {
timer: null,
sum: "点击开始按钮摇骰子",
nums: [0, 0, 0],
arr: ['/static/1-.png', '/static/2-.png', '/static/3-.png', '/static/4-.png', '/static/5-.png', '/static/6-.png']
};
},
onLoad() {
this.picFn();
let num = 0;
this.nums.forEach(item => {num += item});
// this.sum = `分数:${num+3}`;
},
methods: {
start() {
clearInterval(this.timer);
this.sum = "等待计算中";
this.timer = setInterval(this.picFn, 50);
setTimeout(() => {
clearInterval(this.timer);
let num = 0;
this.nums.forEach(item => {num += item});
this.sum = `分数:${num+3}`;
}, 3000);
},
randNum:() => Math.floor(Math.random() * 6),
picFn(){ this.nums = this.nums.map(item => this.randNum())},
}
};
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.flex {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 50rpx;
margin-left: 100rpx;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
h5端:
微信小程序端