随机颜色的圆形

Original 2019-05-17 17:21:55 213
abstract:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>阴影随机色</title> <script src="../Jquery/jquery-3.4.1.min.js"></script> &

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>阴影随机色</title>

<script src="../Jquery/jquery-3.4.1.min.js"></script>

<style>

a {

width: 100px;

height: 30px;

line-height: 50px;

float: left;

border-radius: 50px;

display: block;

color: #FF7F50;

text-decoration: none;

margin: 50px;

}

</style>

<script>

function color(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).ready(function() {

color('a');

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

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

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

'0px'

'20px' + $bg)

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

})

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

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

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

'0px'

'20px' + $bg)

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

})

})

</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-05-17 17:40:35
Teacher's summary:document.getElementsByTagName(tag)[i].style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ','+Math.floor(Math.random() * 256) + ','+Math.floor(Math.random() * 256) + ')' 写这样长的代码, 不去创建变

Release Notes

Popular Entries