bulls and cows 游戏需用 html 搭配 javascript 实现：html 提供输入框与按钮界面，javascript 负责校验 4 位无重复数字输入、生成随机秘密数组、分两步计算 bulls（位置值全对）和 cows（值对位错且不重复计数）。
怎么用纯 HTML + JavaScript 实现 Bulls and Cows（公牛母牛）猜数字游戏
纯 HTML 无法实现交互逻辑，必须搭配 JavaScript；Bulls and Cows 的核心是「位置+数值」双重匹配判断，不是简单比大小。直接写 <input type="number"> 容易输错位数或重复数字，得手动校验。
- 用户输入必须是 4 位、无重复、0–9 数字（如
"1234"，不能是"0123"或"1123"） - 服务端不参与——整个游戏在浏览器内存里运行，
secretNumber用数组存（如[2, 5, 8, 1]），避免字符串比较陷阱 - 每次猜测后立刻计算
bulls（位置和值都对）和cows（值对但位置错），注意：一个数字只能被计一次（比如秘密数是[1,2,3,4]，猜[1,1,1,1]，结果是bulls=1, cows=0）
怎么写 calculateBullsAndCows() 函数才不出错
常见错误是嵌套循环暴力匹配导致重复计数，或者把 "0" 当成无效输入直接拒掉（其实 "0123" 是合法的 4 位字符串，但作为数字会被转成 123 丢首位）。正确做法是先校验输入格式，再分两步算：
- 第一遍循环：严格比索引，统计
bulls，同时把已匹配的数字从待查集合中剔除（用布尔标记或临时改值） - 第二遍循环：只比数值存在性，对每个未命中 bull 的猜测数字，在 secret 中找未被占用的位置，找到就
cows++并标记该 secret 位已用 - 别用
includes()或indexOf()直接扫——它们不区分是否已被配对过
function calculateBullsAndCows(guess, secret) {
let bulls = 0, cows = 0;
const used = [false, false, false, false]; // 标记 secret 各位是否已被配对
const guessArr = guess.split('').map(Number);
// Step 1: count bulls
for (let i = 0; i
<h3>怎么防止用户乱输：HTML 表单校验 + JS 双重把关</h3>
<p><code><input pattern="[0-9]{4}"></code> 只防非数字和长度，拦不住 <code>"1111"</code> 或 <code>"0000"</code>。必须在 JS 提交时立刻检查：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 用
new Set(guess).size === 4确保无重复（Set自动去重） - 用
/^[0-9]{4}$/.test(guess)确保纯数字且长度为 4（"0123"合法，" 123"不合法） - 不要用
parseInt(guess, 10)转数字——会吃掉前导零，"0123"变成123，长度只剩 3 - 输错时 focus 回输入框并
select()全选，方便重输
为什么 localStorage 存的是 attempts 和 history，而不是整个 secretNumber
刷新页面后如果重新生成 secretNumber，游戏就失去意义。但直接存数组 [2,5,8,1] 到 localStorage 会变成字符串 "2,5,8,1"，取回时得 split(',').map(Number)。更稳妥的是存 JSON：
- 生成新局时：
localStorage.setItem('secret', JSON.stringify([2,5,8,1])) - 页面加载时：
const secret = JSON.parse(localStorage.getItem('secret') || '[]');，并加空数组兜底 - 如果用户清空了 storage 或首次访问，要触发新随机数生成，且确保
getRandomSecret()一定返回无重复的 4 位数组（可用while循环重试，或 Fisher-Yates 洗牌 0–9 再取前 4 位）
最易被忽略的点：移动端软键盘弹出后，输入框可能被遮挡；scrollIntoView({ behavior: 'smooth' }) 要在 input 聚焦后延迟几毫秒再调，否则 iOS 下常失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
