双色球的实现（基于Vuejs）

最新推荐文章于 2023-11-05 20:57:03 发布

BloggerM

最新推荐文章于 2023-11-05 20:57:03 发布

阅读量1.3k

点赞数 1

分类专栏：前端案例文章标签： vue html 前端

本文链接：https://blog.csdn.net/HTML_Z/article/details/124104071

版权

前端案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

双色球（基于Vuejs）

案例视图（及需求）：

在这里插入图片描述

案例`vue.js`代码引入地址：

版本是 2.6.14
- 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>