abstrakt：<!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>隨機取色完善作業(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;
//這里通過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獲取需要改變顏色元素的個數(shù)
var l = document.getElementsByTagName(tag).length;
// 通過循環(huán)完成隨機變色的功能
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,實現(xiàn)對四個a鏈接的背景色進行隨機變色并通過text()修改a鏈接的內(nèi)容
$('button').click(function () {
change('a');
m = $('a').length
for (var i = 0; i < m; i++) {
// 修改a鏈接的內(nèi)容，這里遇到個問題，不知道如何引用i值來修改每個a鏈接中的文本內(nèi)容？還請老師指點一下！
$('a').text(Math.floor(Math.random() * 10))
}
})
// 通過mouseenter()實現(xiàn)改變a鏈接的形狀及陰影效果
$('a').mouseenter(function () {
$bgc = $(this).css('backgroundColor')
$(this).css('box-shadow', '0px 0px 25px ' + $bgc)
})
// 通過mouseleave()實現(xiàn)鼠標移出時恢復a鏈接的原始狀態(tài)
$('a').mouseleave(function () {
$(this).css('box-shadow', 'none')
})
})
</script>
</body>
</html>在本章學習中，遇到了個小問題，修改a鏈接的內(nèi)容，不知道如何引用i值來修改每個a鏈接中的文本內(nèi)容？還請老師指點一下！
// 通過點擊隨機變色Button,實現(xiàn)對四個a鏈接的背景色進行隨機變色并通過text()修改a鏈接的內(nèi)容
$('button').click(function () {
change('a');
m = $('a').length
for (var i = 0; i < m; i++) {
// 修改a鏈接的內(nèi)容，這里遇到個問題，不知道如何引用i值來修改每個a鏈接中的文本內(nèi)容？還請老師指點一下！
$('a').text(Math.floor(Math.random() * 10))
}
})
Korrigierender Lehrer：韋小寶Korrekturzeit：2019-02-14 09:11:24
Zusammenfassung des Lehrers：你這里直接來修改a標簽中的html值等于i不就可以了嘛？$('a').html(i)