Javascript点击按钮随机改变数字与其颜色
2016-09-01 11:16
585 查看
先来看看效果图
实例代码
<!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>
以上就是这篇文章的全部内容,实现代码很简单,希望对大家能有一定的帮助,如果有问题可以留言交流,小编会尽快给大家回复的。
您可能感兴趣的文章:
相关文章推荐
- JAVASCRIPT通过点击按钮来改变字体颜色
- Android点击改变按钮颜色的3种效果
- 点击jQuery Mobile的按钮改变颜色
- 用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
- javascript 切换按钮改变div颜色
- 点击按钮时改变按钮上字体的颜色
- 利用分类(category)扩充UIImage,实现按钮点击改变背景颜色
- java代码====实现按钮点击改变颜色=======
- 点击按钮改变div的颜色
- 安卓中自定义点击按钮,点击可以改变颜色
- 点击按钮改变颜色和状态之二
- C#button之怎样点击按钮使之循环改变背景颜色
- 按钮点击改变文字颜色
- JSP彩色验证码,生成有4个随机数字和杂乱背景的图片,数字和背景颜色会改变,服务器端刷新
- js实现点击按钮后给Div图层设置随机背景颜色的方法
- 用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
- JavaScript 点击单选按钮改变输入框(文本域)的内容
- js实现点击按钮后给Div图层设置随机背景颜色的方法
- Android 点击按钮时改变颜色
- 1怎样让输入的text文本填写的部分只添加数字、2怎样将输入的数字一次性全部删除 3怎样选择密码 让它不显示 4 怎样实现在没有return的情况下点击button的情况下就能够使键盘页面下落5 怎样实现点击指定的button来对使指定的text进行键盘弹出 6怎样改变button按钮的状态