AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
js点击按钮生成随机数,js随机生成颜色,js随机生成数字

先来看看效果图

实例代码

<!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随机生成数字  
上一篇:在web中js实现类似excel的表格控件  下一篇:AngularJs 指令详解及示例代码