微信小程序: 摇色子
作者:互联网
文章目录
前言
甲乙双方摇色子,谁的点数大 谁赢
代码:
1、wxml
页面布局
<view class="out_wrap">
<text>甲:</text>
<text>乙</text>
<view class="fist_result">
<image src="{{img[index].index}}"></image>
<!-- <text>{{resultText}}</text> -->
<image src="{{img[index1].index}}"></image>
</view>
<view class="button_wrap">
<view class="title">{{title}}</view>
<button bindtap="btnStart">开始</button>
<button bindtap="btnEnd">结束</button>
</view>
</view>
2、wxss
页面样式
image {
width: 100px;
height: 100px;
}
.out_wrap {
width: 100vw;
height: 100vh;
text-align: center;
padding-top: 20rpx;
background: rgba(3, 29, 11, 0.6);
}
.out_wrap text{
color: #fff;
}
.fist_result {
/* 弹性盒子 */
display: flex;
/* 垂直方向的对齐方式 */
align-items: center;
height: 300rpx;
background: rgb(18, 150, 219, 0.1);
}
.fist_result image {
/* 外边距 */
margin: 0 76rpx;
}
.button_wrap button {
/* 行内块 */
display: inline-block;
/* 权重 优先级*/
width: 36vw !important;
margin: 0 30rpx !important;
}
.title {
height: 100rpx;
width: 400rpx;
margin: 20rpx auto;
font-size: 40rpx;
line-height: 100rpx;
text-align: center;
border-radius: 10rpx;
background: rgba(219, 18, 102, 0.1);
color: #fff;
}
3.js
Page({
/**
* 页面的初始数据
*/
data: {
// 图片列表
img: [{
index: "../../point/1-point.png"
},
{
index: "../../point/2-point.png"
},
{
index: "../../point/3-point.png"
},
{
index: "../../point/4-point.png"
},
{
index: "../../point/5-point.png"
},
{
index: "../../point/6-point.png"
},
],
index: 0, //存储下标
index1: 1, //存储下标
timer: "", //存储计时器
timers: true, //防止连续点击 类似防抖
title: "?" //判断文本
},
//随机获取点数
li(a) {
// console.log(a)
// 获取向下取整随机数
this.data.index = Math.floor(Math.random() * 6)
this.data.index1 = Math.floor(Math.random() * 6)
// 更新数据
this.setData({
index: this.data.index,
index1: this.data.index1
})
// console.log(this.data.img[0])
},
// 开始按钮
btnStart() {
// 防止连续点击
// clearInterval(this.data.timer)
// 判断this.data.timers ,
// this.data.timers 为true执行操作,为false则不执行操作
if (this.data.timers) {
this.data.timers = false
//隔100毫秒换一张图
console.log("0"+" ")
this.data.timer = setInterval(() => {
this.li()
}, 100)
}
},
// 停止按钮
btnEnd() {
// 延时器
// 停止计时器
clearInterval(this.data.timer)
this.data.timers = true
// console.log(this.data.index + 1, this.data.index1 + 1)
// 判断图片点数大小
if (this.data.index > this.data.index1 ) {
// 当index>index1时渲染展示值
this.data.title = "甲赢了!"
// console.log(this.data.title)
} else if (this.data.index == this.data.index1 ) {
this.data.title = "平局了!"
console.log(this.data.title)
} else {
this.data.title = "乙赢了!"
}
// 更新数据
this.setData({
title: this.data.title
})
},
页面效果
标签:index,色子,..,point,微信,title,程序,index1,data 来源: https://blog.csdn.net/qq_45126531/article/details/122618665