如何用JS生成随机字

JavaScript017

如何用JS生成随机字,第1张

直接调用如randomWord(1,6,10)产生6到10位的随机密码,如果要显示出来,要么alert(),要么显示到某个HTML元素中。下面给个简单示例,你可以保存为html文件后打开TEST 示例效果

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

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/htmlcharset=utf-8">

<style>

body{text-align:centercolor:#00F}

div{border:15px solid #DDDmargin-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>

<!--

//换一组按钮事件

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=0i<7i++){

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>