怎么写随机生成数据的Js函数

Posted 2023-03-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么写随机生成数据的Js函数相关的知识，希望对你有一定的参考价值。

图片中是我的代码，如何写出一个循环，当我点击按钮时随机生成七个data数据使这个网页一直变换（老师希望网页的数据不是静态的），新手接触js，求大神帮助。

其实就是随机数的应用了，一楼的取随机数已经相当完善。扩展一下，结果大概如下，不但数据变化，而且颜色也变化，四个颜色，对应四条边框，挺好玩的：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
bodytext-align:center;color:#00F
divborder:15px solid #DDD;margin-bottom:5px;
</style>
</head>
<body>
<div id='test0'>1</div>
<div id='test1'>2</div>
<div id='test2'>3</div>
<div id='test3'>4</div>
<div id='test4'>5</div>
<div id='test5'>6</div>
<div id='test6'>7</div>
<br />
<input type='button' id='btn' value='换一组看看' />
<script>

</script>

</body>
</html>

参考技术A

代码如下：

<!DOCTYPE html>

<html>

<head>

<style>

bodytext-align:center;color:#00F

divborder:15px solid #DDD;margin-bottom:5px;

</style>

</head>

<body>

<br />

<!--

//换一组按钮事件

var btn=document.getElementById('btn');

btn.onclick=function()fillData();;

var lineChartData=

labels:["january",'Feb'],

datasets:[],//这里只需要空数组就行了，反正加载的时候要清空掉的。

otherData:[]

//以下代码直接贴到你的文件内，应该能管用。

//获取从from 到to　的随机整数

function rand(min,max)

return min+parseInt((max-min)*Math.random());

//随机rgba颜色值

function rgbaStr()

return "rgba("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";

//随机rgb颜色缩写值

function rgbaStr()

var v='0123456789ABCDEF';

return "#"+v.substr(rand(0,15),1)+v.substr(rand(0,15),1)+v.substr(rand(0,15),1);

//填充随机数据

function fillData()

lineChartData.datasets=[];//清空原来的

for(var i=0;i<7;i++)

lineChartData.datasets.push(

fillColor:rgbaStr(),

strokeColor:rgbaStr(),

pointColor:rgbaStr(),

pointStrokeColor:rgbaStr(),

//随机的数据，应该是你需要的那一部份了。

data:[rand(0,100),rand(0,100),rand(0,100),rand(0,100),rand(0,100),rand(0,100),rand(0,100)]

);

//展示数据,直接填充div的四个边的颜色。

for(i in lineChartData.datasets)

var div=document.getElementById('test'+i);

div.style.borderTopColor =lineChartData.datasets[i].fillColor;

div.style.borderLeftColor =lineChartData.datasets[i].strokeColor;

div.style.borderBottomColor =lineChartData.datasets[i].pointColor;

div.style.borderRightColor =lineChartData.datasets[i].pointStrokeColor;

div.innerHTML =' data:'+lineChartData.datasets[i].data.join(' , ');

fillData();//加载完成就填充数据

-->

</script>

</body>

</html>

参考技术B         var lineChartData=
        labels:"january",.....
        datasets:
        fillColor:"rgba("+rgba()+","+rgba()+","+rgba()+","+rgba()+")",
        strokeColor:"rgba("+rgba()+","+rgba()+","+rgba()+","+rgba()+")",
        pointColor:"rgba("+rgba()+","+rgba()+","+rgba()+","+rgba()+")",
        pointStrokeColor:"#fff",
        data:28,....


        //返回0-255的随机数
        function rgba()
         return GetRandom(0,255);

        //生成给定范围内的随机数
        function GetRandom(Min, Max)
            var Range = Max - Min;
            var Rand = Math.random();
            return (Min + Math.round(Rand * Range));

参考技术C function randomColor()
function rd(v)
return Math.floor(Math.random() * v + 0);

return "rgba("+rd(256)+","+rd(256)+","+rd(256)+","+(rd(11)/10)+")";

怎么调用我举一个例子你就懂了：
fillColor:randomColor(),
strokeColor:randomColor()
....... 参考技术D 写个循环，date[i]=Math.random();行不？追问

可以啊能不能帮我写下完整的？
然后怎么放进data那个括号里面呢？

怎么样用JS的随机数生成函数生成1~6之间的某一个整数？

Math中的那个随机函数，希望能够给出代码。谢谢！

用JS的随机数生成函数random()配合其他数学函数可以限制随机数的取值。

JS的随机数函数及相关函数：

Math.random(); 结果为0-1间的一个随机数(包括0,不包括1) 。

Math.floor(num); 参数num为一个数值，函数结果为num的整数部分。

Math.ceil(n); 返回大于等于n的最小整数。

Math.round(num); 参数num为一个数值，函数结果为num四舍五入后的整数。

因此可以用以上函数配合实现取1-6的随机数：

1，用Math.ceil(Math.random()*6);时，主要获取1到6的随机整数，取0的几率极小。

2，用Math.round(Math.random()*5 + 1)，可基本均衡获取1到6的随机整数，其中获取最小值0和最大值6的几率少一半。

3，用Math.floor(Math.random()*6 + 1);时，可均衡获取1到6的随机整数。参考技术A <script>
alert(Math.ceil(Math.random()*6));
</script> 参考技术B <script type="text/javascript">
alert(parseInt(Math.random()*6));
</script>

以上是关于怎么写随机生成数据的Js函数的主要内容，如果未能解决你的问题，请参考以下文章

js中Math.random()生成指定范围数值的随机数

随机函数RND使用