javascript實(shí)現(xiàn)五星評價(jià)代碼(源碼下載)
更新時間:2015年08月11日 09:03:19 作者:Z帥來襲
大家在淘寶購物之后,都會對賣家的服務(wù)進(jìn)行評論,那么五星評價(jià)代碼是怎么實(shí)現(xiàn)的呢?下面小編給大家介紹基于Javascript實(shí)現(xiàn)五星評價(jià)代碼,有需要的朋友可以參考下
廢話不多說,先上個效果圖:

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)五星評價(jià)功能就完成了,還有其他方法,時間有限就不寫了,請持續(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-08
koa2服務(wù)端使用jwt進(jìn)行鑒權(quán)及路由權(quán)限分發(fā)的流程分析
這篇文章主要介紹了koa2服務(wù)端使用jwt進(jìn)行鑒權(quán)及路由權(quán)限分發(fā) ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
關(guān)于javascript函數(shù)的幾個話題
關(guān)于javascript函數(shù)的幾個話題...2007-03-03
JavaScript懶加載與預(yù)加載原理與實(shí)現(xiàn)詳解
這篇文章主要介紹了JavaScript懶加載與預(yù)加載,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
JavaScript+canvas實(shí)現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實(shí)現(xiàn)五子棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05

