返回jquery获......登陆

jquery获取随机颜色

连界 现代 周伟2019-03-18 10:25:49235

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>获取随机色</title>

<script src="jquery-3.3.1.js"></script>

<style>

a {

float: left;

display: block;

margin: 50px;

width: 100px;

line-height: 100px;

text-align: center;

height: 100px;

color: #fff;

border-radius: 50px;

text-decoration: none;

background: pink;

}

</style>


<script>

//改变标签的背景颜色

function changeColor(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()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';


}

}


$(function(){

changeColor('a');

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

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

$(this).css('box-shadow','0px 0px 20px '+$bg);

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

})

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

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

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

})

})

</script>

</head>

<body>

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

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

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

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

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

</body>

</html>



最新手记推荐

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

全部回复(0)我要回复

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