热门标签 | 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;︎


推荐阅读
  • publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
  • RTThread线程间通信
    线程中通信在裸机编程中,经常会使用全局变量进行功能间的通信,如某些功能可能由于一些操作而改变全局变量的值,另一个功能对此全局变量进行读取& ... [详细]
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • 洛谷 P4009 汽车加油行驶问题 解析
    探讨了经典算法题目——汽车加油行驶问题,通过网络流和费用流的视角,深入解析了该问题的解决方案。本文将详细阐述如何利用最短路径算法解决这一问题,并提供详细的代码实现。 ... [详细]
  • 长期从事ABAP开发工作的专业人士,在面对行业新趋势时,往往需要重新审视自己的发展方向。本文探讨了几位资深专家对ABAP未来走向的看法,以及开发者应如何调整技能以适应新的技术环境。 ... [详细]
  • Beetl是一款先进的Java模板引擎,以其丰富的功能、直观的语法、卓越的性能和易于维护的特点著称。它不仅适用于高响应需求的大型网站,也适合功能复杂的CMS管理系统,提供了一种全新的模板开发体验。 ... [详细]
  • LeetCode 204: 计算质数
    本题要求计算小于给定非负整数n的所有质数的数量。感谢@mithmatt为此问题提供测试案例。 ... [详细]
  • 本文介绍了如何通过C#语言调用动态链接库(DLL)中的函数来实现IC卡的基本操作,包括初始化设备、设置密码模式、获取设备状态等,并详细展示了将TextBox中的数据写入IC卡的具体实现方法。 ... [详细]
  • 近期尝试从www.hub.sciverse.com网站通过编程手段获取数据时遇到问题,起初尝试使用WebBrowser控件进行数据抓取,但发现使用GET方法翻页时,返回的HTML代码始终相同。进一步探究后了解到,该网站的数据是通过Ajax异步加载的,可通过HTTP查看详细的JSON响应。 ... [详细]
  • CentOS下ProFTPD的安装与配置指南
    本文详细介绍在CentOS操作系统上安装和配置ProFTPD服务的方法,包括基本配置、安全设置及高级功能的启用。 ... [详细]
  • 解决JavaScript中法语字符排序问题
    在开发一个使用JavaScript、HTML和CSS的Web应用时,遇到从SQLite数据库中提取的法语词汇排序不正确的问题,特别是带重音符号的字母未按预期排序。 ... [详细]
  • 从理想主义者的内心深处萌发的技术信仰,推动了云原生技术在全球范围内的快速发展。本文将带你深入了解阿里巴巴在开源领域的贡献与成就。 ... [详细]
  • Android与JUnit集成测试实践
    本文探讨了如何在Android项目中集成JUnit进行单元测试,并详细介绍了修改AndroidManifest.xml文件以支持测试的方法。 ... [详细]
  • Spring Boot + RabbitMQ 消息确认机制详解
    本文详细介绍如何在 Spring Boot 项目中使用 RabbitMQ 的消息确认机制,包括消息发送确认和消息接收确认,帮助开发者解决在实际操作中可能遇到的问题。 ... [详细]
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社区 版权所有