首页 > 编程语言 > 详细

商品评分效果JavaScript

时间:2016-04-19 06:16:21      阅读:272      评论:0      收藏:0      [点我收藏+]
<script>
    window.onload=function(){        
    //----------选中的星星会多出一个属性:isClick="true" 藉此来获取评分----------
    //获取所有 "星星" 集合
    var tds=document.getElementsByTagName("td");
    var startIndex=0;
    for(var i=0;i<tds.length;i++){
        //设置评分分数和索引
        for(var j=0;j<tds.length;j++){
            tds[j].setAttribute("score",j+1);          //代表的评分分数改这里(默认是1-5分)
            tds[j].setAttribute("index",j);
        }
        //设置onmouseover事件
        tds[i].onmouseover=function(){
            for(var j=0;j<tds.length;j++){
                tds[j].innerHTML="★";                  //样式改这里
                if(this==tds[j]){
                    break;
                }
            }
        };
        //设置onmouseout事件
        tds[i].onmouseout=function(){
            for(var j=startIndex+1;j<tds.length;j++){
                tds[j].innerHTML="☆";                //样式改这里
            }
        };
        //设置单击事件
        tds[i].onclick=function(){
            for(var j=0;j<tds.length;j++){
                tds[j].removeAttribute("isClicked");
            }
            this.setAttribute("isClicked","true");
            //记录选中星星索引
            startIndex=parseInt(this.getAttribute("index"));
        };
    }
    //-----------------------------------------------OVER---------------------------------------------
};
</script>

<table summary=‘评分‘>   
        <tr>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
        </tr>

代码不难就不解释了,可直接拿过去用。按照注释可以很快修改样式。  原定是这样的:技术分享

代码预览不会弄,提供源代码下载:网页评分代码下载 密码:u0v2 。若是链接失效请联系我,我会尽快处理。

商品评分效果JavaScript

原文:http://www.cnblogs.com/linghaoxinpian/p/5406489.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!