abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> &
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<title>随机取色完善作业</title>
<style>
* {
padding: 0;
margin: 0;
}
a {
display: inline-block;
text-decoration: none;
color: #fff;
margin: 0 auto;
width: 120px;
height: 120px;
background-color: #444;
border-radius: 50%;
text-align: center;
line-height: 120px;
}
a:hover {
border-radius: 15px;
//这里通过transition给a链接的hover 加了个动画效果
transition: all .5s ease-in-out;
}
button {
margin: 20px 210px;
width: 200px;
height: 60px;
color: #fff;
background: rgb(22, 25, 212);
}
.digit {
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<div></div>
<button>随机变色</button><br />
<span></span>
</div>
</div>
<script>
function change(tag) {
// 通过js获取需要改变颜色元素的个数
var l = document.getElementsByTagName(tag).length;
// 通过循环完成随机变色的功能
for (var a = 0; a < l; a++) {
document.getElementsByTagName(tag)[a].style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')'
}
}
$(document).ready(function () {
// 页面加载时就先变色一次
change('a')
// 通过点击随机变色Button,实现对四个a链接的背景色进行随机变色并通过text()修改a链接的内容
$('button').click(function () {
change('a');
m = $('a').length
for (var i = 0; i < m; i++) {
// 修改a链接的内容，这里遇到个问题，不知道如何引用i值来修改每个a链接中的文本内容？还请老师指点一下！
$('a').text(Math.floor(Math.random() * 10))
}
})
// 通过mouseenter()实现改变a链接的形状及阴影效果
$('a').mouseenter(function () {
$bgc = $(this).css('backgroundColor')
$(this).css('box-shadow', '0px 0px 25px ' + $bgc)
})
// 通过mouseleave()实现鼠标移出时恢复a链接的原始状态
$('a').mouseleave(function () {
$(this).css('box-shadow', 'none')
})
})
</script>
</body>
</html>在本章学习中，遇到了个小问题，修改a链接的内容，不知道如何引用i值来修改每个a链接中的文本内容？还请老师指点一下！
// 通过点击随机变色Button,实现对四个a链接的背景色进行随机变色并通过text()修改a链接的内容
$('button').click(function () {
change('a');
m = $('a').length
for (var i = 0; i < m; i++) {
// 修改a链接的内容，这里遇到个问题，不知道如何引用i值来修改每个a链接中的文本内容？还请老师指点一下！
$('a').text(Math.floor(Math.random() * 10))
}
})
Correcting teacher：韦小宝Correction time：2019-02-14 09:11:24
Teacher's summary：你这里直接来修改a标签中的html值等于i不就可以了嘛？$('a').html(i)
