使用 HTML CSS 和 JavaScript 创建星级评分系统

短命女 2023-09-28 08:19 0阅读 0赞

各位读者好，今天在本博客中，您将学习如何使用 HTML CSS 和 JavaScript 创建星级评分系统 (Widget)。早些时候，我还分享了一篇关于[Star Rating Widget 的博客，仅使用 HTML 和 CSS。][Star Rating Widget _ HTML _ CSS]但是这个程序是先进的，并且比以前的 Star Rating System 具有更多的功能，因为我在这个程序中添加了 JavaScript 以使其更先进。

星级评分是一个评分问题，它为人们提供带有几颗星的产品或服务评分。星数可以从 5 到 10 星不等。星级评分问题是一种评分问题，它允许用户以星号而不是单选按钮或复选框对属性进行排名。

在这个程序（Star Rating System）中，最初只有五颗星，没有任何描述框。当您点击特定的星星时，评论文本（带有表情符号的文本）和描述框将可见。评论文本在图像中显示为“表情符号很棒”是一个动态文本，这意味着该文本将根据您的评分或评论而变化。

当您给出评分并写下一些描述并单击发布按钮时……评分系统容器将被隐藏，并且固定文本将显示为“感谢您对我们进行评分！” 使用右上角的编辑按钮。当您单击该编辑按钮时，它会将您重定向到之前的步骤，您可以在其中编辑您的评分和消息。

![8bee1dafef926adbb5e429440bba8635.png][]

正如您在视频中看到的星级评定系统。我希望你已经理解了创建这个程序背后的基本代码。混合了 HTML <input> 类型的 radio 和 <label> 标签来构建这个评级系统。您还看到了带有表情符号的动态评论文本，希望您喜欢它。

您可以在您的网站和项目中使用该系统。如果您是初学者并且了解 HTML 和 CSS，您也可以创建这种类型的评级系统。如果你喜欢这个程序（星级评定系统）并想获得源代码。您可以轻松获取该程序的源代码。要获取源代码，您只需向下滚动即可。

#### **你可能会喜欢这样：** ####

*  [纯 CSS 星级评分系统][Star Rating Widget _ HTML _ CSS]
 *  [随机密码生成器应用程序][Link 1]
 *  [电子邮件验证签入 JavaScript][JavaScript]

### **星级评分系统或小部件 \[源代码\]** ###

创建此程序（电子邮件验证检查）。首先，您需要创建两个文件，一个是 HTML 文件，另一个是 CSS 文件。首先，创建一个名为 index.html 的 HTML 文件，并将给定的代码粘贴到您的 HTML 文件中。请记住，您必须创建一个扩展名为 .html 的文件。

<!DOCTYPE html>
    <html lang="en" dir="ltr">
        <head>
            <meta charset="utf-8">
            <title>Star Rating Form | CodingNepal</title>
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
        </head>
        <body>
            <div class="container">
                <div class="post">
                    <div class="text">Thanks for rating us!</div>
                    <div class="edit">EDIT</div>
                </div>
                <div class="star-widget">
                    <input type="radio" name="rate" id="rate-5">
                    <label for="rate-5" class="fas fa-star"></label>
                    <input type="radio" name="rate" id="rate-4">
                    <label for="rate-4" class="fas fa-star"></label>
                    <input type="radio" name="rate" id="rate-3">
                    <label for="rate-3" class="fas fa-star"></label>
                    <input type="radio" name="rate" id="rate-2">
                    <label for="rate-2" class="fas fa-star"></label>
                    <input type="radio" name="rate" id="rate-1">
                    <label for="rate-1" class="fas fa-star"></label>
                    <form action="#">
                        <header></header>
                        <div class="textarea">
                            <textarea cols="30" placeholder="Describe your experience.."></textarea>
                        </div>
                        <div class="btn">
                            <button type="submit">Post</button>
                        </div>
                    </form>
                </div>
            </div>
            <script>
                const btn = document.querySelector("button");
                const post = document.querySelector(".post");
                const widget = document.querySelector(".star-widget");
                const editBtn = document.querySelector(".edit");
                btn.onclick = () => {
                    widget.style.display = "none";
                    post.style.display = "block";
                    editBtn.onclick = () => {
                        widget.style.display = "block";
                        post.style.display = "none";
                    }
                    return false;
                }
            </script>
    
        </body>
    </html>

其次，创建一个名为 style.css 的 CSS 文件，并将给定的代码粘贴到您的 CSS 文件中。请记住，您必须创建一个扩展名为 .css 的文件。

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }
    html,body{
        display: grid;
        height: 100%;
        place-items: center;
        text-align: center;
        background: #000;
    }
    .container{
        position: relative;
        width: 400px;
        background: #111;
        padding: 20px 30px;
        border: 1px solid #444;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .container .post{
        display: none;
    }
    .container .text{
        font-size: 25px;
        color: #666;
        font-weight: 500;
    }
    .container .edit{
        position: absolute;
        right: 10px;
        top: 5px;
        font-size: 16px;
        color: #666;
        font-weight: 500;
        cursor: pointer;
    }
    .container .edit:hover{
        text-decoration: underline;
    }
    .container .star-widget input{
        display: none;
    }
    .star-widget label{
        font-size: 40px;
        color: #444;
        padding: 10px;
        float: right;
        transition: all 0.2s ease;
    }
    input:not(:checked) ~ label:hover,
    input:not(:checked) ~ label:hover ~ label{
        color: #fd4;
    }
    input:checked ~ label{
        color: #fd4;
    }
    input#rate-5:checked ~ label{
        color: #fe7;
        text-shadow: 0 0 20px #952;
    }
    #rate-1:checked ~ form header:before{
        content: "I just hate it ";
    }
    #rate-2:checked ~ form header:before{
        content: "I don't like it ";
    }
    #rate-3:checked ~ form header:before{
        content: "It is awesome ";
    }
    #rate-4:checked ~ form header:before{
        content: "I just like it ";
    }
    #rate-5:checked ~ form header:before{
        content: "I just love it ";
    }
    .container form{
        display: none;
    }
    input:checked ~ form{
        display: block;
    }
    form header{
        width: 100%;
        font-size: 25px;
        color: #fe7;
        font-weight: 500;
        margin: 5px 0 20px 0;
        text-align: center;
        transition: all 0.2s ease;
    }
    form .textarea{
        height: 100px;
        width: 100%;
        overflow: hidden;
    }
    form .textarea textarea{
        height: 100%;
        width: 100%;
        outline: none;
        color: #eee;
        border: 1px solid #333;
        background: #222;
        padding: 10px;
        font-size: 17px;
        resize: none;
    }
    .textarea textarea:focus{
        border-color: #444;
    }
    form .btn{
        height: 45px;
        width: 100%;
        margin: 15px 0;
    }
    form .btn button{
        height: 100%;
        width: 100%;
        border: 1px solid #444;
        outline: none;
        background: #222;
        color: #999;
        font-size: 17px;
        font-weight: 500;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    form .btn button:hover{
        background: #1b1b1b;
    }

就是这样，现在您已经成功地在 HTML CSS 和 JavaScript 中创建了一个星级评分系统。如果您的代码不起作用或您遇到任何错误/问题，请发表评论或从联系页面与我们联系。

[Star Rating Widget _ HTML _ CSS]: https://www.codingnepalweb.com/2020/05/star-rating-widget-using-only-html-css.html
[8bee1dafef926adbb5e429440bba8635.png]: https://img-blog.csdnimg.cn/img_convert/8bee1dafef926adbb5e429440bba8635.png
[Link 1]: https://www.codingnepalweb.com/2020/06/random-password-generator-javascript.html
[JavaScript]: https://www.codingnepalweb.com/2020/05/email-validation-check-in-html-css-javascript.html