用JavaScript制作五星好评

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

构建

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

阅读量629

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_44560342/article/details/86553691

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的五星评价系统，通过原生代码动态生成并控制星星的显示状态，实现用户交互式的好评反馈功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用JavaScript制作五星好评

开发工具与关键技术：JavaScript
作者：陈希雄
撰写时间：2019/1/19

大家好！我今天要给大家分享一个用JavaScript制作的五星好评，用JavaScript源生代码编写
源码：



@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ddsfg</title>
    <style>
        .a{
         color: rgb(210, 204, 204);
          width:10px;
          font-size:45px
        }
        .b{
            color: rgb(255, 216, 0);
             width: 10px; 
             font-size: 45px;
        }
    </style>
</head>
<body>
    <div style="width:46%;height:10%;display:inline-block;margin-top:20px;" id="test">
    </div>
    <script>
        //给div添加五颗星
        for (var i = 0; i < 5; i++)
        {
            var i1 = document.createElement("i");//创建i标签
            var i2 = document.createTextNode("☆");//创建文本节点
            i1.appendChild(i2);//把创建好的文本节点添加到里面i标签
            document.getElementById("test").appendChild(i1);// 给这个div添加元素
            document.getElementById("test").getElementsByTagName("i")[i].style = "font-size: 40px;";//给每一个i添加样式
        }
        var s = document.getElementById("test").getElementsByTagName("i");//获取所有的i标签
        //循环
        for (var i = 0; i < s.length; i++) {
            s[i].className = 'a';//给i标签添加类名
            s[i].tabIndex =""+i+""//添加索引值
            s[i].onclick = function () {//给i标签添加点击事件
                var tabIndex = this.tabIndex;//获取当前的索引值
                for (var j = 0; j < s.length; j++) {
                    if (j < tabIndex) {
                        s[j].className = 'b';
                    } else if (j == tabIndex) {
                        if (s[tabIndex].className == 'a') {
                            s[tabIndex].className = 'b';
                        }
                        else {
                            s[tabIndex].className = 'a';
                        }
                    } else {
                        s[j].className = 'a';
                    }
                }
                addyans(tabIndex, s.length);//s.length i标签的条数
            }
        }
    </script>
</body>
</html>

    </script>
</body>
</html>