javaScript實現五星好評程式碼
阿新 • • 發佈：2019-02-09
效果如圖：
具體程式碼：
<!doctype html>
<html><head>
<title></title>
<script language="javascript" type="text/javascript">
function test(myvalue){
for(var i=1;i<=5;i++){//將所有都變白星星
document.getElementById(""+i).innerHTML="<h1>☆</h1>";
document.getElementById(""+i).setAttribute("style","color:black");
}
for(var i=1;i<=myvalue;i++){//通過傳入的id（也是一個數字）確定id以下的div都是橙色星星。
document.getElementById(""+i).innerHTML="<h1>★</h1>";
document.getElementById(""+i).setAttribute("style","color:orange");
}
}
</script>
<style type="text/css">
.myfloatleft{float:left;}
</style>
</head>
<body>
<div id="showdiv">
<div id="1" class="myfloatleft" onmouseover="test('1')" onmouseout="myclear()"><h1>☆</h1></div>
<div id="2" class="myfloatleft" onmouseover="test('2')" onmouseout="myclear()"><h1>☆</h1></div>
<div id="3" class="myfloatleft" onmouseover="test('3')" onmouseout="myclear()"><h1>☆</h1></div>
<div id="4" class="myfloatleft" onmouseover="test('4')" onmouseout="myclear()"><h1>☆</h1></div>
<div id="5" class="myfloatleft" onmouseover="test('5')" onmouseout="myclear()"><h1>☆</h1></div>
</div>
<div id="mydiv"></div>
<br><br><br>
<p>
<h1>說明:</h1>
1、製作五個“☆”，並且用div框起來。<br>
2、測試當滑鼠放在星星div上面時會不會產生反應（給div新增onmouseover事件）<br>
3、修改程式碼:當滑鼠放在星星的div上面時，當前的div內容修改為"★"。<br>
4、測試：讓所有div的星星都是白色的。
5、測試：通過傳入一個引數，讓指定id的div以下的div內容為"★"。
</p>
</body>
</html>