前言

甲乙双方摇色子，谁的点数大谁赢

代码：

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})},

页面效果

小白实习一个星期写的，请多指教

微信小程序：摇色子相关推荐

java 微信摇一摇红包_微信小程序“摇一摇”的实例代码
微信小程序并没有提供摇一摇API接口,但是提供了一个重力感应的API 「wx.onAccelerometerChange(CALLBACK)」,我们可以用这个方法来模拟微信摇一摇功能,代码如下: Pa ...
微信小程序摇一摇功能实现
有过一次摇一摇的经验,本来记得小程序后台里面明明有一个摇一摇的组件,当自己真的准备开发的时候,竟然没有了. 所以微信摇一摇只能网上各种找资源拼凑起来.但是每个都不太符合自己的使用.所以通过网上的线 ...
微信小程序“摇一摇”实现
原文链接:http://www.webexp.cn/wxapp-paikeng.html 微信小程序并没有提供摇一摇API接口,但是提供了一个重力感应的API 「wx.onAccelerometerC ...
实现微信小程序摇一摇功能
微信开发文档之前是有摇一摇的API的,但是后来好像是废弃了,下面这段代码主要是用的微信开发文档里面的加速计里边的两个API实现的. // 开始监听加速度数据. wx.startAcceleromete ...
微信小程序项目实例——摇色子
微信小程序项目实例--摇色子文章目录微信小程序项目实例--摇色子一.项目展示二.核心代码三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示摇色子是一款简易的游戏类小程序用 ...
微信小程序开发（三)——IE盒子，Flex弹性布局，色子六面
目录 ie盒子模型 Flex弹性布局三大特性: 块元素和内联元素的转换 background-image背景图片尺寸单位rpx 定位练习:色子的六面 ie盒子模型盒子模型是css中一个重要的概 ...
微信小程序中实现一个金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
在微信小程序中编写金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
微信小程序实例-摇一摇抽奖
概述前面我们讲了如何开始微信小程序搭建和一些组件的介绍.微信小组件和微信小程序入门微信小程序目录为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json ...
微信小程序使用加速计实现摇一摇功能（一）
2019独角兽企业重金招聘Python工程师标准>>> 微信小程序硬件接口提供了加速计使用. 用于计算手机的偏移距离. 注:接口提供的比较简单,更多需要自己处理. 1.开启:wx.s ...

微信小程序：摇色子

文章目录

前言

代码：

1、wxml

2、wxss

3.js

页面效果

微信小程序：摇色子相关推荐

最新文章

热门文章

微信小程序： 摇色子

文章目录

前言

代码：

1、wxml

2、wxss

3.js

页面效果

微信小程序： 摇色子相关推荐

最新文章

热门文章

微信小程序：摇色子

微信小程序：摇色子相关推荐