随机数生成器

基于 random.org 的真随机数生成器，源代码可于右下角的 </> 图标查看。

HTML

<div class="container mt-5">
    <h2 class="mb-4">基于 random.org 的真随机数生成器</h2>
    <div class="row">
        <div class="col-xs-6">
            <label for="minVal">最小值：</label>
            <input type="number" class="form-control" id="minVal" placeholder="最小值">
        </div>
        <div class="col-xs-6">
            <label for="maxVal">最大值：</label>
            <input type="number" class="form-control" id="maxVal" placeholder="最大值">
        </div>
    </div>

    <br>
    <p align="right">
        <!-- <div class="d-grid mt-3"> -->
        <input type="submit" class="btn btn btn-primary" id="generateBtn" value="生成真随机数" style="font-weight: bold; width: 120px;">
        <!-- </div> -->
    </p>
    <div class="mt-4">
        <div class="alert alert-info" role="alert">
            <h4>结果：<b><span id="result" class="text-success"></span></b></h4>
        </div>
        <div id="error" class="text-danger mt-2"></div>
    </div>
</div>

Javascript

document.getElementById('generateBtn').addEventListener('click', getRandomNumber);

function getRandomNumber() {
    const minVal = document.getElementById('minVal').value;
    const maxVal = document.getElementById('maxVal').value;
    const min = parseFloat(minVal);
    const max = parseFloat(maxVal);
    const minIsInt = Number.isInteger(min);
    const maxIsInt = Number.isInteger(max);

    const resultSpan = document.getElementById('result');
    const errorDiv = document.getElementById('error');
    const generatebtn = document.getElementById('generateBtn');
    resultSpan.textContent = '';
    errorDiv.textContent = '';

    if (isNaN(min) || isNaN(max) || min > max) {
        errorDiv.textContent = '请输入有效的最小值和最大值，且最小值不能大于最大值。';
        return;
    }

    generatebtn.disabled = true;
    resultSpan.textContent = '正在生成，请稍候…';

    if (minIsInt && maxIsInt) {
        // 调用 random.org 生成整数
        fetch("https://api.random.org/json-rpc/4/invoke", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    jsonrpc: "2.0",
                    method: "generateIntegers",
                    params: {
                        apiKey: "05cc0c6a-3ac0-477c-9ae0-dc122e7ab0b2",
                        n: 1,
                        min: min,
                        max: max
                    },
                    id: 42
                })
            })
            .then(res => res.json())
            .then(data => {
                generatebtn.disabled = false;
                if (data.result && data.result.random && data.result.random.data) {
                    resultSpan.textContent = data.result.random.data[0];
                } else {
                    resultSpan.textContent = '';
                    errorDiv.textContent = '获取随机数失败，请检查 API Key 或额度。';
                }
            })
            .catch(err => {
                generatebtn.disabled = false;
                resultSpan.textContent = '';
                errorDiv.textContent = '请求出错：' + err + '。这可能是由于网络问题导致的。';
            });
    } else {
        // 生成带小数的随机数（本地算法）
        const randomNum = Math.random() * (max - min) + min;
        resultSpan.textContent = Number(randomNum.toFixed(6));
        generatebtn.disabled = false;
    }
}

CSS

a,
a:hover,
a:focus {
    text-decoration: none;
}

.generatebtn {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #5790FF;
    border-radius: 4px;
    width: 120px;
    height: 40px;
    line-height: 30px;
    font-size: 16px;
    color: #000000;
    cursor: pointer;
    background: #fff linear-gradient(180deg, #CCDEFF 0, #A1C7FF 100%);
    transition: opacity 0.2s;
}

.generatebtn:active,
.generatebtn:hover {
    /* background: #A6C6FF; */
    background: #fff linear-gradient(0deg, #CCDEFF 0, #A1C7FF 100%);
}

.generatebtn:disabled {
    background: #fff linear-gradient(180deg, #CCDEFF 0, #A1C7FF 100%);
    opacity: 0.5;
    cursor: not-allowed;
}

在 GitHub 上编辑此页

贡献者: mcenahle