html调用js函数取随机返回数值并自动显示在html页面
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标签为例;
<!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博客大牛的部分代码,仅仅为了资料搜集和分享,学无止境,也是发给新手参考学习的,大牛请飘过,如有遗漏欢迎指正。
微信机器人:www.waoyou.com
HTML 参考手册 ↩︎
HTML DOM Document 对象 ↩︎
html调用js函数取随机返回数值并自动显示在html页面相关推荐
- HTML调用Java函数或语句,在动态THML语句中调用JS函数传递带空格参数的问题
刚刚遇到一个问题,调用js函数的参数里带空格,造成调用失败的问题. 部分代码如下: html+=" "; //name中如果有空格就是调用失败 html+=" " ...
- 如何在页面调用JS函数的代码
如何在页面调用JS函数的代码 这个所有的人都不能回复啊,只有一个人可以的,晕!我第一次发现JS的功能有"打下来",呵呵! 言归正传: 下面是一个很简单的例子: 首先写一个JS函数, ...
- C#代码调用js函数,js函数中的document.getElementById(对象ID)得null值解决办法
不知道大家有没有遇到这种情况,反正我就遇到过,我现在把解决方法写在下面. 解决方法:1,把调用js函数些在</from>下面.(我原来是写在head标签里面) 2,在cs页面定义一个全局变 ...
- C# .CS后台调用JS函数
//CS调用JS函数ClientScript.RegisterStartupScript(this.GetType(), "clear", "<script> ...
- js 函数闭包内部返回函数体调用方法难点解答
今天在网上,看到一篇关于js函数难点的文章,js函数的一些难点.在那上面提了一下,关于js函数返回另一个函数的问题,并附上了一道面试题: var add = function(x){ var sum ...
- c/c++/MFC 调用 js 函数代码
1 首先 .h 文件中定义: 2 3 CComPtr<IHTMLWindow2> m_sphtmlWnd; 4 CComPtr<IHTMLDocument2> m_spHtml ...
- html调用js函数_Java Web初学者探索学习笔记10—网络API的js数据接口调用解决方案...
声明:本学习笔记内容均为小蔡蜀黍亲自整理和原创,如需借引,请注明出处! 1. 时间戳转化为时间 1.1 时间转换函数准备 1.2 时间函数的具体使用 2. 远程js函数调用 调用的js为天天基金网的实 ...
- python内置函数用来返回数值型序列中所有元素之和_Python内置函数______用来返回数值型序列中所有元素之和...
[填空题]表达式 int(4**0.5) 的值为 [判断题]3+4j不是合法的Python表达式. [填空题]已知列表对象x = ['11', '2', '3'],则表达式 max(x) 的值为 [填 ...
- python内置函数用来返回数值型序列中所有元素之和_语句x = 3==3, 5执行结束后,变量x的值为_学小易找答案...
[判断题]不可以在同一台计算机上安装多个Python版本. [填空题]表达式[1, 2, 3]*3的执行结果为 [填空题]使用切片操作在列表对象x的开始处增加一个元素3的代码为 [填空题]Python ...
- CSS中调用JS函数和变量
在CSS来调用JS程序. 这个技术是网络安全里的,叫做CSS跨站. 我们知道CSS里是可以控制某些HTML元素的属性的,譬如background-image等等,而在URL里添加Javascript: ...
最新文章
- 陈斌:探索技术领导力的最佳实践
- NLP:LSTM之父眼中的深度学习十年简史《The 2010s: Our Decade of Deep Learning / Outlook on the 2020s》的参考文献
- Java矩形区域食物链_AcWing 240. 食物链(JAVA)
- Browser控制台分析
- Kafka设计解析(四):Kafka Consumer解析
- CJCMS系列---慢慢讲电子商务在项目中的实践之前言
- Minimal coverage (贪心,最小覆盖)
- python 线性回归回归 缺失值 忽略_python – 使用scikit-learn(sklearn),如何处理线性回归的缺失数据?...
- Python存储生成的决策树——pickle模块
- 汇编语言辗转相除法求最大公约数
- 深度linux笔记本独显,双显卡笔记本安装Deepin教程
- 多少人,一边疯狂跳槽,一边疯狂后悔
- selenium中整个页面的截图及局部截图(方法分析)
- 在软件开发的早期阶段为什么要进行可行性研究?应该从哪些方面研究目标系统的可行性?...
- excel 公式标多级目录序号
- 猴子定律--如何跳出你深陷的棋局看趋势
- 集美大学第七届团体程序设计天梯赛第二场排位赛题解
- Google 开源项目风格指南--C++ 风格指南
- 【linux】Could not update ICEauthority file /home/xxx/.ICEauthority问题解决
- JDBC通过Statement执行查询操作
热门文章
- 数据化运营之会员数据化运营
- Qt 远程开关机 WakeOnLAN 编辑MagicPacket
- 剑指Offer对答如流系列 - 剪绳子
- dB, -3dB, -6dB相关知识
- C# EF The instance of entity type ‘EqInfo‘ cannot be tracked because another instance with the
- 常用的C语言编程工具
- 小程序项目:基于微信小程序音乐播放器——计算机毕业设计
- Spring Boot 整合 Thymeleaf 完整 Web 案例
- 内网KMS服务器搭建分享
- 99乘法表c语言竖坐标,99乘法表c语言(c语言九九乘法表原理)