javascript實(shí)現(xiàn)五星評價代碼(源碼下載)
更新時間:2015年08月11日 09:03:19 作者:Z帥來襲
大家在淘寶購物之后,都會對賣家的服務(wù)進(jìn)行評論,那么五星評價代碼是怎么實(shí)現(xiàn)的呢?下面小編給大家介紹基于Javascript實(shí)現(xiàn)五星評價代碼,有需要的朋友可以參考下
廢話不多說,先上個效果圖:
javascript中的代碼
var spans=document.getElementsByTagName("span"); var flag=5;//這個值隨便取,只要不是01234就行 var Expand=function(){ //擴(kuò)展代碼,暫無 }; onload=function(){ //循環(huán)載入鼠標(biāo)移入事件 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="☆"; } }; } //循環(huán)載入鼠標(biāo)點(diǎn)擊星星事件 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();//這里是鼠標(biāo)點(diǎn)擊星星的擴(kuò)展,例如出現(xiàn)分值之類的,總之要擴(kuò)展什么隨你的大小便啦~ }; } //載入鼠標(biāo)離開div事件 document.getElementById("div").onmouseout=function(){ //如果tag是3,則循環(huán)給把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實(shí)現(xiàn)五星評價功能就完成了,還有其他方法,時間有限就不寫了,請持續(xù)關(guān)注本站,謝謝。!
相關(guān)文章
Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài))
這篇文章主要介紹了Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài)) 的相關(guān)資料,還給大家介紹了在Bootstrap框架中提供的機(jī)制驗(yàn)證效果,非常不錯,需要的朋友可以參考下2016-08-08koa2服務(wù)端使用jwt進(jìn)行鑒權(quán)及路由權(quán)限分發(fā)的流程分析
這篇文章主要介紹了koa2服務(wù)端使用jwt進(jìn)行鑒權(quán)及路由權(quán)限分發(fā) ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07關(guān)于javascript函數(shù)的幾個話題
關(guān)于javascript函數(shù)的幾個話題...2007-03-03JavaScript懶加載與預(yù)加載原理與實(shí)現(xiàn)詳解
這篇文章主要介紹了JavaScript懶加載與預(yù)加載,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09JavaScript+canvas實(shí)現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實(shí)現(xiàn)五子棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05