jquery获取随机颜色

Original 2019-03-18 10:25:49 233
abstract:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!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>



Correcting teacher:灭绝师太Correction time:2019-03-18 16:49:35
Teacher's summary:总的来说完成的不错,但是按要求完成作业哦!

Release Notes

Popular Entries