JavaScript 生成4位随机数
分享一段代码实例，它实现了生成四位随机数的功能，并且数字颜色也会随机变化。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#box {
margin: 100px auto;
width: 200px;
height: 150px;
line-height: 150px;
letter-spacing: 10px;
text-align: center;
font-size: 30px;
font-weight: bolder;
border: 2px solid palegreen;
word-wrap: break-word;
border-radius: 5px;
position: relative;
}
#btn {
position: absolute;
left: 50%;
top: 280px;
}
</style>
<script>
window.onload=function(){
var box=document.getElementById("box");
var span=document.getElementsByTagName("span");
var btn=document.getElementById("btn");
var color="";
var str="0123456789abcdef";
btn.onclick=function(){
for (var index = 0; index < span.length; index++) {
for(var j=0;j<6;j++){
color+=str.substr(parseInt(Math.random()*str.length),1);
}
span[index].innerHTML = parseInt(Math.random() * 10);
span[index].style.color = ("#" + color);
color="";
}
}
}
</script>
</head>
<body>
<div id="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<input type="button" id="btn" value="查看演示" />
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var box=document.getElementById("box")，获取指定id的元素对象。
（3）.var color=""，用来存储颜色值。
（4）.var str="0123456789abcdef"，组成十六进制颜色值的字符。
（5）.btn.onclick=function(){}，为按钮注册click事件处理函数。
（6）.for (var index = 0; index < span.length; index++) ,通过for循环生成指定位数的数字。
（7）.for(var j=0;j<6;j++){
color+=str.substr(parseInt(Math.random()*str.length),1);
},生成十六进制颜色值。
（8）.span[index].innerHTML = parseInt(Math.random() * 10)，为对应索引的span元素添加随时生成的0-9的数字。
（9）.span[index].style.color = ("#" + color)，设置数字颜色。
（10）. color=""，清空存储颜色的字符串，防止下一次生成颜色时出现累加问题。
二.相关阅读:
（1）.document.getElementById()参阅document.getElementById()一章节。
（2）.substr()参阅JavaScript substr()一章节。
（3）.document.getElementsByTagName()参阅document.getElementsByTagName()一章节。
（4）.parseInt()参阅JavaScript parseInt()一章节。
（5）.Math.random()参阅JavaScript Math.random()一章节。
（6）.innerHTML属性参阅 innerHTML一章节。
JavaScript 生成4位随机数，这样的场景在实际项目中还是用的比较多的，关于JavaScript 生成4位随机数就介绍到这了。
JavaScript 生成4位随机数属于前端实例代码，有关更多实例代码大家可以查看。