返回随机颜色_底部......登陆

随机颜色_底部有疑问

红色熊猫2019-02-22 10:30:35206

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

这样为什么不行?

})


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送