zoukankan      html  css  js  c++  java
  • 商品评分效果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 。若是链接失效请联系我,我会尽快处理。

     
  • 相关阅读:
    字符串里输出字符c的所有位置
    python时间戳
    python之set()和issubset()方法
    python之判断键是否存在于字典中
    python之方法与函数的区别,及其传参
    接口测试之requests
    python之isinstance()函数
    MySQL创建表时,被``和''坑了很久
    游标位置self.cur.scroll(0, mode='absolute')
    python操作MySQL数据库
  • 原文地址:https://www.cnblogs.com/linghaoxinpian/p/5406489.html
Copyright © 2011-2022 走看看