1、第一步:思路整理。1、HTML只是一个静态的页面的基本标签元素,本身并没有特殊的功能。最新的标准是HTML5.2、HTML需要借助于css样式来修饰它,才能更加美观的展示。3、JavaScript(简称:js)通过操作HTML和css来动态的展示内容,HTML生成随机数需要借助于js
2、第二步:编写代码实现随机数。具体代码如下:<!DOCTYPE html><挢旗扦渌;html> <h髫潋啜缅ead> <meta charset="utf-8" /> <title>js获取随机数</title> </head> <body>ceil:<br /> <input type="text" id="ceil" /><br /> round:<br /> <input type="text" id="round" /><br /> floor:<br /> <input type="text" id="floor" /><br /> round2:<br /> <input type="text" id="round2" /><br /> <button onclick="clickMath()">生成随机数</button> <script> function clickMath(){ var ceil = Math.ceil(Math.random()*10); document.getElementById("ceil").value = ceil; var round = Math.round(Math.random()); document.getElementById("round").value = round; var floor= Math.floor(Math.random()*10); document.getElementById("floor").value = floor; var round2 = Math.round(Math.random()*10); document.getElementById("round2").value = round2; } </script> </body></html>
3、第三步:功能测试。1、打开页面,点击生成随机数按钮2、多次点击获得产生的随机数分别在文本框中展示
4、第四步:知识总结。1、此次使用了HTML的input文本框进行展示2、主要借助于js生成随机数,并复制到文本框中展示。Math.random() ra荏鱿胫协ndom() 返回 0 ~ 1 之间的随机数,包含 0 不包含 1。Math.ceil(数字)对数进行上舍入,即向上取整Math.floor(x)对 x 进行下舍入,即向下取整。Math.round(x) 对x四舍五入。根据id获取文本框对象,并对value赋值document.getElementById("ceil").value = ceil