abstrait：<!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>隨機(jī)取色完善作業(yè)</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;
//這里通過(guò)transition給a鏈接的hover 加了個(gè)動(dòng)畫(huà)效果
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>隨機(jī)變色</button><br />
<span></span>
</div>
</div>
<script>
function change(tag) {
// 通過(guò)js獲取需要改變顏色元素的個(gè)數(shù)
var l = document.getElementsByTagName(tag).length;
// 通過(guò)循環(huán)完成隨機(jī)變色的功能
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 () {
// 頁(yè)面加載時(shí)就先變色一次
change('a')
// 通過(guò)點(diǎn)擊隨機(jī)變色Button,實(shí)現(xiàn)對(duì)四個(gè)a鏈接的背景色進(jìn)行隨機(jī)變色并通過(guò)text()修改a鏈接的內(nèi)容
$('button').click(function () {
change('a');
m = $('a').length
for (var i = 0; i < m; i++) {
// 修改a鏈接的內(nèi)容，這里遇到個(gè)問(wèn)題，不知道如何引用i值來(lái)修改每個(gè)a鏈接中的文本內(nèi)容？還請(qǐng)老師指點(diǎn)一下！
$('a').text(Math.floor(Math.random() * 10))
}
})
// 通過(guò)mouseenter()實(shí)現(xiàn)改變a鏈接的形狀及陰影效果
$('a').mouseenter(function () {
$bgc = $(this).css('backgroundColor')
$(this).css('box-shadow', '0px 0px 25px ' + $bgc)
})
// 通過(guò)mouseleave()實(shí)現(xiàn)鼠標(biāo)移出時(shí)恢復(fù)a鏈接的原始狀態(tài)
$('a').mouseleave(function () {
$(this).css('box-shadow', 'none')
})
})
</script>
</body>
</html>在本章學(xué)習(xí)中，遇到了個(gè)小問(wèn)題，修改a鏈接的內(nèi)容，不知道如何引用i值來(lái)修改每個(gè)a鏈接中的文本內(nèi)容？還請(qǐng)老師指點(diǎn)一下！
// 通過(guò)點(diǎn)擊隨機(jī)變色Button,實(shí)現(xiàn)對(duì)四個(gè)a鏈接的背景色進(jìn)行隨機(jī)變色并通過(guò)text()修改a鏈接的內(nèi)容
$('button').click(function () {
change('a');
m = $('a').length
for (var i = 0; i < m; i++) {
// 修改a鏈接的內(nèi)容，這里遇到個(gè)問(wèn)題，不知道如何引用i值來(lái)修改每個(gè)a鏈接中的文本內(nèi)容？還請(qǐng)老師指點(diǎn)一下！
$('a').text(Math.floor(Math.random() * 10))
}
})
Professeur correcteur：韋小寶Temps de correction：2019-02-14 09:11:24
Résumé du professeur：你這里直接來(lái)修改a標(biāo)簽中的html值等于i不就可以了嘛？$('a').html(i)