start:vue3

2025-12-16 21:51:59 -05:00 · 2025-10-30 14:35:06 +08:00
parent 2c9ff8d3ea
commit f0ed76db7c
9 changed files with 755 additions and 0 deletions
--- a/vue3.html
+++ b/vue3.html
@@ -0,0 +1,134 @@
+<!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>
+
+        <script>
+            let count = 10; // 猜测次数
+            let target; // 随机目标数字
+            let flag = false; // 用于控制游戏是否进行
+        </script>
+
+        <style>
+            body {
+                text-align: center;
+                font-family: Arial, sans-serif;
+                background-color: #f0f8ff;
+                margin: 0;
+                padding: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100vh;
+            }
+            h2 {
+                color: #333;
+            }
+            form {
+                display: inline-block;
+                padding: 20px;
+                background-color: #fff;
+                border-radius: 10px;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            }
+            input[type="text"] {
+                padding: 5px;
+                margin-bottom: 10px;
+                width: 100px;
+                text-align: center;
+                border-radius: 5px;
+                border: 1px solid #ccc;
+            }
+            input[type="button"] {
+                padding: 5px 10px;
+                margin: 5px;
+                border-radius: 5px;
+                border: 1px solid #007bff;
+                background-color: #007bff;
+                color: white;
+                cursor: pointer;
+            }
+            input[type="button"]:hover {
+                background-color: #0056b3;
+            }
+            label {
+                display: block;
+                margin: 10px 0;思考如何使用 Vue3 实现该游戏?
+            }
+        </style>
+    </head>
+    <body>
+        <div>
+            <h2>猜数游戏</h2>
+            <strong>请输入一个 0-100 之间的随机整数:</strong>
+            <br /><br />
+            <form>
+                <input type="text" id="guess" placeholder="输入你的猜测" />
+                <input type="button" id="button" value="提交" onclick="run()" />
+                <input type="button" value="开始" onclick="restart()" />
+                <br />
+                <label
+                    >结果: <input type="text" id="feedback" readonly
+                /></label>
+                <label
+                    >当前还可以猜测的次数:
+                    <input type="text" value="10" id="count" readonly
+                /></label>
+            </form>
+        </div>
+    </body>
+
+    <script>
+        function restart() {
+            flag = true; // 标记游戏开始
+            let guess = document.getElementById("guess");
+            guess.value = ""; // 清空输入框
+            let result = document.getElementById("feedback");
+            result.value = ""; // 清空反馈框
+            count = 10; // 重置猜测次数
+            let nn = document.getElementById("count");
+            nn.value = count;
+            target = Math.floor(Math.random() * 101); // 生成随机数
+        }
+    </script>
+
+    <script>
+        function run() {
+            if (flag) {
+                let guess = parseInt(document.getElementById("guess").value);
+                // 将用户输入转换为整数
+                let result = document.getElementById("feedback");
+                let nn = document.getElementById("count");
+                // 判断用户输入是否有效
+                if (isNaN(guess) || guess < 0 || guess > 100) {
+                    result.value = "请输入一个 0-100 之间的有效数字!";
+                    return;
+                }
+                // 根据猜测结果给出反馈
+                if (guess > target) {
+                    result.value = "猜的有点大!";
+                } else if (guess < target) {
+                    result.value = "猜的有点小!";
+                } else if (guess == target) {
+                    result.value = "猜对啦！答案是" + guess;
+                    flag = false; // 猜对后结束游戏
+                }
+                // 更新剩余猜测次数
+                count -= 1;
+                nn.value = count;
+                // 如果猜测次数用完，结束游戏
+                if (count == 0 && guess != target) {
+                    result.value = "游戏结束！次数已用完，正确答案是" + target;
+                    flag = false;
+                }
+            }
+        }
+    </script>
+</html>