在网页中写一个label input框 一个按钮。
预览一下效果。要实现的功能就是,点击一下获取验证码按钮,生成6位随机数写入到input框中。
在网页中添加必要的script便签。为按钮添加单击事件。
写产生验证码的js。只有简单的3行,就不过多的解释。
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript">
//16进制(数值+字母)
function random1(len) {
var pwd = ""
for(var idx = 0 idx < len idx ++){
pwd = pwd + ((Math.random() * 16) & (0x5 | 0x9)).toString(16)
}
return pwd
}
//ASCII (数值+字母+特殊字符)
function random2(len){
//ASCII 33 ~ 126
var pwd = ""
for(var idx = 0 idx < len idx ++){
pwd = pwd + String.fromCharCode(parseInt(Math.random() * 93 + 33))
}
return pwd
}
//纯数字
function random3(len){
var pwd = ""
for(var idx = 0 idx < len idx ++){
var seed = parseInt(Math.random() * 9)
pwd = pwd + seed
}
return pwd
}
function create(){
var result = document.getElementById("result1")
for(var i = 0 i < 10 i++){
result.innerText = result.innerText + random1(6) + "\n"
}
var result = document.getElementById("result2")
for(var i = 0 i < 10 i++){
result.innerText = result.innerText + random2(6) + "\n"
}
var result = document.getElementById("result3")
for(var i = 0 i < 10 i++){
result.innerText = result.innerText + random3(6) + "\n"
}
}
</script>
</head>
<body>
<div id="result1" style="border:1px solid #e0e0e0width: 200px height: 300pxmargin-top: 10pxfloat: left">
</div>
<div id="result2" style="border:1px solid #e0e0e0width: 200px height: 300pxmargin-top: 10pxmargin-left: 20pxfloat: left">
</div>
<div id="result3" style="border:1px solid #e0e0e0width: 200px height: 300pxmargin-top: 10pxmargin-left: 20pxfloat: left">
</div>
<button onclick="create()" style="padding: 3px 5pxmargin: 5px 20px">Random</button>
</body>
</html>
用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的随机整数。