Javascript制作的评星打分系统

前不久用JQuery做了个评星打分的小东东，这次用javascript重写一遍。JQuery在浏览器事件兼容判断方面为我们做了很多底层工作，的确是大大的方便开发和减少的很多代码量。不过Javascript毕竟是最基本的东西，还是不能忘记噢。JQuery版的地址在这里，大家可以对比着看看。

演示效果如下：

• 1
• 2
• 3
• 4
• 5

 

Javascript代码：

 1// JavaScript Document
 2var descriptionTxt;    
 3var description = new Array("非常差，回去再练练","真的是差，都不忍心说你了","一般，还过得去吧","很好，是我想要的东西","太完美了，此物只得天上有，人间哪得几回闻!");
 4function stopDefault(e){
 5    if(e && e.preventDefault)
 6           e.preventDefault();
 7    else
 8           window.event.returnValue = false;
 9    return false;
};

var $ = function(id){
    return typeof id == "string"? document.getElementById(id):id;
}

function addEventHandler(oTarget, sEventType, fnHandler){
    if(oTarget.addEventHandler){
        oTarget.addEventListener(sEventType,fnHandler,false);
    }else if(oTarget.attachEvent){
        oTarget.attachEvent("on"+sEventType,fnHandler);
    }else{
        oTarget["on"+sEventType] = fnHandler;
    }
};

function changeStars(){
    var starSys = $("xzw_starBox");
    var stars = starSys.getElementsByTagName("a");
    if(stars){
        for(var i=0; i<stars.length; i++){
            var star = stars[i];
            addEventHandler(star,"mouseover",displayDes);
            addEventHandler(star,"mouseout",displayDes);
            addEventHandler(star,"click",showDes);
            addEventHandler(starSys,"mouseover",changZindex);
            addEventHandler(starSys,"mouseout",changZindex);
        }
    }
}

function changZindex(e){
    var e = e || window.event;
    if(e.type == 'mouseover'){
        $("xzw_star").style.zIndex = "3";
    }else if(e.type == 'mouseout'){
        $("xzw_star").style.zIndex = "1";
    }
}

function showDes(e){
    var stepW = 26;
    var e = e || window.event;
    var titleTxt = null;
    if(e.srcElement){
        titleTxt = e.srcElement.title;
    }else if(e.target){
        titleTxt = e.target.title;
    }
    descriptionTxt = description[titleTxt-1];
    $("description").innerHTML = descriptionTxt;
    $("showb").style.width = stepW * titleTxt + "px";
    return stopDefault(e);
    return descriptionTxt;
}

function displayDes(e){
    var e = e || window.event;
    var titleTxt = null;
    var descriptionTxtTemp = descriptionTxt;
    if(e.srcElement){
        titleTxt = e.srcElement.title
    }else if(e.target){
        titleTxt = e.target.title
    }
    var descriptionTxt2 = description[titleTxt-1];
    if(e.type == 'mouseover'){
        $("description").innerHTML = descriptionTxt2;
    }else if(e.type == 'mouseout'){
        if(descriptionTxtTemp != null){
            $("description").innerHTML = descriptionTxtTemp;
        }else{
            $("description").innerHTML = "";
        }
    }
    return stopDefault(e);
}
window.onload = changeStars;

HTML结构：

 1<div id="xzw_starSys">
 2    <div id="xzw_starBox">
 3        <ul class="star" id="xzw_star">
 4            <li><a href="#" title="1" class="one-star" hidefocus="true">1</a></li>
 5            <li><a href="#" title="2" class="two-stars" hidefocus="true">2</a></li>
 6            <li><a href="#" title="3" class="three-stars" hidefocus="true">3</a></li>
 7            <li><a href="#" title="4" class="four-stars" hidefocus="true">4</a></li>
 8            <li><a href="#" title="5" class="five-stars" hidefocus="true">5</a></li>
 9        </ul>
        <div class="current-rating" id="showb"></div>
    </div>
    <span id="description" class="description"></span>
</div>

CSS代码：

 1#xzw_starSys *{}{margin:0; padding:0}
 2#xzw_starSys ul, #xzw_starSys li {}{ list-style-type:none}
 3#xzw_starSys{}{height:20px; width:500px; border:1px solid #cecece; margin:10px auto; padding:5px; font-size:12px; line-height:22px; overflow:hidden}
 4#xzw_starBox{}{position:relative; width:130px; float:left; }
 5#xzw_starSys .description {}{float:left; margin-left:20px}
 6#xzw_starSys .star {}{ height:20px; width:130px; position:relative; background:url(images/star.gif) left -40px repeat-x; cursor:pointer}
 7#xzw_starSys .star li {}{ float:left; padding:0px; margin:0px}
 8#xzw_starSys .star li a {}{ display:block; width:26px; height:20px; overflow:hidden; text-indent:-9999px; position:absolute; z-index:5;  }
 9#xzw_starSys .star li a:hover {}{background:url(images/star.gif) 0 -20px ; z-index:3; left:0; top:0 }
#xzw_starSys .star li a:focus {}{outline:none}
#xzw_starSys .star a.one-star {}{left:0; }
#xzw_starSys .star a.one-star:hover {}{width:26px;}
#xzw_starSys .star a.two-stars {}{left:26px; }
#xzw_starSys .star a.two-stars:hover {}{width:52px;}
#xzw_starSys .star a.three-stars {}{left:52px; }
#xzw_starSys .star a.three-stars:hover {}{width:78px;}
#xzw_starSys .star a.four-stars {}{left:78px; }
#xzw_starSys .star a.four-stars:hover {}{width:104px;}
#xzw_starSys .star a.five-stars {}{left:104px; }
#xzw_starSys .star a.five-stars:hover {}{width:130px;}
#xzw_starSys .current-rating{}{ background: url(images/star.gif) left top; position: absolute; height: 20px; z-index: 1; top:0; left:0 }