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

时间：2021-05-26

先来看看效果图

实例代码

<!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>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章