flex佈局+vue.js實現的一個投骰子的功能
阿新 • • 發佈：2018-12-21
1、直接貼程式碼吧。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <style type="text/css"> .box { width: 100%; display: flex; justify-content: center; } .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; } .face { margin: 16px; padding: 4px; background-color: #e7e7e7; width: 104px; height: 104px; object-fit: contain; box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7; border-radius: 10%; } .first { display: flex; align-items: center; justify-content: center; } .second { display: flex; justify-content: space-between; } .second .pip:nth-of-type(2) { align-self: flex-end; } .third { display: flex; justify-content: space-between; } .third .pip:nth-of-type(2) { align-self: center; } .third .pip:nth-of-type(3) { align-self: flex-end; } .fourth { display: flex; flex-wrap: wrap; justify-content: space-between; } .fourth .column, .sixth .column { display: flex; flex-direction: column; justify-content: space-between; } .fifth { display: flex; justify-content: space-between; } .fifth .column { display: flex; flex-direction: column; justify-content: space-between; } .fifth .column:nth-of-type(2) { display: flex; justify-content: center; } .sixth { display: flex; justify-content: space-between; } .isDisplay { display: none; } </style> <body> <div class="box"> <div class="first face" v-bind:class="{isDisplay:isDisplay_1}"> <span class="pip"></span> </div> <div class="second face" v-bind:class="{isDisplay:isDisplay_2}"> <span class="pip"></span> <span class="pip"></span> </div> <div class="third face" v-bind:class="{isDisplay:isDisplay_3}"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div> <div class="fourth face" v-bind:class="{isDisplay:isDisplay_4}"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div> <div class="fifth face" v-bind:class="{isDisplay:isDisplay_5}"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div> <div class="sixth face" v-bind:class="{isDisplay:isDisplay_6}"> <div class="column"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div> </div> <div><button v-on:click="showPoint">點選一下</button></div> </div> <script> new Vue({ el: '.box', data: { isDisplay_1: true, isDisplay_2: true, isDisplay_3: true, isDisplay_4: true, isDisplay_5: true, isDisplay_6: true }, methods: { showPoint: function() { var flag = this.randomNum(); //console.log(flag); switch (flag) { case 0: this.reset(); this.isDisplay_1 = !this.isDisplay_1; break; case 1: this.reset(); this.isDisplay_2 = !this.isDisplay_2; break; case 2: this.reset(); this.isDisplay_3 = !this.isDisplay_3; break; case 3: this.reset(); this.isDisplay_4 = !this.isDisplay_4; break; case 4: this.reset(); this.isDisplay_5 = !this.isDisplay_5; break; case 5: this.reset(); this.isDisplay_6 = !this.isDisplay_6; break; } }, reset: function(){ this.isDisplay_1 = true, this.isDisplay_2 = true, this.isDisplay_3 = true, this.isDisplay_4 = true, this.isDisplay_5 = true, this.isDisplay_6 = true }, randomNum: function(){ return Math.round(Math.random()*5); } } }) </script> </body> </html>
2、效果圖
