<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
a{float: left;display: inline-block;width: 100px;height: 100px;border-radius: 50%;background-color: red;line-height: 100px;text-align: center;text-decoration: none;cursor: pointer;margin-right: 10px;color: black}
</style>
<script type="text/javascript">
$(function(){
var c="rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
$('a').each(function(){
$(this).css('background-color',"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")");
// $(this).css('background-color',"c");//此处不能是变量c 不然颜色一样
})
$('a').hover(
function(){
var co=$(this).css('background-color');//获取当前的元素的颜色
$(this).css({'backgroundColor':co,'box-shadow':'0px 0px 20px'+co,'border-radius':'20%'});
},
function(){
var co=$(this).css('background-color');
$(this).css({'backgroundColor':co,'box-shadow':'none'+co,'border-radius':'50%'});
})
$('a').on('click',function(){
$(this).html(parseInt(Math.random()*999));
$(this).css({'backgroundColor':"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"});
})
})
</script>
</head>
<body>
<div>
<a href="JavaScript:;">1</a>
<a href="JavaScript:;">2</a>
<a href="JavaScript:;">3</a>
</div>
</body>
</html>
疑问:
为什么文档就绪函数下面的
var c="rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
$('a').each(function(){
$(this).css('background-color',"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")");
上面的设置颜色为什么不能是预先定义的一个颜色,再设置呢 会是三个球球 颜色一样;不是应该是三种颜色的吗
比如: $(this).css('background-color',"c");
这样为什么不行?
})