用JavaScript制作五星好评

男娘i 2022-03-25 08:09 289阅读 0赞

用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>