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

news2025/1/18 6:53:18

效果图:

代码:

<!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>

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

希望可以帮到你们;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1628137.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

39岁TVB靓仔小生自曝恋情,曾沦为洗车工如今半年赚足7位数

39岁高钧贤自从2005年参加香港先生选举夺冠后&#xff0c;之后加入TVB拍摄过多套电视剧集&#xff0c;最近更有份参与《逆天奇案2》&#xff0c;日前他回到TVB电视城一厂与冯盈盈宣传剧集&#xff0c;更随即拍摄短片纪录放在网上分享&#xff0c;意外曝光TVB餐厅餐单&#xff0…

FIB和RIB基础

1.思考以下的topo从数据层面和控制层面分别是如何通信的 &#xff08;1&#xff09;数据层面&#xff1b;数据包从PC1经过AR1 AR2最后到达PC2&#xff0c;这就是数据层面的通信。 &#xff08;2&#xff09;控制层面&#xff1a;PC2所在的网段192.168.2.0/24是经过AR2传递给AR…

大白菜启动U盘想格式化但格式化不了

部分区域被修改分区表保护起来了。直接格式化的话&#xff0c;里面的文件夹都还在。根本格式化不了。特别是可用容量并未还原出来。 进入计算机管理》磁盘管理&#xff0c;看到U盘盘符。别搞错了。删除掉里面的已经分的区域和未分区区域&#xff0c;让它还原成一个整体。退出。…

c++多文件,cmakelist编写简单示例

记录下c多文件cmakelist编写流程&#xff1a; 目录结构大致如下&#xff1a; 1、swap.h #include <iostream> #include <vector> #include <string> using namespace std;void swap(int *a,int *b); 2、swap.cpp #include "swap.h"void swap(…

list类——常用函数模拟

本篇将对 list 类的常用函数进行模拟。其中主要要点为函数的模拟&#xff0c;另外还会对函数的功能和返回值进行讲解。但 list 可以说是 string vector stack queue …… STL 库中最难实现一个类&#xff0c;因为 list 的迭代器不是很好实现&#xff0c;所以本篇一个很重要的一…

Sy8网络管理命令(ubuntu23.10和centos8)

前言、 本次实验主要是扩展学习&#xff0c;不仅限在课本的内容。毕竟课本的内容太过于陈旧了。需要的童鞋看看。 说明&#xff1a;&#xff08;书本中sy9”第3.实验内容“大家还是要做下。&#xff09; 1、使用ubuntu做实验的童鞋只要看第二、三、四、七章节的部分内容。 2、使…

2024年4月计算机视觉论文推荐

本文将整理4月发表的计算机视觉的重要论文&#xff0c;重点介绍了计算机视觉领域的最新研究和进展&#xff0c;包括图像识别、视觉模型优化、生成对抗网络(gan)、图像分割、视频分析等各个子领域 扩散模型 1、Tango 2: Aligning Diffusion-based Text-to-Audio Generations th…

基于遗传算法的TSP算法(matlab实现)

一、理论基础 TSP(traveling salesman problem,旅行商问题)是典型的NP完全问题&#xff0c;即其最坏情况下的时间复杂度随着问题规模的增大按指数方式增长&#xff0c;到目前为止还未找到一个多项式时间的有效算法。TSP问题可描述为&#xff1a;已知n个城市相互之间的距离&…

25计算机考研院校数据分析 | 南京大学

南京大学&#xff08;Nanjing University&#xff09;&#xff0c;简称“南大”&#xff0c;是中华人民共和国教育部直属、中央直管副部级建制的全国重点大学&#xff0c;国家首批“双一流”、“211工程”、“985工程”重点建设高校&#xff0c;入选首批“珠峰计划”、“111计划…

无人机+巡飞弹:“柳叶刀”巡飞弹技术详解

“柳叶刀”巡飞弹技术是一种结合了无人机和巡飞弹的先进武器系统&#xff0c;由俄罗斯ZalaAero公司研制&#xff0c;首次公开亮相是在2019年的俄罗斯军队装备展上。该系统以其高度的灵活性和精确打击能力&#xff0c;在现代战场上扮演着重要角色。 系统组成&#xff1a;柳叶刀巡…

MFC实现ini配置文件的读取

MFC实现 ini 配置文件的读取1 实现的功能&#xff1a;点击导入配置文件按钮可以在旁边编辑框中显示配置文件的路径&#xff0c;以及在下面的编辑框中显示配置文件的内容。 1. 显示配置文件内容的编辑框设置 对于显示配置文件内容的 Edit Contorl 编辑框的属性设置如下&#x…

自制音频格式二维码的方法,适合多种音频格式使用

现在可以通过二维码的方法来传递音频文件是很常用的一种方式&#xff0c;可以将单个或者多个音频放入一个二维码&#xff0c;通过手机扫码来调取云端储存的音频文件来播放内容&#xff0c;这样可以让多人同时扫码获取内容&#xff0c;提升传播速度。 音频二维码制作的方法也比…

纵览2024年:排名靠前的项目管理软件一览!

时间飞逝&#xff0c;2024年已经过去近半&#xff0c;让我们来盘点2024年排名靠前的项目管理软件&#xff0c;项目管理软件排行榜&#xff0c;本次上榜的项目管理软件有Zoho Projects、Microsoft Project、Nifty、Smartsheet、ClickUp。 一、项目管理软件排行榜 1.Zoho Projec…

航空企业数字化解决方案(207页PPT)

一、资料描述 航空企业数字化解决方案是一项针对航空公司在数字化转型过程中所面临挑战的全面应对策略&#xff0c;旨在通过先进的信息技术提升航空企业的运营效率、客户服务水平以及市场竞争力。这份207页的PPT详细介绍了航空企业数字化的各个方面&#xff0c;包括关键技术的…

解决主机有网络但虚拟机没网络连接问题----记录

问题描述&#xff1a;主机Windows有网络但虚拟机Linux没有网络 1.使用ifconfig 命令查看Linux网络IP 发现只有lo本地回环网卡ip并没有真实网卡IP 2.查看本地所有网卡 终端输入 ip link show 结果&#xff1a;虚拟机上还有一个ens33 真实的网卡驱动&#xff0c; 解决办法&…

Aurora-64B/10B、XDMA与DDR结合设计高速数据流通路设计/Aurora光纤设计/XDMA读取DDR设计/基于FPGA的高速数据传输设计

因最近想通过FPGA把数据从光纤传到PC&#xff0c;借此机会和大家一起学习Aurora、XDMA结合DDR 制作不易&#xff0c;记得三连哦&#xff0c;给我动力&#xff0c;持续更新&#xff01;&#xff01;&#xff01; 完整工程文件下载&#xff1a;XDMA读写DDR工程 提取码&…

数据结构——二叉树练习(深搜广搜)

数据结构——二叉树练习 路径之和深度优先算法和广度优先算法二叉搜索树判断一棵二叉树是否为搜索二叉树和完全二叉树 我们今天来看二叉树的习题&#xff1a; 路径之和 https://leetcode.cn/problems/path-sum-ii/ 这是一个典型的回溯&#xff0c;深度优先算法的题&#xff0c…

Docker镜像和容器操作

目录 一.Docker镜像创建与操作 1. 搜索镜像 2. 获取镜像 3. 镜像加速下载 4. 查看镜像信息 5. 查看下载的镜像文件信息 ​编辑6. 查看下载到本地的所有镜像 7. 根据镜像的唯一标识ID号&#xff0c;获取镜像详细信息 8. 为本地的镜像添加新的标签 9. 删除镜像 10. 存入…

【1731】jsp 房租跟踪监控管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 房租跟踪监控管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysq…

【uniapp/ucharts】采用 uniapp 框架的 h5 应用使用 ucharts(没有 uni_modules)

这种情况无法直接从 dcloud 平台上一键下载导入&#xff0c;所以应该在官网推荐的 git 仓库去单独下载&#xff1a; https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6/qiun-data-charts(%E9%9D%9Euni_modules) 下载的文件是如图所示的路径&…