今天我又寫了個很酷的實例：星級評分系統（可自定義星星個數、顯示信息）
sufuStar.star();
使用默認值5個星星，默認信息
var msg = [........];
sufuStar.star(10,msg);
自定義星星個數為10、顯示信息msg格式參考默認值，條數必須和星星個數一致；
自己實現一些實例，有個好處，能增加應用各知識點的熟練度，還能檢驗出自己的薄弱項！一經發現，立即翻API文檔惡補！
不知道是不是我太笨，這個實例居然寫了整整一天！
不廢話了，先說下這個實例涉及的知識點：
1.用CSS的border來畫個三角形，並用before來把它加到其它元素上；
2.學習如何用CSS來定位元素；
3.學習事件的代理；
4.如何優化性能；
5.String對象的match方法的應用，正則表達式的應用；
6.注冊事件與事件處理，需要兼容IE的寫法；
7.學習如何利用‘||'給變量設置默認值；
8.簡化代碼：將可能要重復寫的代碼拿出來，單獨寫成一個函數；
下面是帶注釋的完整代碼，碰到不懂得就查文檔吧，以我目前的水平只能寫成這樣了，若有好的建議，歡迎前輩指出！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#star{
position: absolute;
left: 0;
right: 0;
top: 30px;
bottom: 0;
margin: auto;
width: 80%;
font-size: 12px;
}
#star-div{
margin:5px;
font-size: 0;
}
#star-div a{
display: inline-block;
width: 21px;
height: 21px;
background: url(http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat;
}
#star-div .on{
background: url(http://files.cnblogs.com/files/susufufu/star1.gif) no-repeat;
}
#star-info{
position: absolute;
top: 55px;
left: -30px;
display: none;
width: 155px;
height: 50px;
padding: 2px;
line-height: 17px;
border-radius: 8px;
background-color: gold;
z-index: 5;
}
#star-info:before{
content: '';
border-bottom: 10px solid gold;
border-left: 10px solid rgba(0,0,0,0);
border-right: 10px solid rgba(0,0,0,0);
position: absolute;
left: 35px;
top: -10px;
}
#star-span{line-height: 14px}
#star-info strong,#star-span strong{
color: red;
}
</style>
<script>
window.onload = function(){
var sufuStar = function (){
//工具函數
function gbyId(id){return document.getElementById(id);}
function addEvent(elem,type,func){ //兼容IE
if(elem.addEventListener){
elem.addEventListener(type,func,false)
}else if(elem.attachEvent){
elem.attachEvent('on'+type,func)
}
}
function getIndex(event) { //兼容IE
var e = event || window.event;
var t = e.target || e.srcElement;
if (t.tagName.toLowerCase() === 'a') {
return parseInt(t.innerHTML);
}
}
function showInfo(index,msg){
var info = gbyId('star-info');
info.style.display = 'block';
info.style.left = index*21-51+'px';
info.innerHTML = "<strong> "+index+'分 '+msg[index-1].match(/(.+)\|/)[1]+'<br />'+'</strong>'+msg[index-1].match(/\|(.+)/)[1];
}
function appenStar(elem,nums){
var frag = document.createDocumentFragment(); //為了提高性能,因使用DocumentFragment一次性append,這樣頁面只重新渲染一次
for(var i = 0;i<nums;i++){
var a =document.createElement('a');
a.innerHTML = i+1;
a.href = "javascript:;"; //阻止浏覽器的點擊鏈接的默認行為
frag.appendChild(a);
}
elem.appendChild(frag);
}
//主體函數
function star(num,myMsg){
var n = num||5; //當num有值則取其值,無值則取默認值5;
var clickStar=curentStar=0; //clickStar保存點擊狀態
var msg = myMsg||[
"很不滿意|差得太離譜，與賣家描述的嚴重不符，非常不滿",
"不滿意|部分有破損，與賣家描述的不符，不滿意",
"一般|質量一般，沒有賣家描述的那麼好",
"滿意|質量不錯，與賣家描述的基本一致，還是挺滿意的",
"非常滿意|質量非常好，與賣家描述的完全一致，非常滿意"
];
var starContainer = gbyId('star-div');
appenStar(starContainer,n);
addEvent(starContainer,'mouseover',over); //采用事件代理模式(通過<a>標簽的父元素starContainer來代理事件)
addEvent(starContainer,'mouseout',out);
addEvent(starContainer,'click',click);
function over(event){
if(getIndex(event)){ //若getIndex(event)取不到值,說明當前觸發事件的目標不是<a>標簽
var index = getIndex(event);
change(index);
showInfo(index,msg);
}
}
function out(event){
change(); //將評分設為已點擊狀態clickStar
gbyId('star-info').style.display = 'none'
}
function click(event) {
if (getIndex(event)) {
var index = getIndex(event);
clickStar = index; //保存點擊狀態
gbyId('star-info').style.display = 'none';
gbyId('star-span').innerHTML = "<strong>" + index + '分 ' + msg[index - 1].match(/(.+)\|/)[1] + '</strong>'+'<br />'+ msg[index - 1].match(/\|(.+)/)[1];
}
}
function change(index){
curentStar = index||clickStar;
for(var i=0;i<n;i++){
starContainer.children[i].className = i<curentStar ? 'on' : ''
}
}
}
return {
star:star
}
}(); //這裡的()表示函數立即執行,這樣變量sufuStar才能調用匿名函數的返回值star
//調用執行: sufuStar.star(num,myMsg),參數可為空,參數num,myMsg將設為默認值
sufuStar.star();
}
</script>
</head>
<body>
<div id="star">
<span>點擊星星打分:</span>
<div id="star-div">
</div>
<span id="star-span"></span>
<p id="star-info">
</p>
</div>
</body>
</html>
以上這篇原生JS實現-星級評分系統的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。