双色球的实现（基于Vuejs）
其他
2022-04-27 20:44:14
阅读次数: 0
双色球（基于Vuejs）
案例视图（及需求）：
案例vue.js代码引入地址：
案例代码展示：
-
index.css
.container {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
text-align: center;
}
.red-container {
width: 65%;
}
.red-title {
color: red;
}
.blue-container {
width: 34%;
}
.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="[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="{
'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);
}
},
handleBlueBallClick(item) {
this.blueBall = this.blueBall === item ? "" : item;
},
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>
转载自blog.csdn.net/HTML_Z/article/details/124104071