原生JavaScript Demo之星星评分

最新推荐文章于 2020-05-31 15:42:24 发布

小黄瓜要编程

最新推荐文章于 2020-05-31 15:42:24 发布

阅读量829

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/l1158513573/article/details/46992373

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原生JavaScript Demo之星星评分

（在Google下测试 ie可能不兼容其他未测试)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" language="JavaScript">
        window.οnlοad=function(){
			//通过标签名获取img数组
            var sImg=document.getElementsByTagName("img");         
            for(var i=0;i<sImg.length;i++){
                sImg[i].setAttribute("score",i+1);//给每个图片一个编号  编号就是分数
				//点击图片事件
                sImg[i].οnclick=function(){
                    obj=event.srcElement;//得到事件触发对象
                    var getscore=obj.getAttribute("score");//获取分数
                    document.getElementById("sp1").innerHTML="<font color='red'>"+getscore+"<font>";//输出数字分数
                    for(var j=0;j<=getscore-1;j++){
                        sImg[j].setAttribute("src","images/x2.jpg");//x2是实心的星星
                    }
                    for(var m=getscore;m<sImg.length;m++){
                        sImg[m].setAttribute("src","images/x1.jpg");//x1是空心的星星
                    }
                }
            }
        }
    </script>
</head>
<body>
<span>
    <img src="images/x1.jpg">
    <img src="images/x1.jpg">
    <img src="images/x1.jpg">
    <img src="images/x1.jpg">
    <img src="images/x1.jpg">
</span>
得分<span id="sp1"></span>
</body>
</html>

小黄瓜要编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript Demo之星星评分

原生JavaScript Demo之星星评分 window.onload=function(){ //通过标签名获取img数组 var sImg=document.getElementsByTagName("img"); for(var i=0;i<sImg.length;
复制链接

扫一扫