html调用js函数的运行返回结果并显示在html页面
JS构造JS取随机数值函数调用JS函数并取得随机数html构造一个html页面html页面加载自动调用js函数返回值并显示在html页面[^1]最终效果总结JS
我们需要实现最终的结果必须要先构造出JS取随机数值的函数。
构造JS取随机数值函数
CSDN上已经有大牛写出了函数了，我们无需继续造轮子直接拿来用就好了，这个函数原作者在构造的时候，提供了3个参数：
JS取随机数值函数完整代码如下：
<script>/**************************************** 代码引用自：/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标签为例；
<!DOCTYPE html html><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函数了，如下：
<!DOCTYPE html html><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博客大牛的部分代码，仅仅为了资料搜集和分享，学无止境，也是发给新手参考学习的，大牛请飘过，如有遗漏欢迎指正。
微信机器人：
HTML 参考手册 ↩︎
HTML DOM Document 对象 ↩︎
