基于HTML和JavaScript实现随机数生成与匹配项删除功能需求

下面是完整的实现代码，直接保存成HTML文件就能运行，完全基于HTML和JavaScript实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>随机数字生成器</title>
    <style>
        /* 内嵌简单样式，属于HTML范畴，无需额外文件 */
        .container {
            max-width: 400px;
            margin: 20px auto;
            padding: 0 10px;
        }
        #numberList {
            list-style: none;
            padding: 0;
        }
        #numberList li {
            padding: 8px;
            border-bottom: 1px solid #eee;
        }
        input, button {
            padding: 8px 12px;
            margin-right: 8px;
        }
        .tip {
            color: #dc3545;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>随机数字生成与移除</h2>
        <button onclick="generateRandomNumber()">生成随机数字</button>
        <div style="margin-top: 15px;">
            <input type="text" id="inputNumber" placeholder="输入要移除的数字">
            <button onclick="removeMatchedNumber()">移除匹配数字</button>
        </div>
        <div class="tip" id="tip"></div>
        <h3>已生成的数字</h3>
        <ul id="numberList"></ul>
    </div>

    <script>
        // 存储已生成的数字，避免重复
        const generatedNumbers = new Set();
        const numberList = document.getElementById('numberList');
        const tip = document.getElementById('tip');
        const inputNumber = document.getElementById('inputNumber');

        // 生成1-100的不重复随机数，可修改min/max调整范围
        function generateRandomNumber() {
            const min = 1;
            const max = 100;
            let randomNum;
            // 确保生成的数字不重复
            do {
                randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
            } while (generatedNumbers.has(randomNum));
            
            generatedNumbers.add(randomNum);
            // 创建列表项并添加到页面
            const li = document.createElement('li');
            li.textContent = randomNum;
            li.dataset.number = randomNum; // 绑定数字值，方便后续匹配
            numberList.appendChild(li);
            clearTip();
        }

        // 移除匹配的数字
        function removeMatchedNumber() {
            const inputVal = inputNumber.value.trim();
            // 校验输入有效性
            if (!inputVal || isNaN(Number(inputVal))) {
                showTip('请输入有效的数字');
                return;
            }
            const targetNum = Number(inputVal);
            // 检查数字是否存在
            if (!generatedNumbers.has(targetNum)) {
                showTip('该数字未生成过');
                return;
            }
            // 移除存储记录和页面元素
            generatedNumbers.delete(targetNum);
            const items = numberList.querySelectorAll(`li[data-number="${targetNum}"]`);
            items.forEach(item => item.remove());
            inputNumber.value = '';
            clearTip();
        }

        // 显示提示信息
        function showTip(msg) {
            tip.textContent = msg;
        }

        // 清空提示
        function clearTip() {
            tip.textContent = '';
        }
    </script>
</body>
</html>

功能说明 #

• 生成随机数字：点击按钮生成1-100之间的不重复随机数，自动添加到列表。修改JS中generateRandomNumber函数的min和max值可调整数字范围。
• 移除匹配数字：输入数字后点击移除按钮，会删除列表中对应数字。输入无效或数字未生成时会显示提示。
• 去重机制：用Set存储已生成数字，既避免重复生成，也能快速判断输入数字是否存在。

实现细节 #

• 用data-number属性给列表项绑定数字值，方便精准查找匹配项。
• 输入校验过滤无效内容，避免程序出错。
• 内嵌样式仅用于优化界面可读性，无需额外CSS文件，完全符合仅用HTML和JS的要求。

内容的提问来源于stack exchange，提问作者Random Coder 16