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>

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

希望可以帮到你们;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

15(第十四章,大数据和数据科学)

目录 概述 基本概念 数据仓库/传统商务智能与数据科学的比较 数据科学的过程 大数据 大数据来源 数据湖 机器学习 监督学习 无监督学习 强化学习 扩展 1、数据仓库&#xff08;Data Warehouse&#xff09; 2、数据湖(Data Lake) 3、大数据平台1.0 4、数据中台 …

2024蓝桥杯CTF--逆向

蓝桥杯付费CT--逆向 题目&#xff1a;RC4题目&#xff1a;happytime总结&#xff1a; 题目&#xff1a;RC4 先查壳&#xff0c;无壳&#xff0c;并且是32位&#xff1a; 用32位的ida打开&#xff0c;直接定位到main函数&#xff1a; 重点关注sub_401005函数&#xff0c;这个应…

基于Kubernetes部署free5gc核心网

说明&#xff1a; 本文仅适合个人对5gc核心网感兴趣测、研究使用。 操作系统版本&#xff1a; # uname -r 5.4.0-177-generic # lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 20.04.5 LTS Release: 20.04 Codename: …

spring boot3单模块项目工程搭建-上(个人开发模板)

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《spring boot实战》 目录 写在前面 上文衔接 常规目录创建 common目录 exception.handle目录 result.handle目录 controller目录 service目录 mapper目录 entity目录 test目录 写在最后 写在前面 本文…

CSS学习(选择器、盒子模型)

1、CSS了解 CSS&#xff1a;层叠样式表&#xff0c;一种标记语言&#xff0c;用于给HTML结构设置样式。 样式&#xff1a;文字大小、背景颜色等 p标签内不能嵌套标题标签。 px是相对于分辨率而言的&#xff0c; em是相对于浏览器的默认字体&#xff0c; rem是相对于HTML根元…

更易使用,OceanBase开发者工具 ODC 4.2.4 版本升级

亲爱的朋友们&#xff0c;大家好&#xff01;我们的ODC&#xff08;OceanBase Developer Center &#xff09;再次迎来了重要的升级V 4.2.4&#xff0c;这次我们诚意满满&#xff0c;从五个方面为大家精心打造了一个更加易用、贴心&#xff0c;且功能更强的新版本&#xff0c;相…

如何写好代码?

文章目录 前言内容代码应当易于理解命名注释格式循环和逻辑设计函数设计类其它&#xff08;编程规范、静态检查工具&#xff09;重构 前言 在软件开发领域&#xff0c;写好代码是至关重要的一环。不论是在学校学习的学生&#xff0c;刚刚毕业的应届生&#xff0c;还是刚步入企…

JAVA SWING JTABLE表格,点击表头数据可以排序,且第一二行位置固定,不参与排序

对于JAVA SWING 界面开发&#xff0c;使用表格JTABLE开发过程中&#xff0c;一些情况下可能需要在点击表头时对数据进行排序处理。对于简单的排序处理&#xff0c;jtable的setAutoCreateRowSorter方法可满足&#xff0c;但是对于高要求的排序&#xff0c;则满足不了。 比如&am…

《html自用使用指南》--基于w3School实践

1.基础标签 文本输入时&#xff0c;在编辑器中的换行&#xff0c;多个空格&#xff0c;都被编辑器看作一个空格 <p> 这个段落 在源代码 中 包含 许多行 但是 浏览器 忽略了 它们。 </p>结果&#xff1a;这个段落 在源代码 中 包含 许多行 但是 浏览器…

惊!文件夹突变文件,揭秘背后原因及数据恢复秘籍

在使用电脑时&#xff0c;我们有时会遇到一些意想不到的问题。比如&#xff0c;你可能会突然发现&#xff0c;原本存储着大量重要资料的文件夹&#xff0c;竟然变成了一个无法打开的文件。这种情况听起来可能有些匪夷所思&#xff0c;但它确实存在&#xff0c;且给用户带来了巨…

微信收款码0.2费率开通

很多人想申请低手续费率的收款码不知从何下手&#xff0c;在参考了大量博客教学之后&#xff0c;终于搞懂了详细流程以及注意事项。在此记录一下。我申请的是一个只需要0.2%费率的微信收款码&#xff0c;申请时间是2022年2月12日。申请之前只需要准备营业执照和法人身份z&#…

用不了ChatGPT?快试试免费又强大的Anthropic Claude

一、Claude 简介 Anthropic 官方&#xff1a; https://www.anthropic.com/product Claude 是最近新开放的一款 AI 聊天机器人&#xff0c;是世界上最大的语言模型之一&#xff0c;比之前的一些模型如 GPT-3 要强大得多&#xff0c;因此 Claude 被认为是 ChatGPT 最有力的竞争…

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

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

Perfectly Clear Workbench for mac/win:让图像清晰不再是难题

在数字时代&#xff0c;图像处理已经成为我们日常生活和工作中的必备技能。无论是专业摄影师&#xff0c;还是业余爱好者&#xff0c;都渴望拥有一款能够轻松提升图像质量的软件。今天&#xff0c;我要向大家推荐一款卓越的图像清晰处理软件——Perfectly Clear Workbench&…

NAT网络地址转换实验(华为)

思科设备参考&#xff1a;NAT网络地址转换实验&#xff08;思科&#xff09; 一&#xff0c;技术简介 NAT&#xff08;Network Address Translation&#xff09;&#xff0c;即网络地址转换技术&#xff0c;是一种在现代计算机网络中广泛应用的技术&#xff0c;主要用于有效管…

将游戏界面与注册/登录界面连接到一起

一、 导包 在注册页面中导入一个import subprocess包 二、 使用代码将其连接到一起 在循环中加入下面这一行代码&#xff0c;用来实现效果 subprocess.run(["python", "game代码.py"]

容器安全-镜像扫描

前言 容器镜像安全是云原生应用交付安全的重要一环&#xff0c;对上传的容器镜像进行及时安全扫描&#xff0c;并基于扫描结果选择阻断应用部署&#xff0c;可有效降低生产环境漏洞风险。容器安全面临的风险有&#xff1a;镜像风险、镜像仓库风险、编排工具风险&#xff0c;小…

【图解计算机网络】TCP协议三次握手与四次挥手

TCP协议三次握手与四次挥手 三次握手流程为什么是三次握手&#xff0c;而不是两次或四次四次挥手流程TIME_WAIT 为什么要等待 2MSL为什么握手是三次&#xff0c;挥手是四次&#xff1f; 三次握手流程 首先是客户端&#xff08;也就是我们的浏览器&#xff09;发送一个SYN标志位…

在Jupyter notebook中添加虚拟环境

通常我们打开Jupyter notebook&#xff0c;创建一个新文件&#xff0c;只有一个Python3&#xff0c;但是我们也会想使用自己创建的虚拟环境&#xff0c;很简单仅需几部即可将自己的conda环境添加到jupyter notebook中。 1. 创建并激活conda环境&#xff08;已有可跳过&#xf…

Datasophon1.2.1集成Dinky1.0.1

Dinky 下载地址: https://github.com/DataLinkDC/dinky/releases/tag/v1.0.1 Dinky 官网&#xff1a;https://www.dinky.org.cn/ 1.下载Dinky wget https://github.com/DataLinkDC/dinky/releases/download/v1.0.1/dinky-release-1.16-1.0.1.tar.gz mv dinky-release-1.16-1.…