作者:书友395154 | 来源:互联网 | 2024-11-06 12:20
在HTML页面中,通过调用JavaScript函数生成随机数值,并将其自动展示在页面上。具体实现包括构建HTML页面结构,定义JavaScript函数以生成随机数,以及在页面加载时自动调用该函数并将结果呈现给用户。
html调用js函数的运行返回结果并显示在html页面
- 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>
最终效果
总结
本文章也取用了现有CSDN博客大牛的部分代码,仅仅为了资料搜集和分享,学无止境,也是发给新手参考学习的,大牛请飘过,如有遗漏欢迎指正。
微信机器人:www.waoyou.com
HTML 参考手册 &#x21a9;︎
HTML DOM Document 对象 &#x21a9;︎