摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>随机色</title> <script src="stat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机色</title>
<script src="static/jquery-3.3.1.min.js"></script>
<style>
div{
width:450px;
height:120px;
margin:100px auto;
}
a{
width:100px;
height:100px;
background:red;
border-radius:50px;
display:inline-block;
line-height:100px;
text-align:center;
color:white;
text-decoration:none;
}
</style>
</head>
<body>
<div>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<script>
function chageColor(ele) {
var getEleObj = document.getElementsByTagName(ele);
for(var i=0; i<getEleObj.length; i++){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
getEleObj[i].style.background = "rgb("+r+","+g+","+b+")";
getEleObj[i].innerHTML = r+","+g+","+b;
}
}
chageColor("a");
$(function(){
$("a").click(function(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
$(this).css("background","rgb("+r+","+g+","+b+")");
$(this).text(r+","+g+","+b);
});
})
</script>
</body>
</html>
批改老师:西门大官人批改时间:2019-04-02 11:21:29
老师总结:最好写一下实现原理:
计算机中的颜色是由rgb组成,r、g、b分别由0-255的整数组成。利用math生成r、g、b的随机值,可以组成随机的颜色