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>

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

希望可以帮到你们;

相关推荐
李永奉3 分钟前
C语言-嵌入式开发C语言常用预处理指令合集
c语言·开发语言
东风破_4 分钟前
React 受控组件与非受控组件:从一个输入框讲清表单数据流
前端
尤乐娃子13 分钟前
进入大厂(厂子大)实习Day12
前端·笔记·实习
程序员爱钓鱼17 分钟前
Rust Copy详解:隐式复制与轻量数据类型
前端·后端·rust
上海安当技术43 分钟前
敏感数据怎么防拖库?信封加密(DEK+KEK 二层密钥)架构设计与 Java 实战
java·开发语言·python
我是唐青枫1 小时前
Java JCommander 实战详解:用注解解析命令行参数
java·开发语言
大鹏说大话1 小时前
C++ 内存布局详解:类、虚函数、虚表底层原理
java·开发语言
键盘会跳舞1 小时前
C++:容器适配器 queue 的源码级拆解
开发语言·c++·queue
四六的六2 小时前
端侧模型多端部署实战:从格式转换到灰度发布,Web 和移动端统一部署流水线
前端·人工智能·大模型·ai编程·ai模型·ai产品·端侧ai
Loge编程生活2 小时前
打卡信奥刷题(3449)用C++实现信奥题 P10429 [蓝桥杯 2024 省 B] 拔河
开发语言·数据结构·c++·算法·青少年编程