Javascript点击按钮随机改变数字与其颜色

 更新时间:2016年09月01日 11:16:39   投稿:daisy   我要评论
这篇文章主要介绍了Javascript点击按钮随机改变数字和其字体的颜色,实现后的效果很不错,具有一定的参考价值,有需要的可以参考借鉴,下面来一起看看。

先来看看效果图

实例代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <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>
</head>
<body>
<div id="box">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>
<input type="button" id="btn" value="我变了哟!"/>
<script>
  //提取标签
  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 i=0;i<span.length;i++){//生成四位数
      for(var j=0;j<6;j++){//随机改变每个数字的颜色
        color+=str.substr(parseInt(Math.random()*str.length),1);//取颜色(循环,每次提取一位,进行拼接组成6为颜色的值)
      }
      span[i].innerHTML=parseInt(Math.random()*10);//生成随机数
      span[i].style.color=("#"+color);//随机改变每个span的颜色
      color="";
    }
  }
</script>
</body>
</html>

以上就是这篇文章的全部内容,实现代码很简单,希望对大家能有一定的帮助,如果有问题可以留言交流,小编会尽快给大家回复的。

相关文章

最新评论