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

最新推荐文章于 2024-05-04 07:32:37 发布

allway2

最新推荐文章于 2024-05-04 07:32:37 发布

阅读量2.5k

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/allway2/article/details/125012012

版权

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

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

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

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

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

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

你可能会喜欢这样：

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

创建此程序（电子邮件验证检查）。首先，您需要创建两个文件，一个是 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 中创建了一个星级评分系统。如果您的代码不起作用或您遇到任何错误/问题，请发表评论或从联系页面与我们联系。

allway2

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
使用 HTML CSS 和 JavaScript 创建星级评分系统

各位读者好，今天在本博客中，您将学习如何使用 HTML CSS 和 JavaScript 创建星级评分系统 (Widget)。早些时候，我还分享了一篇关于Star Rating Widget 的博客，仅使用 HTML 和 CSS。但是这个程序是先进的，并且比以前的 Star Rating System 具有更多的功能，因为我在这个程序中添加了 JavaScript 以使其更先进。星级评分是一个评分问题，它为人们提供带有几颗星的产品或服务评分。星数可以从 5 到 10 星不等。星级评分问题是一种评分问题，
复制链接

扫一扫