关闭

DOM---点亮星

80人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function()
        {
            var objs = document.getElementsByTagName("img");//返回放入所有tagname为Img的数组
            for(var i=0;i<objs.length;i++)//加载页面的时候对每个成员的设置
            {
                objs[i].setAttribute("index",i+1);//设置index 表示你选了几颗星
                objs[i].onclick=function()//给每个数组成员(img)设置onclick响应
                {
                    for(var s=0;s<objs.length;s++)//点击过后变亮前 重置所有的星星 将其全部变暗
                    {
                        objs[s].setAttribute("src","images/2star.gif");


                    }


                    var sorce = event.srcElement.getAttribute("index");//获取点击的事件源的属性 点击的谁谁就是事件源


                    for(var j=0;j<=sorce-1;j++)//将点击的星及前面的星都变亮
                    {
                        objs[j].setAttribute("src","images/1star.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">
  <img src="images/2star.gif">
  <img src="images/2star.gif">
  <img src="images/2star.gif">
</body>
</html>
0
0

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