随机颜色_底部有疑问

原创 2019-02-22 10:30:35 296
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script&g

<!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");

这样为什么不行?

})


批改老师:韦小宝批改时间:2019-02-22 10:54:14
老师总结:因为那个变量是在点击事件外部 每次点击 都会直接过去调用 你这样改写再看看 $('a').on('click',function(){ var c="rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+p

发布手记

热门词条