页面加载/刷新时在HTML输入框显示随机文本的实现求助

嘿Calo，作为编程新手能想到这个需求很棒！我给你准备了一套完整的代码，直接复制就能用，还能轻松根据自己的需求修改：

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机文本输入框</title>
    <style>
        /* 可选：给输入框加一点基础样式，不想加可以删掉这部分 */
        input {
            padding: 8px 12px;
            font-size: 16px;
            width: 350px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <!-- 用来展示随机文本的输入框 -->
    <input type="text" id="randomTextInput" readonly>

    <script>
        // 第一步：定义你的自定义文本列表，想加多少内容都可以
        const customTextList = [
            "欢迎来到我的小页面～",
            "今天也要开心编程呀！",
            "这是随机文本示例1",
            "这是随机文本示例2",
            "你可以把这里换成自己的内容"
        ];

        // 第二步：写一个获取随机文本的工具函数
        function pickRandomText() {
            // 生成0到列表长度之间的随机整数索引
            const randomIndex = Math.floor(Math.random() * customTextList.length);
            return customTextList[randomIndex];
        }

        // 第三步：页面加载/刷新时自动执行，把随机文本放到输入框里
        window.onload = function() {
            const targetInput = document.getElementById("randomTextInput");
            targetInput.value = pickRandomText();
        };
    </script>
</body>
</html>

代码简单说明 #

• HTML部分：创建了一个带唯一id的输入框，readonly属性是为了防止用户修改内容，如果你允许编辑可以直接删掉这个属性。
• JS部分：
  • 先定义了你的自定义文本数组customTextList，你可以随意替换、新增里面的文本内容。
  • pickRandomText函数通过Math.random()生成随机数，再用Math.floor()转换成合法的数组索引，从而取出随机文本。
  • window.onload事件会在页面完全加载完成后触发，这时把随机获取到的文本赋值给输入框的value属性，就能自动显示出来了。

你只需要把自定义文本换成自己想展示的内容，刷新页面每次都会看到不同的随机文本哦～

内容的提问来源于stack exchange，提问作者Nerks