热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML页面中调用JavaScript函数生成随机数值并自动展示

在HTML页面中,通过调用JavaScript函数生成随机数值,并将其自动展示在页面上。具体实现包括构建HTML页面结构,定义JavaScript函数以生成随机数,以及在页面加载时自动调用该函数并将结果呈现给用户。

html调用js函数的运行返回结果并显示在html页面

  • JS
    • 构造JS取随机数值函数
    • 调用JS函数并取得随机数
  • html
    • 构造一个html页面
    • html页面加载自动调用js函数返回值并显示在html页面[^1]
  • 最终效果
  • 总结
JS

我们需要实现最终的结果必须要先构造出JS取随机数值的函数。

构造JS取随机数值函数

CSDN上已经有大牛写出了函数了,我们无需继续造轮子直接拿来用就好了,这个函数原作者在构造的时候,提供了3个参数:

参数参数说明
maxNum'最大值'
minNum"最小值"
decimalNum"小数点位数,如果指定decimalNum个数,则生成指定小数位数的随机数"

JS取随机数值函数完整代码如下:

<script>
/*************************************** * 代码引用自:https://www.cnblogs.com/mq0036/p/9139231.html * 生成从minNum到maxNum的随机数。 * 如果指定decimalNum个数,则生成指定小数位数的随机数 * 如果不指定任何参数,则生成0-1之间的随机数。 * * @minNum:[数据类型是Integer]生成的随机数的最小值(minNum和maxNum可以调换位置) * @maxNum:[数据类型是Integer]生成的随机数的最大值 * @decimalNum:[数据类型是Integer]如果生成的是带有小数的随机数,则指定随机数的小数点后的位数 * ****************************************/
function randomNum(maxNum, minNum, decimalNum) {
var max = 0, min = 0;
minNum <= maxNum ? (min = minNum, max = maxNum) : (min = maxNum, max = minNum);
switch (arguments.length) {
case 1:
return Math.floor(Math.random() * (max + 1));
break;
case 2:
return Math.floor(Math.random() * (max - min + 1) + min);
break;
case 3:
return (Math.random() * (max - min) + min).toFixed(decimalNum);
break;
default:
return Math.random();
break;
}
}
</script>

调用JS函数并取得随机数

通过已经构造好的JS函数,我们可以继续用JS来调用函数,并提供函数所需的参数'100''800',用变量'number'获取函数返回值,这样就可以成功取得两个参数中间范围的一个随机数;

<script type="text/Javascript">
function myFunction(){
var number=randomNum(100,800)
};
</script>
html

首先我们要构造一个html页面。

构造一个html页面

这个页面需要有一个html元素,我们以常见的div标签为例;


<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>html页面title>
head>
<body>
<div id="div_text">div>
body>
html>

html页面加载自动调用js函数返回值并显示在html页面1

这里最主要是要在body标签内加上属性'Onload="myFunction()"'2 ,就可以实现在页面加载时自动执行JS函数了,如下:


<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>html页面加载自动调用js函数返回值并显示在html页面title>
head>
<body onload="myFunction()">
<script type="text/Javascript"> function myFunction(){ var number=randomNum(500,799) document.getElementById("div_text").innerHTML = number; }; script>
<script> function randomNum(maxNum, minNum, decimalNum) { var max = 0, min = 0; minNum <= maxNum ? (min = minNum, max = maxNum) : (min = maxNum, max = minNum); switch (arguments.length) { case 1: return Math.floor(Math.random() * (max + 1)); break; case 2: return Math.floor(Math.random() * (max - min + 1) + min); break; case 3: return (Math.random() * (max - min) + min).toFixed(decimalNum); break; default: return Math.random(); break; } } script>
<div id="div_text">div>
body>
html>
最终效果

《html调用js函数取随机返回数值并自动显示在html页面》

总结

本文章也取用了现有CSDN博客大牛的部分代码,仅仅为了资料搜集和分享,学无止境,也是发给新手参考学习的,大牛请飘过,如有遗漏欢迎指正。

微信机器人:www.waoyou.com

  1. HTML 参考手册 &#x21a9;︎

  2. HTML DOM Document 对象 &#x21a9;︎


推荐阅读
  • 本文介绍了UUID(通用唯一标识符)的概念及其在JavaScript中生成Java兼容UUID的代码实现与优化技巧。UUID是一个128位的唯一标识符,广泛应用于分布式系统中以确保唯一性。文章详细探讨了如何利用JavaScript生成符合Java标准的UUID,并提供了多种优化方法,以提高生成效率和兼容性。 ... [详细]
  • 优化后的标题:利用 jQuery 实现高效树形结构元素选择与操作
    在Web前端开发中,DOM结构本质上是一种树形结构。通过优化后的jQuery选择器,可以高效地选择和操作DOM树中的节点。这些选择器不仅简化了代码编写,还提高了性能和可维护性。本文将详细介绍如何利用jQuery的树形选择器实现高效的元素选择与操作。 ... [详细]
  • 本文全面解析了 gRPC 的基础知识与高级应用,从 helloworld.proto 文件入手,详细阐述了如何定义服务接口。例如,`Greeter` 服务中的 `SayHello` 方法,该方法在客户端和服务器端的消息交互中起到了关键作用。通过实例代码,读者可以深入了解 gRPC 的工作原理及其在实际项目中的应用。 ... [详细]
  • 本文深入探讨了CGLIB BeanCopier在Bean对象复制中的应用及其优化技巧。相较于Spring的BeanUtils和Apache的BeanUtils,CGLIB BeanCopier在性能上具有显著优势。通过详细分析其内部机制和使用场景,本文提供了多种优化方法,帮助开发者在实际项目中更高效地利用这一工具。此外,文章还讨论了CGLIB BeanCopier在复杂对象结构和大规模数据处理中的表现,为读者提供了实用的参考和建议。 ... [详细]
  • 本文探讨了基于点集估算图像区域的Alpha形状算法在Python中的应用。通过改进传统的Delaunay三角剖分方法,该算法能够生成更加灵活和精确的形状轮廓,避免了单纯使用Delaunay三角剖分时可能出现的过大三角形问题。这种“模糊Delaunay三角剖分”技术不仅提高了形状的准确性,还增强了对复杂图像区域的适应能力。 ... [详细]
  • 如何撰写PHP电商项目的实战经验? ... [详细]
  • 经过半年的精心整理,我们汇总了当前市场上最全面的Android面试题解析,为移动开发人员的晋升和加薪提供了宝贵的参考资料。本书详细涵盖了从基础到高级的各类面试题,帮助读者全面提升技术实力和面试表现。章节目录包括:- 第一章:Android基础面试题- 第二章:... ... [详细]
  • 在编程笔试和面试中,全排列算法因其适中的难度而备受青睐,不仅能够考察应聘者的算法基础,还能测试其对递归和回溯的理解。本文将深入解析全排列算法的实现原理,探讨其应用场景,并提供优化建议,帮助读者更好地掌握这一重要算法。 ... [详细]
  • 本文对常见的字符串哈希函数进行了全面分析,涵盖了BKDRHash、APHash、DJBHash、JSHash、RSHash、SDBMHash、PJWHash和ELFHash等多种算法。这些哈希函数在不同的应用场景中表现出各异的性能特点,通过对比其算法原理、计算效率和碰撞概率,为实际应用提供了有价值的参考。 ... [详细]
  • 解决lib-flexible安装过程中遇到的错误问题
    在安装 lib-flexible 时,遇到了 `saveError ENOENT: No such file or directory` 错误,具体表现为无法打开 `E:\Github\SDIO\package.json` 文件。解决此问题的关键在于确保项目根目录下存在 `package.json` 文件,并且在正确的项目路径中执行安装命令。建议先检查项目结构,确认文件是否存在,然后再尝试重新安装依赖。 ... [详细]
  • Golomb 编码是一种高效的变长编码技术,专门用于整数的压缩。该方法通过预定义的参数 \( M \) 将输入整数分解为商 \( q \) 和余数 \( r \) 两部分。具体而言,输入整数除以 \( M \) 得到商 \( q \) 和余数 \( r \),其中商 \( q \) 采用一元编码表示,而余数 \( r \) 则使用二进制编码。这种编码方式在数据压缩和信息传输中具有显著的优势,特别是在处理具有特定概率分布的数据时表现出色。 ... [详细]
  • 哈希表(Hash Table)是一种高效的查找算法,与传统的链表和树结构相比,其在查找过程中无需进行逐个元素的比较。本文将深入探讨哈希表的基本原理、应用场景以及优化策略,帮助读者全面理解其在实际开发中的优势和局限性。通过实例分析和代码示例,我们将展示如何有效利用哈希表提高数据处理效率,并解决常见的冲突问题。 ... [详细]
  • FastDFS Nginx 扩展模块的源代码解析与技术剖析
    FastDFS Nginx 扩展模块的源代码解析与技术剖析 ... [详细]
  • 利用 Python 中的 Altair 库实现数据抖动的水平剥离分析 ... [详细]
  • 浅层神经网络解析:本文详细探讨了两层神经网络(即一个输入层、一个隐藏层和一个输出层)的结构与工作原理。通过吴恩达教授的课程,读者将深入了解浅层神经网络的基本概念、参数初始化方法以及前向传播和反向传播的具体实现步骤。此外,文章还介绍了如何利用这些基础知识解决实际问题,并提供了丰富的实例和代码示例。 ... [详细]
author-avatar
书友395154
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有