获取随机颜色

Original 2019-02-15 16:57:32 178
abstract:总结:真是少个空格,都会出问题。要细心一点。。代码:<!DOCTYPE html><html><head> <title>获取随机颜色</title> <style type="text/css"> a{ float:left; display:block; margin:50px; w

总结:

真是少个空格,都会出问题。要细心一点。。

代码:

<!DOCTYPE html>

<html>

<head>

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


<style type="text/css">

a{

float:left;

display:block;

margin:50px;

width:100px;

height:100px;

text-align: center;

line-height: 100px;

background-color:#ffe411;

text-decoration: none;

border-radius: 50px;

}

</style>

<script type="text/javascript" src="jq.js"></script>

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

aa('a');

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

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

$(this).css('box-shadow', '0px 0px 20px ' + $bg); //20px 后面有个空格,调试了半天。我的天。

$(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>

</body>

</html>


Release Notes

Popular Entries