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>
以上就是这篇文章的全部内容，实现代码很简单，希望对大家能有一定的帮助，如果有问题可以留言交流，小编会尽快给大家回复的。
您可能感兴趣的文章:
相关文章
这篇文章介绍了js控制表单奇偶行样式的简单方法，有需呀偶的朋友可以参考一下2013-07-07
这篇文章主要介绍了JS实现页面超时后自动跳转到登陆页面,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了原生javascript制作的拼图游戏实现方法,结合实例形式详细分析了JavaScript制作拼图游戏的相关步骤、原理、实现方法及相关操作注意事项,需要的朋友可以参考下2020-02-02
AutoJS 是基于一个标准字典库的文本输入自动完成 JavaScript 库。Auto.js 是使用纯 JS 实现的，没有任务外部依赖，大小仅仅 6kb，本文给大家分享最新热门脚本Autojs源码，感兴趣的朋友一起看看吧2021-05-05
这篇文章主要介绍了js数组去重的5种算法实现，详细解释了实现思路，以及每个算法的优缺点，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了微信小程序条件、模板、文件引用,结合实例形式分析了微信小程序if条件判断、模板调用、wxss文件引用等相关操作技巧,需要的朋友可以参考下2020-06-06
这篇文章主要为大家详细介绍了JavaScript实现五子棋小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要为大家详细介绍了js仿京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
删除确认对话框的JS代码，有好几种写法，有简单的，有兼容好的，下面分别说几种方法，可根据自己需要选用2015-06-06
这篇文章主要为大家详细介绍了js实现无缝滚动双图切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
最新评论