abstract：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery随机色</title> <style type="text/css"> * { margin: 0; padding: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery随机色</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
width: 70px;
height: 70px;
border-radius: 50px;
text-decoration: none;
float: left;
display: block;
text-align: center;
line-height: 70px;
margin: 50px;
color: #FFFFFF;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
function aa(tag) {
// 获取标签 tag 以及他的长度.lenght 存储到变量 len
var len = document.getElementsByTagName(tag).length
// 遍历标签名字
for(var i = 0; i < len; i++) {
// 遍历一次获取一次tag并添加下表 [i]
document.getElementsByTagName(tag)[i].style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')'
}
}
// Math.floor() 取整 Math.random()获取0-1的随机数
// 总结：定义函数 并给他一个参数tag还要获取tag的长度遍历tag的长度，每一次的遍历都要获取当前的下标并且修改他的倍经验色 通过随机数 并取整3次 获取rgb的3个值也就是组合起来的随机颜色jQuery调用aa加以参数a 把当前背景颜色存储于变量$bg中 然后修改当前css的阴影与bg相同最后鼠标离开时恢复正常css初始样式
$(document).ready(function() {
// 调用aa参数为a
aa('a')
$('a').mousemove(function() {
// 鼠标移动获取当前背景色
$bg = $(this).css('backgroundColor')
// 当前背景色 添加阴影
$(this).css('box-shadow','0px 0px 20px' + $bg)
// 修改当前圆角
$(this).css('border-radius', '10px')
})
// 鼠标离开 圆角 阴影恢复如初
$('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>
Correcting teacher：韦小宝Correction time：2018-11-28 18:10:52
Teacher's summary：嗯！写的很不错哦！很完整！不错课后多找点这种小案例来多练习练习哦！