双色球(基于Vuejs)
案例视图(及需求):
案例vue.js
代码引入地址:
- 版本是 2.6.14
案例代码展示:
-
index.css
.container { width: 80%; /* height: 500px; */ /* border: 1px solid red; */ margin: 0 auto; display: flex; justify-content: space-between; text-align: center; } .red-container { width: 65%; /* background: red; */ } .red-title { color: red; } .blue-container { width: 34%; /* background: blue; */ } .blue-title { color: blue; } small { color: #808080; } .red-balls, .blue-balls{ display: flex; flex-wrap: wrap; } .ball { width: 50px; height: 50px; line-height: 50px; border-radius: 50%; margin: 8px; cursor: pointer; } .red-ball { border: 1px solid red; } .red-active { background: red; color: white; } .blue-ball { border: 1px solid blue; } .blue-active { background: blue; color: white; } .handler-container { text-align: center; padding: 10px; } .handler-container button { width: 150px; height:40px; border: 0; margin: 5px; } .nums { width: 300px; min-height: 50px; border: 1px dotted #808080; margin: 0 auto; line-height: 30px; }
-
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>双色球</title> <link rel="stylesheet" href="../index.css" /> </head> <body> <div id="app"> <div class="container"> <div class="red-container"> <p> <strong class="red-title">红球区</strong> <small>至少选择6个红球</small> </p> <div class="red-balls"> <!-- <div class="ball red-ball" v-for="(item,index) in 33" @click="handleRedBallClick(item)" :class="{'red-active':redBalls.indexOf(item)!==-1}" > --> <div class="ball red-ball" v-for="(item,index) in 33" @click="handleRedBallClick(item)" :class="[redBalls.indexOf(item)!==-1?'red-active':'']" > {{item<10?'0'+item:item}} </div> </div> </div> <div class="blue-container"> <p> <strong class="blue-title">篮球区</strong> <small>至少选择6个篮球</small> </p> <div class="blue-balls"> <!-- <div class="ball blue-ball" v-for="(item,index) in 16" @click="handleBlueBallClick(item)" :class="[blueBall==item?'blue-active':'']" > --> <div class="ball blue-ball" v-for="(item,index) in 16" @click="handleBlueBallClick(item)" :class="{'blue-active':blueBall==item}" > {{item<10?'0'+item:item}} </div> </div> </div> </div> <div class="handler-container"> <p> <button @click="handleRedomClick">机选</button> <button @click="handleClearClick">清除</button> </p> <p> <button @click="handleAddClick" :disabled="!(redBalls.length>=6&&blueBall!='')" > 添加选号 </button> </p> <div class="nums"> <p v-for="(item,index) in info">{{item}}</p> </div> </div> </div> </body> <script src="../vue.js"></script> <script> const app = new Vue({ el: "#app", data: { // 红球数组 redBalls: [], // 篮球 blueBall: "", info: [], }, methods: { // 红球单选 handleRedBallClick(item) { const index = this.redBalls.indexOf(item); if (index == -1) { if (this.redBalls.length >= 6) { alert("红球最多选6个"); return; } this.redBalls.push(item); } else { this.redBalls.splice(index, 1); } // console.log(this.redBalls); }, // 篮球单选 handleBlueBallClick(item) { // if (this.blueBall !== item) { // this.blueBall = item; // } else { // this.blueBall = ""; // } this.blueBall = this.blueBall === item ? "" : item; // console.log(this.blueBall); }, // 机选 handleRedomClick() { // 清除 this.handleClearClick(); // 随机生成红球 for (let index = 0; index < 6; index++) { const redBall = Math.floor(Math.floor(Math.random() * 33)) + 1; const idx = this.redBalls.indexOf(redBall); if (idx === -1) { this.redBalls.push(redBall); } else { index--; } } // 随机篮球 this.blueBall = Math.floor(Math.floor(Math.random() * 16)) + 1; }, // 清除 handleClearClick() { this.redBalls = []; this.blueBall = ""; }, // 添加选号 handleAddClick() { this.info.push( `红球:${this.redBalls.toString()}篮球:${this.blueBall}` ); this.handleClearClick(); }, }, }); </script> </html>