<!DOCTYPE html><html lang="en"><head>????<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">????<title>百度文庫評分</title>????<style>????????html,body,p {margin: 0;padding: 0; }????????p {border: 1px solid #eee;width: 400px;margin: 50px auto;text-align: center;padding: 10px 0;}????????#comment {color: gray;margin-left: 7px;}????????#rating {font-size: 0;}????????#rating a {margin: 0 1px;}????</style>????<script>????????window.onload = function () {????????????var oRating = document.getElementById('rating'), //獲取id為rating的span????????????????aA = oRating.getElementsByTagName('a'), //獲取span中的a????????????????oComment = document.getElementById('comment'), //獲取id為comment的span????????????????arrImg = ['img/nst.gif', 'img/nsg.gif', 'img/sth.gif', 'img/st.gif'], //獲取星星圖片數(shù)組????????????????lastArrImg = [], //獲取空數(shù)組????????????????lastComment = ' ', //獲取空字符????????????????num = 0;????????????function rating(index, imgSrc) { //index數(shù)量 imgSrc圖片????????????????for (var i = 0; i <= index; i++) {????????????????????aA[i].getElementsByTagName('img')[0].src = imgSrc; //每個i的第一個img????????????????}????????????????switch (index) {????????????????????case 0: //判斷index數(shù)字為0時顯示極差????????????????????????oComment.innerHTML = '極差';????????????????????????break;????????????????????case 1:????????????????????????oComment.innerHTML = '很差';????????????????????????break;????????????????????case 2:????????????????????????oComment.innerHTML = '還行';????????????????????????break;????????????????????case 3:????????????????????????oComment.innerHTML = '不錯';????????????????????????break;????????????????????case 4:????????????????????????oComment.innerHTML = '推薦';????????????????}????????????}????????????for (var i = 0; i < aA.length; i++) {????????????????aA[i].index = i;????????????????aA[i].onmouseover = function () {????????????????????num = this.index;????????????????????for (var i = 0; i < aA.length; i++) {????????????????????????lastArrImg[i] = aA[i].getElementsByTagName('img')[0].src;????????????????????}????????????????????rating(aA.length - 1, arrImg[0]);????????????????????if (num < 2) {????????????????????????rating(num, arrImg[1]);????????????????????} else {????????????????????????rating(num, arrImg[2]);????????????????????}????????????????}????????????????aA[i].onmouseout = function () {????????????????????for (var i = 0; i < aA.length; i++) {????????????????????????aA[i].getElementsByTagName('img')[0].src = lastArrImg[i];????????????????????}????????????????????oComment.innerHTML = lastComment;????????????????}????????????????aA[i].onclick = function () {????????????????????num = this.index;????????????????????rating(aA.length - 1, arrImg[0]);????????????????????if (num < 2) {????????????????????????rating(num, arrImg[1]);????????????????????} else {????????????????????????rating(num, arrImg[3]);????????????????????}????????????????????for (var i = 0; i < aA.length; i++) {????????????????????????lastArrImg[i] = aA[i].getElementsByTagName('img')[0].src;????????????????????}????????????????????lastComment = oComment.innerHTML;????????????????}????????????}????????}????</script></head><body>????<p>????????我的評價：????????<span id="rating">????????????<a href="javascript:"><img src="img/st.gif" alt=""></a>????????????<a href="javascript:"><img src="img/st.gif" alt=""></a>????????????<a href="javascript:"><img src="img/st.gif" alt=""></a>????????????<a href="javascript:"><img src="img/st.gif" alt=""></a>????????????<a href="javascript:"><img src="img/st.gif" alt=""></a>????????</span>????????<span id="comment">推薦</span>????</p></body></html>
這是個星級評分，搞不懂是怎么選中當(dāng)前和前面的星星的，求大佬講解下
慕的地6019524
2019-03-08 12:01:58
