当前位置： 首页 > news >正文

随机数生成器代码HTML5

news 文章来源：https://blog.csdn.net/emptyset/article/details/133198998 2025/1/11 3:58:21

代码如下

<!DOCTYPE html>
<html>
<head>
  <title>随机数生成器</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      text-align: center;
      background-color: #f2f2f2;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #333;
    }

    .container {
      width: 300px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      
    }

    label {
      display: block;
      margin-bottom: 10px;
    }

    input[type="number"] {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    input[type="checkbox"] {
      margin-top: 5px;
    }

    button {
      display: block;
      width: 100%;
      padding: 10px;
      margin-top: 20px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .result {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>随机数生成器</h1>
    <label for="length">字符数量:</label>
    <input type="number" id="length" min="1" max="100" value="8">

    <label for="include-letters">
      <input type="checkbox" id="include-letters" checked>
      包含英文字母
    </label>

    <label for="include-symbols">
      <input type="checkbox" id="include-symbols" checked>
      包含符号
    </label>

    <label for="include-digits">
      <input type="checkbox" id="include-digits" checked>
      包含数字
    </label>

    <button οnclick="generateRandomString()">生成</button>

    <div class="result" id="result"></div>
  </div>

  <script>
    function generateRandomString() {
      var length = document.getElementById("length").value;
      var includeLetters = document.getElementById("include-letters").checked;
      var includeSymbols = document.getElementById("include-symbols").checked;
      var includeDigits = document.getElementById("include-digits").checked;

      var letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
      var symbols = "!@#$%^&*()";
      var digits = "0123456789";

      var characters = "";
      if (includeLetters) {
        characters += letters;
      }
      if (includeSymbols) {
        characters += symbols;
      }
      if (includeDigits) {
        characters += digits;
      }

      var result = "";
      for (var i = 0; i < length; i++) {
        var randomIndex = Math.floor(Math.random() * characters.length);
        result += characters.charAt(randomIndex);
      }

      document.getElementById("result").innerHTML = result;
    }
  </script>
</body>
</html>

相关文章：

随机数生成器代码HTML5

代码如下 <!DOCTYPE html> <html> <head> <title>随机数生成器</title> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <style> body { text-align: center; bac…...

编程日记 2023/9/23 12:39:41

正确理解redux Toolkits中createSlice的action.payload

使用redux Toolkits中的createSlice编写extraReducers经常看到使用action.payload来更新state状态值&#xff1a; 那么action.payload指的到底是什么&#xff1f; 让我们看看action的定义部分&#xff1a; 注意&#xff1a; action.payload不是上面ajax请求的返回内容&#x…...

编程日记 2023/9/23 12:36:38

YOLOv8快速复现 官网版本 ultralytics

YOLOV8环境安装教程.&#xff1a;https://www.bilibili.com/video/BV1dG4y1c7dH/ YOLOV8保姆级教学视频:https://www.bilibili.com/video/BV1qd4y1L7aX/ b站视频&#xff1a;https://www.bilibili.com/video/BV12p4y1c7UY/ 1 平台搭建YOLOv8 平台&#xff1a;https://www.a…...

编程日记 2023/9/23 12:35:37

Haproxy搭建 Web 群集实现负载均衡

目录 1 Haproxy 1.1 HAProxy的主要特性 1.2 HAProxy负载均衡策略 1.3 LVS、Nginx、HAproxy的区别 2 Haproxy搭建 Web 群集 2.1 haproxy 服务器部署 2.1.1 关闭防火墙 2.1.2 内核配置&#xff08;实验环境可有可无&#xff09; ​2.1.3 安装 Haproxy 2.1.4 Haproxy服务…...

编程日记 2023/9/23 12:34:36

Tessy 5.0.4

Tessy 5.0.4 Linux 2692407267qq.com&#xff0c;更多内容请见http://user.qzone.qq.com/2692407267/...

编程日记 2023/9/23 12:32:34

mybatis-plus根据指定条件批量更新

1.service实现类中 比如我这里只针对UserEntity&#xff0c;在UserServiceImpl下&#xff08;该实现类是继承了mybatis-plus的ServiceImpl的&#xff09;新增如下代码&#xff1a; public boolean updateBatchByQueryWrapper(Collection<UserEntity> entityList, Funct…...

编程日记 2023/9/23 12:31:33

虹科方案 | LIN/CAN总线汽车零部件测试方案

文章目录 摘要一、汽车零部件测试的重要性&#xff1f;二、虹科的测试仿真工具如何在汽车零部件测试展露头角&#xff1f;三、应用场景**应用场景1&#xff1a;方向盘开关的功能测试****应用场景2&#xff1a;各类型电机的控制测试****应用场景3&#xff1a;RGB氛围灯的功能测试…...

编程日记 2023/9/23 12:30:32

[solidity]合约调用合约

先写一个简单的合约将其部署&#xff0c;部署后的合约地址为&#xff1a;0xd9145CCE52D386f254917e481eB44e9943F39138 // SPDX-License-Identifier: MIT pragma solidity ^0.8.0;contract A{string myname;function setName(string memory _name) public{myname_name;}functi…...

编程日记 2023/9/23 12:28:31

Vulnhub系列靶机---JANGOW 1.0.1

文章目录 网卡配置信息收集主机发现端口扫描 漏洞利用反弹Shell提权 靶机文档&#xff1a;JANGOW 1.0.1 下载地址&#xff1a;Download (Mirror) 难易程度&#xff1a;. 网卡配置 水果味儿 信息收集 主机发现 端口扫描 访问80端口 点击site目录 点击页面上方的一个选项&…...

编程日记 2023/9/23 12:26:29

肖sir__项目环境之全流程__005

一、测试流程&#xff08;h模型&#xff09; 1、需求文档&#xff08;产品&#xff09; 需求文档&#xff08;软件需求规格说明书srs&#xff09; &#xff08;1&#xff09;如何分析需求 a、显示需求&#xff08;主流程、功能&#xff0c;业务&#xff09; b、隐性需求&#x…...

编程日记 2023/9/23 12:25:28

搜狗输入法下键翻页

搜狗输入法下键翻页 从官网下载 搜狗输入法智慧版关闭超级候选关闭候选...

编程日记 2023/9/23 12:24:27

C#多线程

一、多线程实现方式 1. 使⽤Thread类&#xff1a; System.Threading.Thread 类是C#中最基本的多线程编程⼯具。 2. 使⽤ThreadPool&#xff1a; 线程池是⼀个管理和重⽤线程的机制&#xff0c;它可以在应⽤程序中创建和使 ⽤多个线程&#xff0c;⽽⽆需显式地管理线程的…...

编程日记 2023/9/23 12:23:26

Unity 编辑器常用方法

unity编辑器开发 脚本注解1. RuntimeInitializeOnLoadMethod2. ColorUsage3. Header4. SerializeField5. HideInInspector6. Space7. Range8. Multiline9.[RequireComponent(typeof())]10.HelpURL 右键菜单注解1. CreateAssetMenu - 针对ScriptableObject 菜单栏注解1. MenuIt…...

编程日记 2023/9/23 12:21:25

21 mysql ref 查询

前言 这里主要是 探究一下 explain $sql 中各个 type 诸如 const, ref, range, index, all 的查询的影响, 以及一个初步的效率的判断 这里会调试源码来看一下 各个类型的查询 需要 lookUp 的记录 以及 相关的差异 此系列文章建议从 mysql const 查询 开始看 测试表结构…...

编程日记 2023/9/23 12:19:23

启山智软/一款包含主流商城类型的一款电商中台系统100%开源

文章目录 介绍一、Smart Shop JAVA 微服务电商中台优势二、电商中台包含那些主流商城模式1.S2B2C供应链商城2.B2B2C多商户商城3.B2C单商户商城4.O2O外卖配送商城5.社区团购商城 6.演示地址总结 介绍 想要了解代码规范&#xff0c;学习商城解决方案&#xff0c;点击下方官网链接…...

编程日记 2023/9/23 12:18:22

【C语言】指针的进阶（四）—— 企业笔试题解析

笔试题1&#xff1a; int main() {int a[5] { 1, 2, 3, 4, 5 };int* ptr (int*)(&a 1);printf("%d,%d", *(a 1), *(ptr - 1));return 0; } 【答案】在x86环境下运行 【解析】 &a是取出整个数组的地址&#xff0c;&a就表示整个数组&#xff0c;因此…...

编程日记 2023/9/23 12:17:21

博弈论——连续产量古诺模型

连续产量古诺模型 连续产量古诺模型是博弈论中非常经典的模型&#xff0c;以两厂商连续产量古诺博弈为例&#xff1a; 1、模型建立 Player&#xff1a;两个供应相同产品的厂商 产量&#xff1a;厂商1的产量为q1&#xff0c;厂商2的产量为q2&#xff0c;市场总供给为Qq1q2。…...

编程日记 2023/9/23 12:14:19

ROS2 驱动思岚G4雷达（ydlidar）- Rviz显示

记录G4雷达的配置 系统环境为&#xff1a;Ubuntu22.04 配置步骤 1、安装雷达SDK 2、构建 G4 雷达 ROS2 项目工程文件 3、使用Rviz可视化界面显示 1、安装雷达SDK 1.1 安装CMake YDLidar SDK需要CMake 2.8.2作为依赖项 Ubuntu 18.04或者Ubuntu 22.04 sudo apt install cmak…...

编程日记 2023/9/23 12:12:17

Spring Cloud Alibaba Sentinel流量防卫兵

文章目录 Spring Cloud Alibaba Sentinel流量防卫兵1. 分布式遇到的问题2.解决的方法 Sentinel: 分布式系统的流量防卫兵1. 简介和特折 Sentinel流量防卫兵的搭建1.引入依赖2.添加配置类3.运行类上添加SentinelResource&#xff0c;并配置blockHandler和fallback4. linux中放入…...

编程日记 2023/9/23 12:11:16

1.简单工厂模式

UML类图 代码 main.cpp #include <iostream> #include "OperationFactory.h" using namespace std;int main(void) {float num1;float num2;char operate;cin >> num1 >> num2 >> operate;Operation* oper OperationFactory::createOpera…...

编程日记 2023/9/23 12:08:13

GitHub Copilot Chat

9月21日&#xff0c;GitHub在官网宣布&#xff0c;所有个人开发者可以使用GitHub Copilot Chat。用户通过文本问答方式就能生成、检查、分析各种代码。 据悉&#xff0c;GitHub Copilot Chat是基于OpenAI的GPT-4模型打造而成&#xff0c;整体使用方法与ChatGPT类似。例如&…...

编程日记 2023/9/23 12:07:11

利用 QT 完成一个人脸识别系统，完成登录操作

1.配置文件 # Project created by QtCreator 2023-09-22T10:34:23 # #-------------------------------------------------QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT widgetsTARGET project TEMPLATE appSOURCES main.cpp\widget.cppHEADERS widget.hFOR…...

编程日记 2023/9/23 12:00:06

MATLAB APP纯小白入门 两数相加

万事开头难&#xff0c;最怕第一次。使用matlab APP 实现两数求和&#xff0c;如下图所示&#xff0c;c a b&#xff0c;输入数字后&#xff0c;按 “” 就计算。 步骤 拖拽三个 Edit Field(Numeric) 过来&#xff0c;并且双击名字分别改为 a,b,c。注意修改名字后右边会有点变…...

编程日记 2023/9/23 11:56:02

ubuntu右上角的网络连接图标消失解决办法

ubuntu更新了几个文件后&#xff0c;我的ubuntu系统右上角的网络连接图标就消失了&#xff0c;然后怎么也找不到了&#xff0c;怎么办呢&#xff1f; 1、按快捷键ctrlaltt打开终端 2、按以下顺序输入如下的命令行 sudo service network-manager stop sudo rm /var/lib/Netw…...

编程日记 2023/9/23 11:54:00

conda创建虚拟环境安装aix360

目录 创建虚拟环境查看已有虚拟环境进入所创建的虚拟环境查看已安装的程序查看已安装的python模块配置镜像pipconda 安装aix360将环境添加到jupyter删除虚拟环境 创建虚拟环境 conda create -n aix360 python3.9查看已有虚拟环境 conda env list进入所创建的虚拟环境 activa…...

编程日记 2023/9/23 11:51:58

CentOS安装mariadb

1、 安装 [rootlocalhost ~]# yum install mariadb mariadb-server2、 启动并自启 [rootecs-3f21 ~]# systemctl enable mariadb –now3、 查看启动状态 [rootecs-3f21 ~]# systemctl status mariadb4、 初始化mariadb并设置root密码 [rootecs-3f21 ~]# mysql_secure_inst…...

编程日记 2023/9/23 11:47:55

FPGA——基础知识合集

文章目录 前言1、简述触发器与锁存器的区别2、简述 if-else 语句和 case 语句的区别3、相对 ARM、DSP 等处理器&#xff0c;谈谈 FPGA 具有哪些优势4、简述 Verilog 语句中阻塞赋值与非阻塞赋值的含义与区别&#xff0c;以及各自的适用的场景5、什么是同步电路&#xff0c;什么…...

编程日记 2023/9/23 11:46:54

【pytest】 标记冒烟用例 @pytest.mark.smoke

1. 使用 pytest.mark.smoke 标记用例 import pytest class Test_Smoke:def test_01(self):assert 112pytest.mark.smokedef test_02(self):assert 121pytest.mark.smokedef test_03(self):assert 1 2 3 2.配置文件pytest.ini [pytest] markers smoke 3. 运行指定标签 运…...

编程日记 2023/9/23 11:45:53

数据结构入门-14-排序

一、选择排序 1.1 选择排序思想 先把最小的元素拿出来 剩下的&#xff0c;再把最小的拿出来 剩下的&#xff0c;再把最小的拿出来 但是这样 空间复杂度是O(n) 优化一下&#xff0c;希望原地排序 1.1.2 选择原地排序 索引i指向0的位置 索引j指向i1的元素 j 后面的元素遍历&…...

编程日记 2023/9/23 11:44:52

Gin学习记录4——Controller和中间件

一. Controller 用不同的Controller可以实现业务的分类&#xff0c;不同类型的请求可以共用同一套中间件 1.1 单文件Controller 几乎等同于函数封装&#xff0c;直接将ctrl的代码写入到一个文件里然后调用&#xff1a; package adminimport ("net/http""git…...

编程日记 2023/9/23 11:43:51

网络营销是什么的基础选择题/网站seo报告

string str"abc"; string().swap(str); 转载于:https://blog.51cto.com/tinyweb/982623...

编程日记 2025/1/11 3:03:36

wordpress. 评论插件/怎么弄属于自己的网站

1. 前言从2020年10月开始&#xff0c;基于亚马孙云科技 Graviton2 的缓存实例逐步推出&#xff0c;客户可以在使用 Amazon ElastiCache for Redis上使用这些实例。Graviton2 处理器由 Amazon Web Services 使用 64 位 ARM Neoverse 内核定制&#xff0c;对第一代亚马逊云科技 G…...

编程日记 2025/1/11 2:54:22

怎么给网站在百度地图上做爬虫/国产系统2345

本文实例为大家分享了Java遍历文件夹下所有文件并重命名的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下项目中需要将一批文件全部重新命名&#xff0c;文件实在太多就写了这个工具类这个工具类是将路径下的文件全部重新命名&#xff0c;且名字为同一个package com.…...

编程日记 2025/1/10 21:22:04

济南建设主管部门网站/宁波网站快速优化

近日&#xff0c;IBM宣布筹建中的认知计算系统研究中心&#xff08;C3SR&#xff09;将安家于美国伊利诺伊大学厄巴纳分校的工程学院。 C3SR计划在今年夏季正式启动&#xff0c;将构建以IBM Watson技术为基础的综合认知计算系统&#xff0c;对包括视频、讲稿、作业和教材等大量…...

编程日记 2025/1/10 18:37:08

盖州网站优化/网站开发的公司

一面 一面就做了一道算法题&#xff0c;要求两小时内完成&#xff0c;给了长度为N的有重复元素的数组&#xff0c;要求输出第10大的数。典型的TopK问题&#xff0c;快排算法搞定。 算法题要注意的是合法性校验、边界条件以及异常的处理。另外&#xff0c;如果要写测试用例&am…...

编程日记 2025/1/10 18:24:01

做棋盘游戏辅助的网站/网络营销的含义的理解

2019独角兽企业重金招聘Python工程师标准>>> 需求&#xff1a; 1.可以通过数据库配置cronExpression表达式&#xff0c;动态修改执行时间 2.不修改服务器环境支持集群架构&#xff1a;即保证集群环境下单实例运行 3.实现业务上的实时开启/停止控制功能 第一步&#…...

编程日记 2025/1/10 18:12:56