商品评分效果JavaScript

<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 。若是链接失效请联系我,我会尽快处理。

时间: 2024-11-07 01:20:53

商品评分效果JavaScript的相关文章

[JavaScript] js 迅雷评分效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head>  

迅雷评分效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

css 实现评分效果

css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上稍有偏差. 我的理解:有人认为background-position  的位置移动中,这个属性相当于大图片不动,把div的顶点进行移动,移动到目标小图的顶点位置, 可参见:http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html

JS淘宝商品广告效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS淘宝商品广告效果</title> <style> ul{ margin: 0; padding: 0; } li{ list-style: none; } #ad{ width: 298px; height: 208px; border: 1

iOS星级评分效果实现

原文链接: iOS星级评分效果实现 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://github.com/MajorLMJ iOS开发者公会-技术1群 QQ群号:87440292 iOS开发者公会-技术2群 QQ群号:232702419 iOS开发者公会-议事区   QQ群号:413102158

jQuery滑动星星评分效果

每日分享效果,今天分享一个jQuery滑动星星评分效果. jQuery星星评分制作5颗星星鼠标滑过评分打分效果,可取消评分结果,重新打分. HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" h

ecshop搜索出现相关商品的效果滑动下拉效果

ecshop搜索栏效果如下 所需要的样式我们可以复制到style.css里: /*搜索滑动效果*/ .Menu { position:absolute; top:30px; left:7px; width:150px; height:auto; z-index:1; background:#FFF; border:1px solid #000; display:none; } .Menu2 { position: absolute; left:0; top:0; width:100%; heig

五角星评分效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript星级评分</ti

仿淘宝星级评分效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-