本文主要是介紹搖色子這個(gè)小程序的具體內(nèi)容

效果預(yù)覽：

下面給出程序的主要代碼：

- [ ] index.wxml:

<!-- 骰子模版視圖 --><template name="first"><view class="first face"><span class="pip"></span></view> </template><template name="second"><view class="second face"><span class="pip"></span><span class="pip"></span></view> </template><template name="third"><view class="third face"><span class="pip"></span><span class="pip third-item-center"></span><span class="pip"></span></view> </template><template name="fourth"><view class="fourth face"><!--按照列排列兩個(gè)點(diǎn)--><view class="column"><span class="pip"></span><span class="pip"></span></view><!--按照列排列另外兩個(gè)點(diǎn)--><view class="column"><span class="pip"></span><span class="pip"></span></view></view> </template><template name="fifth"><view class="fifth face"><!--按照列排列兩個(gè)點(diǎn)--><view class="column"><span class="pip"></span><span class="pip"></span></view><!--按照列排列中間一個(gè)點(diǎn)--><view class="column fifth-column-center"><span class="pip"></span> </view><!--按照列排列另外兩個(gè)點(diǎn)--> <view class="column"><span class="pip"></span><span class="pip"></span></view></view> </template><template name="sixth"><view class="sixth face"><!--按照列排列三個(gè)點(diǎn)--><view class="column"><span class="pip"></span><span class="pip"></span><span class="pip"></span></view> <!--按照列排列另外三個(gè)點(diǎn)--><view class="column"><span class="pip"></span><span class="pip"></span><span class="pip"></span></view></view> </template><!-- 展示視圖 --> <view class="flex-container"> <view class="result" style="visibility:{{isShow}}"><text>恭喜，您搖到的數(shù)字是：{{total}}</text></view><view class="dice-box"><block><template is="{{dice[num1]}}"></template></block></view><view class="second-row"><view class="dice-box"><block><template is="{{dice[num2]}}"></template></block></view><view class="dice-box"><block><template is="{{dice[num3]}}"></template></block></view></view><view class="button-box"><button type="{{buttonType}}" bindtap="shakeClick" >{{buttonValue}}</button></view> </view>

**

2.index.wxss:

**

/*外部公共容器樣式*/ .flex-container{display:flex;height: 100vh;background-color:#666666;flex-direction : column;justify-content: center;align-items: center;color: #fff; }.dice-box{padding: 10px; } .second-row{display:flex;flex-direction : row;justify-content: space-around; }/* 骰子容器公用樣式 */ .face {display: flex;margin: 5px;padding: 4px;background-color:#ffffff;width: 108px;height: 108px;object-fit: contain;border-radius:10%;box-shadow: inset 0 5px white,inset 0 -5px #bbb,inset 5px 0 #d7d7d7,inset -5px 0 #d7d7d7; }/* 篩子中的點(diǎn)的樣式 */ .pip {display: block;width: 24px;height: 24px;border-radius: 50%;margin:4px;background-color: #333;box-shadow: inset 0 3px #111,inset 0 -3px #555; }/* 面公用樣式 *//* 第一面布局方式：元素水平居中且垂直居中 */ .first {justify-content: center;align-items: center; }/* 第二面布局方式 */ .second {justify-content: space-between; } /* 右對(duì)齊 */ .second .pip:last-child {align-self: flex-end; }/* 第三面布局方式 */ .third {justify-content: space-between; } .third .pip.third-item-center {align-self: center; } .third .pip:last-child {align-self: flex-end; }/* 第四面布局方式 */ .fourth {justify-content: space-between; } .fourth .column {display: flex;flex-direction: column;justify-content: space-between; }/* 第五面布局方式 */ .fifth {justify-content: space-between; } .fifth .column {display: flex;flex-direction: column;justify-content: space-between; } .fifth .column.fifth-column-center{justify-content: center; }/* 第六面布局方式 */ .sixth { justify-content:space-between; } .sixth .column {display: flex;flex-direction:column;justify-content:space-between; }.button-box{padding-top: 100px;width:80%;}

**

3.index.js:

**

Page({global : {timer : null ,isRand : false},data: {dice : ['first','second','third','fourth','fifth','sixth'],buttonType : 'primary',buttonValue : '搖一搖',isShow:'hidden',num1 : 0,num2 : 0,num3 : 0,total: 0},shakeClick: function () { let me = this;this.global.isRand = !this.global.isRand;if ( this.global.isRand ) {this.global.timer = setInterval(function (){let num1 = Math.floor(Math.random()*6);let num2 = Math.floor(Math.random()*6);let num3 = Math.floor(Math.random()*6);me.setData({num1 : num1});me.setData({num2 : num2});me.setData({num3 : num3});me.setData({total : num1+num2+num3+3});},50);} else {clearInterval(this.global.timer);}this.setData({dice: this.data.dice, buttonType : (this.global.isRand) ? 'default' : 'primary',buttonValue : (this.global.isRand) ? '停止' : '搖一搖',isShow: (this.global.isRand) ? 'hidden':'show',});}, })

Log頁(yè)面的主要代碼：

**

> logwxml:

**

<!--logs.wxml--> <view class="container log-list"><block wx:for="{{logs}}" wx:for-item="log"><text class="log-item">{{index + 1}}. {{log}}</text></block> </view>

log.wxss:

.log-list {display: flex;flex-direction: column;padding: 40rpx; } .log-item {margin: 10rpx; }

app.json

{"pages":["pages/index/index"],"window":{"navigationBarBackgroundColor": "#333333", "navigationBarTextStyle":"white","navigationBarTitleText": "麻將骰子","backgroundColor":"#ffffff","backgroundTextStyle":"light","enablePullDownRefresh":false},"networkTimeout": {"request": 10000,"downloadFile": 10000},"debug": true }

**

> 頁(yè)面實(shí)現(xiàn)效果

**：

總結(jié)

以上是生活随笔為你收集整理的基于网页的微信小程序——摇色子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。