开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用JavaScript显示随机数列表并将其显示在Modal上

的方法如下：

首先，创建一个HTML页面，包含一个按钮和一个Modal（弹出框）元素。给按钮添加一个点击事件，当点击按钮时，弹出Modal。

<!DOCTYPE html>
<html>
<head>
    <title>随机数列表</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button onclick="openModal()">显示随机数列表</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <h2>随机数列表</h2>
            <ul id="randomList"></ul>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

在JavaScript文件（script.js）中，编写生成随机数列表、打开和关闭Modal的函数。

function openModal() {
    var modal = document.getElementById("myModal");
    modal.style.display = "block";

    generateRandomList();
}

function closeModal() {
    var modal = document.getElementById("myModal");
    modal.style.display = "none";
}

function generateRandomList() {
    var randomList = document.getElementById("randomList");
    randomList.innerHTML = "";

    for (var i = 0; i < 10; i++) {
        var randomNumber = Math.floor(Math.random() * 100);
        var listItem = document.createElement("li");
        listItem.textContent = randomNumber;
        randomList.appendChild(listItem);
    }
}

运行HTML页面，点击按钮即可显示随机数列表的Modal。

这个例子中，我们使用了JavaScript来生成随机数列表，并将其显示在Modal上。当点击按钮时，Modal弹出并显示随机数列表，点击Modal上的关闭按钮或背景区域，Modal关闭。

相关搜索:在Modal上显示Bing地图如何在modal上显示纯JavaScript覆盖？使用Javascript显示2个随机数使用javascript显示列表项显示来自JSON Parse的数据，并使用Volley for Network将其显示在自动完成文本上在MVC中获取图像并使用Javascript显示使用Javascript在悬停项目上显示文本在多个元素上使用JavaScript显示/隐藏在我的主页上显示列表的url (javascript)使用JavaScript在移动设备上显示弹出窗口比较列表列表并使用OpenCV显示结果使用python生成随机数并在grafana上显示如何从firestore渲染用户列表，并使用react js将其以表格形式显示在网页上？在droppable :：javascript上显示隐藏按钮使用javascript在按钮上显示图像使用Gtk在列表中显示列表如何每隔60秒刷新一次会话，并使用Pharo将其显示在脚本上？有没有办法连续读取CSV文件并使用Flask将其显示在HTML上？在屏幕上显示css动画并返回使用redux工具包显示react功能组件上的Modal

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JavaScript实现伪随机正态分布

在前端开发中，生成伪随机正态分布的数据对于模拟和实验非常有用。本文将介绍正态分布的基本概念，并探讨如何使用JavaScript实现伪随机正态分布。

02

区块链一键登录：MetaMask教程(One-click Login with Blockchain: A MetaMask Tutorial)

在线用户对传统电子邮件/密码注册流程的抵抗力日益增强。通过Facebook，Google或GitHub的一键式社交登录功能被证明是更理想的选择。然而，它存在一种权衡。

02

第二十九课如何实现MetaMask签名授权后DAPP一键登录功能？

网站太多，各种用户名/密码实在记不住。所以我们逐渐接受了BAT账号的授权登录功能。在以太坊DAPP应用中，也可以使用MetaMask实现授权后一键登录功能。MetaMask是去中心化钱包，授权信息不会如BAT中心一样存在被收集利用的问题。本文从技术层面讲清楚原理，并结合代码说明如何实现。

05

分享 7 个你可能喜欢的 JS 小技巧

| https://medium.com/young-coder/7-of-my-favorite-little-javascript-tricks-4f2a1cfe68b4

02

[ASP.NET MVC] 利用动态注入HTML的方式来设计复杂页面

随着最终用户对用户体验需求的不断提高，实际上我们很多情况下已经在按照桌面应用的标准来设计Web应用，甚至很多Web页面本身就体现为一个单一的页面。对于这种复杂的页面，我们在设计的时候不可以真的将所有涉及的元素通通至于某个单独的View中，将复杂页面相对独立的内容“分而治之”才是设计之道。我们可以借鉴Smart Clent应用的设计方式：将一个Windows Form作为应用的容器（Smart Client Shell），在操作过程中动态地激活相应的用户控件（Smart Part）并加载到容器中。对于一个复杂页面来说，我们也只需要将其设计成一个容器，至于运行过程中动态显示的内容则可以通过Ajax调用获取相应的HTML来填充。[源代码从这里下载]

02

开源图书《Python完全自学教程》6.3.2两个常用函数

Python 内置函数 zip() 的基本调用形式是 zip(*iterables) ，其参数应为可迭代对象，且用符号 * 表示可以是多个可迭代对象（参阅第7章7.2节），例如：

02

4 个 useState Hook 示例

到 React 16.8 目前为止，如果编写函数组件，然后遇到需要添加状态的情况，咱们就必须将组件转换为类组件。

02

牛客网js题库正解(1~20题)

请补全JavaScript代码，要求在页面上渲染出一个直角三角形，三角形换行要求使用"br"实现。

02

【Java_06】Scanner 类、Random 类、ArrayList 集合

一、Scanner 类 1. Scanner 介绍 * 一个可以解析基本类型和字符串的文本扫描器。 2. Scanner 的使用 ① 导包格式：import 包名.类名; 即：import java.util.Scanner; ② 创建对象格式：类名对象名 = new 类名( 参数列表 ); 即：Scanner sc = new Scanner(System.in); 注：System.in系统输入指的是从键盘输入 ③ 调用方法

01

区块链核心技术-密码学

大家好，首先感谢腾讯云提供云社区这样一个让技术人员沟通交流的平台，其次很高兴入驻到云+社区认识到大家，我是腾讯云TVP一员，专注于云计算、区块链、Web架构方向，myPagination作者，Github也开源了很多区块链的项目：https://github.com/linapex，有需要的朋友可以下载学习，本文是区块链技术实战系列的第二篇（不定期更新）：

你需要了解的前端测试“金字塔”

来自：开源中国社区链接：www.oschina.net/translate/the-front-end-test-pyramid-rethink-your-testing 原文：https://medium.freecodecamp.org/the-front-end-test-pyramid-rethink-your-testing-3b343c2bca51 如果您正在测试前端应用程序，则应该了解前端测试金字塔。在本文中，我们将看到前端测试金字塔是什么，以及如何使用它来创建全面的测试套件。前端测试金

08

Web前端基础（05）

####溢出设置overflow visible(默认) 超出范围显示 hidden 超出范围不显示 scroll 超出范围滚动显示 ###JavaScript 作用:给页面添加动态效果和Java没有任何关系,只是为了蹭热度语言特点: 属于脚本语言,不需要编译直接解析执行基于面向对象属于弱类型语言 int x = 10; String s = “abc”; 弱类型 var x = 10; var s = “abc”; 安全性高,JavaScript语言只能访问浏览器内部的数据,浏览器以外的

02

如何在Python和numpy中生成随机数

随机性的使用是机器学习算法配置和评估的重要部分。从神经网络中的权重的随机初始化，到将数据分成随机的训练和测试集，再到随机梯度下降中的训练数据集的随机混洗（random shuffling），生成随机数和利用随机性是必需掌握的技能。

03

2023学习日志

redis是一个基于内存的键值对数据库，通常用作缓存数据库，减少对mysql等基于磁盘的数据库的访问次数，提高响应效率。

00

【JS实用技巧篇】03-封装思想

该篇主要是针对初学者，培养编程思想当中的——抽象思维，即能抽取关键信息，聚焦重点，而我们本篇所讲的封装思想便是这种思想的一部分，通常需要经过长期锻炼才能达到根深蒂固的程度，所以需要慢慢理解并加以实践——多敲

02

分享7个实用的 JavaScript 方法技巧

在本文中，我收集了一些关于JavaScript 技巧和窍门，我相信它们可以让你成为更好的 JavaScript 开发人员。没有特别的顺序，这里一共收集整理了7个 JavaScript 技巧！

03

反射跨站脚本（XSS）示例

如何利用它？原来的要求如下：应用程序的回应非常清楚。用户ID为空（空）。我们没有为它指定一个值。我们有XSS。有效负载未被应用程序编码/过滤，响应的内容类型显示为HTML：获得

07

ExcelVBA与python产生不重复随机数

VBA编程实现不重复随机数输出。VBA里的随机函数是RND，在工作表中随机函数是RAND，一字之差，可要记好了。RND取值范围是[0,1)，意思是0和1之间的一个随机数，包含0，但不包含1。

03

请用一个实际案例解读如何使用循环语句？

昨天看了循环语句的语法讲解，受益匪浅。但还是希望能提供一个实际的应用案例，来解读一下循环语句的具体实现方法。可以吗？

03

翻译：Perl代码审计:Perl脚本中存在的问题与存在的安全风险

程序设计语言通常不构成安全风险，风险是由程序员带来的。几乎每种语言都有某些缺陷，这些缺陷在某种程度上可能有助于创建不安全的软件，但软件的整体安全性仍然在很大程度上取决于开发者的安全意识。Perl也有安全“陷阱”，然而大多数Perl程序员并不了解这些陷阱。

05

浏览器工作原理 - 安全

浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同源之间要相互访问或者操作 DOM，会有一套基础的安全策略制约，即同源策略。

02

【Python深度学习之路】产生随机数

计算机是根据被称为“种子(seed)”的数据来生成随机数的。所谓种子，是指在生成随机数的过程中所使用的初始值，如果种子的值固定不变，生成的随机数序列也是不变的。通过使用相同的随机数序列，在同样的条件下，即使是使用了随机数得到的计算结果也是可重现的。如果不对种子进行设置，计算机就会使用当前的时间作为种子的初始值，因此每次执行代码都会有输出不同的随机数。可以通过将种子（整数）传递给 numpy.random.seed() 对种子的数值进行设置。

02

哈希函数如何工作 ?

作为一名程序员，您每天都会使用哈希函数。它们在数据库中用于优化查询，在数据结构中用于使速度更快，在安全性中用于保证数据安全。几乎每次与技术的交互都会以某种方式涉及哈希函数。

03

【云+社区年度正文】手把手用JavaScript 带你打造一款随机选双色球彩票号码网页

双色球是指一种福利彩票的名称。它由“中bai国福利彩票发行管理中心”统一组织、统一管理、统一发行、统一销售(在全国各省、市和地区联合销售)。其特征是“大奖大，小奖多，只要中一个蓝色球号就有奖。

03

32个有用的JS 代码片段，让你的代码显得更专业

JavaScript 无疑是 Web 开发中最流行的编程语言之一。无论你选择使用 Angular、jQuery、Vue.js 还是 React，JavaScript 在所有这些中都扮演着重要的角色。

04

【动手学深度学习】深入浅出深度学习之利用神经网络识别螺旋状数据集

通过这次实验，我成功创建了一个用于识别螺旋状的数据集三层神经网络，并对深度学习所需的数学知识有了更深入的理解。

01

智慧园区可视化应用数据源接口问题

DIX是CamBuilder中用于实时对接入数据进行处理后输出到指定目的地的系统。可以用来接入Mysql、ActiveMq，syslog等数据源中存储的数据，可以在接入这些数据源存储的数据后，利用DIX对数据进行简单处理后，输出到指定的数据源，目前支持MySql、ActiveMq等。

03

《C#图解教程》读书笔记之五：委托和事件

（1）本质：持有一个或多个方法的对象；委托和典型的对象不同，执行委托实际上是执行它所“持有”的方法。如果从C++的角度来理解委托，可以将其理解为一个类型安全的、面向对象的函数指针。

02

五分钟学会做一个在线抽奖系统，手把手教你抽奖还学不会嘛？

今天我就来和大家分享一个超简单的利用jQuery框架实现的在线抽奖系统。放上几张学妹的照片，看你能抽到哪一个呢？

01

哈希表总结

之前给大家介绍了链表，栈和队列今天我们来说一种新的数据结构散列（哈希）表，散列是应用非常广泛的数据结构，在我们的刷题过程中，散列表的出场率特别高。所以我们快来一起把散列表的内些事给整明白吧，文章框架如下。

02

学生物的女朋友都能看懂的哈希表总结！

之前给大家介绍了链表，栈和队列今天我们来说一种新的数据结构散列（哈希）表，散列是应用非常广泛的数据结构，在我们的刷题过程中，散列表的出场率特别高。所以我们快来一起把散列表的内些事给整明白吧，文章框架如下。

02

如何在 React 中点击显示或隐藏另一个组件？

React 是一种流行的 JavaScript 库，用于构建动态用户界面。在一个 React 应用程序中，有时需要一个按钮或链接来触发显示或隐藏一个相关的组件。这种需求可以通过使用 React 状态管理和事件处理机制来实现。

01

文心一言 VS 讯飞星火 VS chatgpt （134）-- 算法导论11.2 6题

在这个问题中，我们需要使用 Go 语言在一个大小为 m 且通过链接法解决冲突的散列表中，从 n 个关键字中均匀随机地选择一个元素。为了达到 O(L·(1+1/a)) 的期望时间复杂度，我们需要考虑以下几个步骤：

07

如何使用Chainlink VRF在以太坊上生成随机数

随机数和区块链一直很难达到“一致”(译者注：区块链要求确定性，而随机数正相反)。到目前为止，区块链上还没有可验证的随机函数。

01

Java基础-day05-代码题

Java基础-day05-代码题 1.在主方法里键盘录入n(1<=n<=9)，并调用打印nn乘法表的方法。实现代码： package StudentJavaSEday05; import jav

09

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能，例如：漂亮的图片幻灯片、下拉菜单、弹出框等，都可以结合JavaScript和CSS实现。在这章，我们将讨论一些Bootstrap 3 提供的随时可用的JavaScript插件，很容易创建一些高级的网页功能。

04

用vue实现模态框组件

基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实现。组件结构 <tem

00

【Java 进阶篇】Bootstrap 快速入门

Bootstrap 是一个流行的开源前端框架，它使网页开发更加容易和高效。无论您是一个有经验的开发者还是一个初学者，本文将带您深入了解 Bootstrap，从基础概念到实际示例，以帮助您快速入门这个强大的工具。

01

python面试题目及答案(数据库常见面试题及答案)

Python是目前编程领域最受欢迎的语言。在本文中，我将总结Python面试中最常见的50个问题。每道题都提供参考答案，希望能够帮助你在2019年求职面试中脱颖而出，找到一份高薪工作。这些面试题涉及Python基础知识、Python编程、数据分析以及Python函数库等多个方面。

02

吐血总结！50道Python面试题集锦（附答案）「建议收藏」

Python是目前编程领域最受欢迎的语言。在本文中，我将总结Python面试中最常见的50个问题。每道题都提供参考答案，希望能够帮助你在2019年求职面试中脱颖而出，找到一份高薪工作。这些面试题涉及Python基础知识、Python编程、数据分析以及Python函数库等多个方面。

01

[译]您不想错过的IntelliJ IDEA十大插件

尽管IntelliJ IDEA是功能齐全的IDE，但您可能希望对其进行个性化设置。JetBrains插件市场上有许多具有有用功能的插件，可以满足您的个人或企业特定需求。

05

吐血总结！100个Python面试问题集锦

Python是目前编程领域最受欢迎的语言。在本文中，我将总结Python面试中最常见的100个问题。每道题都提供参考答案，希望能够帮助你在2019年求职面试中脱颖而出，找到一份高薪工作。这100道面试题涉及Python基础知识、Python编程、数据分析以及Python函数库等多个方面。

02

在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用

由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式，再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少（我们看到的相关内容往往是某本介绍ASP.NET MVC的书籍“额外奉送”的），以至于很多人会觉得ASP.NET Web API仅仅是ASP.NET MVC的一个小小的扩展而已，自身并没有太多“大书特书”的地方。而真实的情况下是：ASP.NET Web API不仅仅具有一个完全独立的消息处理管道，而且这个管道比为ASP.NET MVC设计的管道更为复杂，功能也更

区块链节点的密钥管理

本文主要讨论一种区块链节点的密钥管理方案。区块链节点都会有各自的私钥，将一段随机数分成两段，一段存在配置文件，一段写在节点的运行代码里，通过某种算法结合这两段随机数，生成一个对称密钥，用这个对称秘钥对私钥加密，将加密后的私钥存储在配置文件中。节点需要对交易签名时，再次通过这两段随机数生成对称秘钥，获取配置文件中已加密的私钥，通过生成的对称秘钥解密后，用解密获得的私钥对交易进行签名。

08

请解释如何实现算法 PERMUTE-BY-SORTING，以处理两个或更多优先级相同的情形。也就是说，即使有两个或更多优先级相同

算法 PERMUTE-BY-SORTING 是一种基于排序的随机排列算法，它通过将输入数组中的元素按照优先级排序，然后根据优先级依次将元素插入到输出数组中，从而生成一个均匀随机排列。

01

Python 生成随机数_python 随机字符串

python中生成随机数主要使用random模块和numpy库中的random函数。

01

用python编写验证码

作为一个用python的生信工程师，平时工作中除了用python来处理些文本文件和搭建流程，没事也想探索些其他有趣的功能。这几天就在网上学习了下如何用python编写验证码，感兴趣的同学也一起来学习下吧！ 01 验证码的作用及干扰机制在编写验证码之前，我们首先来了解下验证码是用来干嘛的吧：验证码主要是为了防止暴力破解，爬虫模拟登陆以及各种键盘钩子进行登陆；验证码能起到干扰作用的机制主要是靠背景点或线条进行干扰，以及对文字进行扭曲。 02 Python编写验证码实战我们先来看下采用python编写验

05

vue 2.6 中 slot 的新用法

最近发布不久的Vue 2.6，使用插槽的语法变得更加简洁。对插槽的这种改变让我对发现插槽的潜在功能感兴趣，以便为我们基于Vue的项目提供可重用性，新功能和更清晰的可读性。真正有能力的插槽是什么？

02

【拓展】686- 如何在 Web 上大规模生成 UUID

你可以信任大家的浏览器，并依靠它们来大规模生成全局唯一标识符吗？在 Teads 我们已经试过了，答案是肯定的，但也有几点需要注意。本文介绍了我们所做的实验以及在此过程中总结到的经验。

04

读《图解密码技术》(三):密钥、随机数和应用技术

最后一篇了，如果还没看过前两篇的，最好先翻回去看看，因为这最后一篇的内容是建立在前两篇的基础之上的。本篇的内容包括密钥、随机数、PGP、SSL/TLS，最后再讲讲密码技术的现状和局限性，以及简单介绍一下量子密码和量子计算机。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭