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 numberverificationInput.value = randomCode;});verificationInput.addEventListener('click', function() {verificationInput.value = randomCode;});</script>
</body>
</html>

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

希望可以帮到你们;

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

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

相关文章

软件开发最近很吃香,嵌入式建议转行吗?

在当今时代&#xff0c;软件开发确实备受瞩目&#xff0c;也相当吃香。那么&#xff0c;对于嵌入式领域&#xff0c;我们是否应该考虑转行呢&#xff1f; 事实上&#xff0c;嵌入式工程师的薪资水平相较于互联网行业&#xff0c;在某些情况下可能会略低一些&#xff0c;尤其是…

对于AIGC(人工智能)我们应该如何看待

文章目录 前言一、AIGC技术的现状与特点二、AIGC技术在各个领域的应用三、AIGC技术对未来社会的影响四、AIGC技术的可能发展方向 前言 随着科技的飞速发展&#xff0c;人工智能与大数据的结合日益紧密&#xff0c;AIGC&#xff08;人工智能生成内容&#xff09;技术作为这一领域…

DRF 查询(排序、过滤、分页)

查询(排序、过滤、分页) 【0】准备 &#xff08;1&#xff09;Q查询 详细内容可见&#xff1a;Django模型层-CSDN博客Django 的 Q 对象提供了一种在数据库查询中构造复杂查询的方法。当你想在单个查询中组合多个过滤条件&#xff0c;并且这些条件之间不仅仅是简单的 AND 关系…

阿里云X魔搭社区Create@AI创客松第四届冠军:MumuLab

4月13日终于迎来了线下Demo Day&#xff0c;此前阿里云 X 魔搭社区 X Datawhale CreateAI创客松已经紧锣密鼓地准备了一个多月时间&#xff0c;全球150团队报名、创作出66作品、评选出25支团队进入决赛&#xff0c;作品范围覆盖从办公效率到法律调解再到游戏互动以及构建童话世…

构建交通新动脉 激活襄阳城市发展动力

—— 襄阳环线提速改造工程通车 即从巴峡穿巫峡,便下襄阳向洛阳。襄阳,这座位于汉江之滨的历史文化古城,自古便为交通要塞,正以崭新的姿态迈入一个新时代——城市交通快速化时代。4月26日,襄阳环线提速改造工程正式通车,“一轴三环九放射”城市骨架路网体系基本形成。它不仅是…

python 实现用户登录

1. JWT Token 参考&#xff1a;https://www.zhihu.com/question/364616467 jwt官网&#xff1a;https://jwt.io/#debugger-io 1.1. Token Token 是一个宽泛的术语&#xff0c;它可以指代任何一种用于身份验证的机制。Token 常常被用在验证和授权流程中。Token 可以有不同的形…

C语言笔试题之找出数组的最大公约数

找出数组的最大公约数 实例要求 1、给定一个整数数组 &#xff0c;返回数组中最大数和最小数的最大公约数&#xff1b;2、两个数的最大公约数是能够被两个数整除的最大正整数&#xff1b;示例&#xff1a; 实例分析 1、要找到数组中最大数和最小数的最大公约数&#xff1b…

python 中使用 ESP8266 实现语音识别(或热词检测)

介绍 我的大部分家庭自动化都是通过对网络中的设备执行 HTTP 请求来控制的。 (例如:开灯、打开收音机、控制加热系统...... 这可以使用ESP8266轻松完成。我有一个控制器和一个触摸传感器,当我在床上时用它来控制灯光和音乐。 像 Amazon Echo 或 Google Homepod 一样添加语…

Apache RocketMQ ACL 2.0 全新升级

作者&#xff1a;徒钟 引言 RocketMQ 作为一款流行的分布式消息中间件&#xff0c;被广泛应用于各种大型分布式系统和微服务中&#xff0c;承担着异步通信、系统解耦、削峰填谷和消息通知等重要的角色。随着技术的演进和业务规模的扩大&#xff0c;安全相关的挑战日益突出&am…

HPE Aruba Networking推出新一代Wi-Fi 7接入点 助力企业高效应对安全、AI与物联网挑战

HPE ArubaNetworking推出的全新Wi-Fi 7接入点&#xff0c;提供全面的AI就绪边缘IT解决方案&#xff0c;旨在为用户和物联网设备提供安全、高性能的连接服务&#xff0c;以实现数据的捕获和路由&#xff0c;从而满足AI训练和推理需求 休斯顿-2024年4月23日-慧与科技(NYSE: HPE)近…

vue+html5+css制作日历代码,工作日配置

目录 1.日历页面 2.工作日查询、自然日查询 js 3.修改工作日配置 4.数据库&#xff0c;表结构 5.初始化数据 因系统需要&#xff0c;需要制作一个功能--工作日配置。 需要的业务有&#xff1a; 1.初始化与国家放假情况一致&#xff0c;之后支持手动进行工作日配置&#…

Python 网络与并发编程(四)

文章目录 协程Coroutines协程的核心(控制流的让出和恢复)协程和多线程比较协程的优点协程的缺点 asyncio实现协程(重点) 协程Coroutines 协程&#xff0c;全称是“协同程序”&#xff0c;用来实现任务协作。是一种在线程中&#xff0c;比线程更加轻量级的存在&#xff0c;由程…

《欢乐钓鱼大师》攻略,钓友入坑必备!

欢迎来到《欢乐钓鱼大师》&#xff01;在这个游戏里&#xff0c;你可以尽情享受垂钓的乐趣&#xff0c;通过不断更换和升级高阶鱼竿&#xff0c;轻松地钓到各种稀有鱼类。因为许多玩家在挑战关卡时遇到了一些困难&#xff0c;所以今天我给大家带来了《欢乐钓鱼大师攻略指南》&a…

日志框架整合SpringBoot保姆级教程+日志文件拆分(附源码)

目录 介绍 日志概述 日志文件 调试日志 系统日志 日志框架 日志框架的作用 日志框架的价值 流行的日志框架 SLF4J日志门面 介绍 环境搭建简单测试 集成log4j logback Logback简介 Logback中的组件 Logback配置文件 日志输出格式 控制台输出日志 输出日志到…

vue-admin-template项目实现中英文切换

实现效果&#xff1a; 1.安装 *注意版本号 npm install vue-i18n8.24.5 -S2.新建文件夹 在src目录下新建lang文件夹&#xff0c;里面有3个文件 // index.js import Vue from vue import VueI18n from vue-i18n import Cookies from js-cookie import elementEnLocale fr…

OpenHarmony音视频—opus

简介 Opus是一种用于在互联网上进行交互式语音和音频传输的编解码器。它可以从低比特率窄带语音扩展到非常高的高品质立体声音乐。 下载安装 直接在OpenHarmony-SIG仓中搜索opus并下载。 使用说明 以OpenHarmony 3.1 Beta的rk3568版本为例 将下载的opus库代码存在以下路径&a…

怎样选购内衣洗衣机?2024年5款最新推荐机型种草

随着科技的不断发展&#xff0c;内衣洗衣机成为了家家户户必备的小家电之一&#xff0c;为我们的生活带来了极大的便利。但面对市场上众多的内衣洗衣机品牌&#xff0c;如何选择一款质量好的内衣洗衣机呢&#xff1f;本文将为您推荐5款最新的内衣洗衣机品牌&#xff0c;从而帮助…

二倍体毛白杨(Populus tomentosa Carr.)基因组-春天都是杨树毛子???-文献精读-11

High quality haplotype-resolved genome assemblies of Populus tomentosa Carr., a stabilized interspecific hybrid species widespread in Asia 高质量二倍体解析的毛白杨&#xff08;Populus tomentosa Carr.&#xff09;基因组组装&#xff0c;这是一种在亚洲广泛分布的…

SCSS的基本使用(一)

目录 一、使用&符号来引用父选择器 二、scss的语法 三、变量&#xff08;Variables&#xff09; 四、嵌套&#xff08;Nesting&#xff09; 五、mixin 和 include 六、extend 继承 七、import 与 Partials 八、if简单判断 九、if复杂判断 一、使用&符号来引用父…

原型链prototype、__proto、constructor的那些问题整理

再了解原型链之前,我们先来看看构造函数和实例对象的打印结构 - 函数 这里我们定义一个构造函数Fn,然后打印它的结构吧 function Fn(){} console.dir(Fn)控制台得到结构 从上面结构我们能看的出来,函数有两种原型,一种是作为函数特有的原型:prototype,另一种是作为对象的__…