廢話不多說,先上個效果圖:
查看演示 源碼下載
javascript中的代碼
var spans=document.getElementsByTagName("span"); var flag=5;//這個值隨便取,只要不是01234就行 var Expand=function(){ //擴展代碼,暫無 }; onload=function(){ //循環載入鼠標移入事件 for(var i=0;i<spans.length;i++){ spans[i].onmouseover=function(){ var id=parseInt(this.id); for(var i=0;i<=id;i++){ spans[i].innerHTML="★"; } for(var j=id+1;j<5;j++){ spans[j].innerHTML="☆"; } }; } //循環載入鼠標點擊星星事件 for(var i=0;i<spans.length;i++){ spans[i].onclick=function(){ var id=parseInt(this.id); flag=id; for(var i=0;i<=id;i++){ spans[i].innerHTML="★"; } Expand();//這裡是鼠標點擊星星的擴展,例如出現分值之類的,總之要擴展什麼隨你的大小便啦~ }; } //載入鼠標離開div事件 document.getElementById("div").onmouseout=function(){ //如果tag是3,則循環給把0 1 2 3幾個星星整黃 if(flag>=0 && flag<=4){ for(var i=0;i<=flag;i++){ spans[i].innerHTML="★"; } for(var j=flag+1;j<5;j++){ spans[j].innerHTML="☆"; } } //如果tag沒有值或者是初值5,則把所有的星星還原成空星星 else{ for(var i=0;i<spans.length;i++){ spans[i].innerHTML="☆"; } } }; };
body中的代碼
<div id="div"> <span id="0">☆</span><span id="1">☆</span><span id="2">☆</span><span id="3">☆</span><span id="4">☆</span> </div>
以上代碼很簡單吧,javascript實現五星評價功能就完成了,還有其他方法,時間有限就不寫了,請持續關注本站,謝謝。!