返回获取随机颜色j......登陆

获取随机颜色javascript代码

关超2019-04-18 12:56:27230

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="js/jquery-3.4.0.min.js" type="text/javascript"></script>

<style type="text/css">

a{ float:left;

display:block;

margin:100px;

width:50px;

line-height:40px;

text-align:center;

height:50px;

border-radius:50px;

text-decoration:none;



}

</style>

</head>


<body>

<script type="text/javascript">

function aa(tag){

var len = document.getElementsByTagName(tag).length;

for (var i = 0 ;i<len;i++){

document.getElementsByTagName(tag)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';

}

}



//放入javascript代码或者jQuery代码

$("document").ready(function() {

        aa("a");

$("a").mouseover(function(){

$bg = $(this).css("backgroundColor");

$(this).css("box-shadow","0px 0px 40px "+$bg);

$(this).css("border-radius","20px ");

});


$("a").mouseleave(function(){


$(this).css("box-shadow","none");

$(this).css("border-radius","50px ");

});



    });





</script>



<a href="#">1</a>

<a href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>


</body>

</html>


最新手记推荐

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

全部回复(0)我要回复

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