关闭

js简单的五角星评分

648人阅读 评论(0) 收藏 举报
<!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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1092次
    • 积分:47
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条
    文章存档