javascript實(shí)現(xiàn)五星評(píng)價(jià)代碼(源碼下載)
廢話不多說(shuō),先上個(gè)效果圖:

javascript中的代碼
var spans=document.getElementsByTagName("span");
var flag=5;//這個(gè)值隨便取,只要不是01234就行
var Expand=function(){
//擴(kuò)展代碼,暫無(wú)
};
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)離開(kāi)div事件
document.getElementById("div").onmouseout=function(){
//如果tag是3,則循環(huán)給把0 1 2 3幾個(gè)星星整黃
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沒(méi)有值或者是初值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>
以上代碼很簡(jiǎn)單吧,javascript實(shí)現(xiàn)五星評(píng)價(jià)功能就完成了,還有其他方法,時(shí)間有限就不寫了,請(qǐng)持續(xù)關(guān)注本站,謝謝。!
- JS實(shí)現(xiàn)五星好評(píng)案例
- JS實(shí)現(xiàn)五星好評(píng)效果
- JavaScript實(shí)現(xiàn)商品評(píng)價(jià)五星好評(píng)
- 基于jquery實(shí)現(xiàn)五星好評(píng)
- jQuery實(shí)現(xiàn)的五星點(diǎn)評(píng)功能【案例】
- jQuery基于圖層模仿五星星評(píng)價(jià)功能的方法
- js實(shí)現(xiàn)五星評(píng)價(jià)功能
- javascript實(shí)現(xiàn)五星評(píng)分功能
- JS與JQuery分別實(shí)現(xiàn)淘寶五星好評(píng)特效
相關(guān)文章
Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài))
這篇文章主要介紹了Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài)) 的相關(guān)資料,還給大家介紹了在Bootstrap框架中提供的機(jī)制驗(yàn)證效果,非常不錯(cuò),需要的朋友可以參考下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ù)的幾個(gè)話題
關(guān)于javascript函數(shù)的幾個(gè)話題...2007-03-03
JavaScript懶加載與預(yù)加載原理與實(shí)現(xiàn)詳解
這篇文章主要介紹了JavaScript懶加載與預(yù)加載,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
JavaScript實(shí)現(xiàn)抽獎(jiǎng)器效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)抽獎(jiǎng)器效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
JavaScript+canvas實(shí)現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript+canvas實(shí)現(xiàn)五子棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05

