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

获取随机颜色

Kevin King2019-06-07 01:13:47211

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

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

<style type="text/css">

a{width: 100px;background: #333;display: block;float: left;margin: 20px;line-height: 100px;text-align: center;color: #FFF;text-decoration: none;border-radius: 50px;}

button{margin: 50px;}

</style>

<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)+')'

document.getElementsByTagName(tag)[i].text=Math.floor(Math.random()*100)

}

}

$(document).ready(function(){

aa('a');


$('button').click(function(){

aa('a')

})

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

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

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

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

})

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

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

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

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

})

})

</script>

</head>

<body>

<a href=""></a>

<a href=""></a>

<a href=""></a>

<a href=""></a>

<button>刷新</button>

</body>

</html>


最新手记推荐

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

全部回复(0)我要回复

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