原生js五星评价

最新推荐文章于 2024-03-06 20:14:13 发布

了义

最新推荐文章于 2024-03-06 20:14:13 发布

阅读量558

点赞数

分类专栏： javascript 文章标签： javascript js 五星评价原生js

本文链接：https://blog.csdn.net/shijue98/article/details/52200782

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

五星评价代码,不多说了,直接上代码,第一次上传心情忐忑啊 …

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五星评价</title>
<style>
    *{margin:0;padding:0;}
    a{display: inline-block;padding:20px;font-size: 30px;cursor: pointer;}
    .colorComment{color:red;}
</style>
<script>
window.onload=function(){
    function commentFiv(id,tab) {
        var oComment=document.getElementById(id);
        var aA=oComment.getElementsByTagName(tab);
        var num=0;
        for(var i=0;i<aA.length; i++){
            aA[i].innerHTML="☆";
            aA[i].index=i;
            //浮到星星上时变颜色
            aA[i].onmouseover=function(){
                for(var j=0; j<aA.length; j++){
                    if(j<this.index+1){
                        aA[j].className="colorComment";
                        aA[j].innerHTML="★";
                    }
                    else{
                        aA[j].className="";
                        aA[j].innerHTML="☆";
                    }
                }
            };
            //浮出星星上时回到初始状态
            aA[i].onmouseout=function(){
                for(var j=0; j<aA.length; j++) {
                    if(num){
                        if(j<num){
                            aA[j].className="colorComment";
                            aA[j].innerHTML="★";
                        }
                        else{
                            aA[j].className="";
                            aA[j].innerHTML="☆";
                        }
                    }else{
                        aA[j].className="";
                        aA[j].innerHTML="☆";
                    }
                }
            };
            //点击确定
            aA[i].onclick=function () {
                for(var j=0; j<aA.length; j++){
                    if(j<this.index+1){
                        aA[j].className="colorComment";
                        aA[j].innerHTML="★";
                    }
                    else{
                        aA[j].className="";
                        aA[j].innerHTML="☆"
                    }
                }
                num = this.index+1
            }
        }
    }
    commentFiv("box","a")

};
</script>
</head>

<body>
<div id="box">
    <a></a><a></a><a></a><a></a><a></a>
</div>
</body>
</html>

了义

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js五星评价

代码,不多说了,直接上代码,第一次上传心情忐忑啊 …<!doctype html><html><head><meta charset="utf-8"><title>五星评价</title><style> *{margin:0;padding:0;} a{display: inline-block;padding:20px;font-size: 30px;cursor
复制链接

扫一扫