js如何点击生成4位随机数

效果图:

代码:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate Random Four-Digit Verification Code</title>
</head>
<body>
    <h1>点击生成四位随机数</h1>
    <input type="text" id="verificationInput">
    <button id="generateCode">Generate Code</button>

    <script>
        const generateCodeButton = document.getElementById("generateCode");
        const verificationInput = document.getElementById("verificationInput");
        let randomCode = '';

        generateCodeButton.addEventListener('click', function() {
            randomCode = Math.floor(1000 + Math.random() * 9000); // Generate a random four-digit number
            verificationInput.value = randomCode;
        });

        verificationInput.addEventListener('click', function() {
            verificationInput.value = randomCode;
        });
    </script>
</body>
</html>

当前效果是需要点击按钮,也可以写在点击按钮里面,根据需求适当调整;

希望可以帮到你们;

相关推荐
前端风云志16 分钟前
TypeScript实用类型之Omit
javascript
烛阴28 分钟前
Puppeteer入门指南:掌控浏览器,开启自动化新时代
前端·javascript
全宝1 小时前
🖲️一行代码实现鼠标换肤
前端·css·html
小小小小宇2 小时前
前端模拟一个setTimeout
前端
萌萌哒草头将军2 小时前
🚀🚀🚀 不要只知道 Vite 了,可以看看 Farm ,Rust 编写的快速且一致的打包工具
前端·vue.js·react.js
芝士加3 小时前
Playwright vs MidScene:自动化工具“双雄”谁更适合你?
前端·javascript
Carlos_sam4 小时前
OpenLayers:封装一个自定义罗盘控件
前端·javascript
前端南玖4 小时前
深入Vue3响应式:手写实现reactive与ref
前端·javascript·vue.js
wordbaby4 小时前
React Router 双重加载器机制:服务端 loader 与客户端 clientLoader 完整解析
前端·react.js
itslife4 小时前
Fiber 架构
前端·react.js