js简单的五角星评分

转载 2016年06月01日 11:12:21
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
            //首先要获取图片,相当于装到一个数组里面
            var star = document.getElementsByTagName("img");
            //读取数组的索引
            for(var i =0;i<star.length;i++){
                star[i].setAttribute("index",i+1);
                star[i].onclick=function(){
                    //读取元素的属性值


                    var result = event.srcElement.getAttribute("index");
                    document.getElementById("score").innerHTML= result;
                    var newindex = result-1;
                    for(var j =0;j<=newindex;j++){
                        star[j].setAttribute("src","images/1star.gif");
                    }
                    for(var j =newindex+1;j<star.length;j++){
                        star[j].setAttribute("src","images/2star.gif");
                    }
                }
            }
        }
    </script>
</head>
<body>
    <img src="images/2star.gif"/>
    <img src="images/2star.gif"/>
    <img src="images/2star.gif"/>
    <img src="images/2star.gif"/>
    <img src="images/2star.gif"/>
    <span id="score" style="color: red">0</span>分
</body>
</html>

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jQuery实现星星评分样式

效果图如下: 原理:当鼠标经过或点击时改变对应位置的图片想要实现这个插件首先需要了解jQuery的三个事件:mouseover(鼠标经过)、mouseout(鼠标离开)、click(鼠标点击)...

五角星动态评分效果

通过js实现详情页中五角星评分的动态效果,希望能帮到做动态评分效果的朋友~...

jQuery五角星评分

jQuery五角星评分

JS 实现简单星星评分功能

思路调用onmouseover将经过的星星和之前的设置成红色 之后的设置成黑色代码 document示例 ...

js星星图片评分代码(简单)

  • 2009年02月04日 15:48
  • 2KB
  • 下载

五角星评分

  • 2017年02月28日 14:04
  • 5KB
  • 下载

css sprite简便方法切 《评分五角星》

摘抄自我趣同伴的心得: 大家可以会遇到过要做满意度用星级来评分的情况,类似这种 实现的方法有很多,大家最初想到的可能是根据满意度有多少种情况就切多少种图,然后拼在一张图里面,通过控制图片的...
  • Smy_yu
  • Smy_yu
  • 2014年08月08日 16:54
  • 951

asp.net制作无刷新五角星评分工具

先列出.net的一些插件,插件是在网上搜集的,没有具体试过。     1:Democracy AJAX Poll。易于安装、管理、使用的投票插件。使用了Ajax技术来加载数据,使其使用起来速度快而有...

jquery实现动态五角星评分

实现思路:先获取点击的五角星,设当前点击的五角星为实心的,然后调用siblings()方法,设所有的同辈五角星都为实心的,最后再把他之后的所有兄弟(同辈)元素设为空心的,就这样,一个动态评分效果就出来...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js简单的五角星评分
举报原因:
原因补充:

(最多只允许输入30个字)