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位随机数属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容