微信小程序中石头剪刀布的实现（微信控制石头剪刀布）

微信小程序中石头剪刀布的实现（微信控制石头剪刀布）

这篇文章主要介绍了微信小程序 石头剪刀布实例代码的相关资料,需要的朋友可以参考下

微信小程序 石头剪刀布

昨天看有个石头剪刀布的练习，就拿出来做了一下，布局的代码浪费了很多时间，果然CSS这块的还不是很熟练,下面直接上图上代码了。

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

.js:

.wxml:

你已经获胜了{{winNum}}text>次text> image> {{gameOfPlay}}text> image> view> 出拳吧，少年~text> image> view> block> view> 再来!button> view> view>-

.wxss:

/*底*/.downView{ width: 100%; height: 1250rpx; background: #FAE738; margin: 0rpx; text-align: center;} /*获胜次数*/.winNum{ padding-top: 40rpx; display: block; font-size: 30rpx; color: #363527; font-weight:500;} /*展示出拳结果*/.showView{ display: flex; width: 100%; margin-top:30rpx; height: 200rpx;} .gesturesImgL{ height: 180rpx; width: 180rpx; margin-left:80rpx;} .gesturesImgR{ height: 180rpx; width: 180rpx; margin-right:80rpx;} .winOrLost{ color: orangered; flex:1; font-size: 30rpx; margin-top:75rpx;} /*用户出拳*/.chooseForUserView{ margin:40rpx; height: 800rpx; background: white; text-align: center;} .choose-V{ display: flex; margin-top: 40rpx;} .choose-view{ flex: 1; content:none !important; height: 140rpx; width: 140rpx; border:1px solid white;} .choose-image{ height: 160rpx; width: 160rpx; border-radius:80rpx;} /*再来*/.againBtn{ margin:80rpx; background: #FAE738;}-

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。