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

javascript中的代碼
var spans=document.getElementsByTagName("span");
var flag=5;//這個(gè)值隨便取,只要不是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幾個(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沒有值或者是初值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)五星評(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)文章
JavaScript內(nèi)置對(duì)象math,global功能與用法實(shí)例分析
這篇文章主要介紹了JavaScript內(nèi)置對(duì)象math,global功能與用法,結(jié)合實(shí)例形式分析了javascript中內(nèi)置對(duì)象math與global的基本概念、功能及使用方法,需要的朋友可以參考下2019-06-06
toString()一個(gè)會(huì)自動(dòng)調(diào)用的方法
toString方法的作用是不用多說的了,這個(gè)JavaScript內(nèi)置方法還有一個(gè)特性是:在執(zhí)行一些特殊方法的時(shí)候,比如alert或innerHTML等方法,它將由腳本解析器自動(dòng)調(diào)用。2010-02-02
js創(chuàng)建表單元素并使用submit進(jìn)行提交
這篇文章主要介紹了js創(chuàng)建表單元素并使用submit進(jìn)行提交,需要的朋友可以參考下2014-08-08
關(guān)于javascript模塊加載技術(shù)的一些思考
這篇文章主要介紹了關(guān)于javascript模塊加載技術(shù)的一些思考 ,需要的朋友可以參考下2014-11-11
JavaScript 定義function的三種方式小結(jié)
JavaScript中定義function有以下三種方式.2009-10-10
淺析創(chuàng)建javascript對(duì)象的方法
下面小編就為大家?guī)硪黄獪\析創(chuàng)建javascript對(duì)象的方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05

