相思资源网 Design By www.200059.com

先来看看效果图

Javascript点击按钮随机改变数字与其颜色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>

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

标签:
js点击按钮生成随机数,js随机生成颜色,js随机生成数字

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“Javascript点击按钮随机改变数字与其颜色”

暂无Javascript点击按钮随机改变数字与其颜色的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。