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

    各位读者好，今天在本博客中，您将学习如何使用 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 的文件。

    1. <!DOCTYPE html>
    2. <html lang="en" dir="ltr">
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>Star Rating Form | CodingNepal</title>
    6.         <link rel="stylesheet" href="style.css">
    7.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    8.     </head>
    9.     <body>
    10.         <div class="container">
    11.             <div class="post">
    12.                 <div class="text">Thanks for rating us!</div>
    13.                 <div class="edit">EDIT</div>
    14.             </div>
    15.             <div class="star-widget">
    16.                 <input type="radio" name="rate" id="rate-5">
    17.                 <label for="rate-5" class="fas fa-star"></label>
    18.                 <input type="radio" name="rate" id="rate-4">
    19.                 <label for="rate-4" class="fas fa-star"></label>
    20.                 <input type="radio" name="rate" id="rate-3">
    21.                 <label for="rate-3" class="fas fa-star"></label>
    22.                 <input type="radio" name="rate" id="rate-2">
    23.                 <label for="rate-2" class="fas fa-star"></label>
    24.                 <input type="radio" name="rate" id="rate-1">
    25.                 <label for="rate-1" class="fas fa-star"></label>
    26.                 <form action="#">
    27.                     <header></header>
    28.                     <div class="textarea">
    29.                         <textarea cols="30" placeholder="Describe your experience.."></textarea>
    30.                     </div>
    31.                     <div class="btn">
    32.                         <button type="submit">Post</button>
    33.                     </div>
    34.                 </form>
    35.             </div>
    36.         </div>
    37.         <script>
    38.             const btn = document.querySelector("button");
    39.             const post = document.querySelector(".post");
    40.             const widget = document.querySelector(".star-widget");
    41.             const editBtn = document.querySelector(".edit");
    42.             btn.onclick = () => {
    43.                 widget.style.display = "none";
    44.                 post.style.display = "block";
    45.                 editBtn.onclick = () => {
    46.                     widget.style.display = "block";
    47.                     post.style.display = "none";
    48.                 }
    49.                 return false;
    50.             }
    51.         </script>
    52.  
    53.     </body>
    54. </html>

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

    1. @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
    2. *{
    3.     margin: 0;
    4.     padding: 0;
    5.     box-sizing: border-box;
    6.     font-family: 'Poppins', sans-serif;
    7. }
    8. html,body{
    9.     display: grid;
    10.     height: 100%;
    11.     place-items: center;
    12.     text-align: center;
    13.     background: #000;
    14. }
    15. .container{
    16.     position: relative;
    17.     width: 400px;
    18.     background: #111;
    19.     padding: 20px 30px;
    20.     border: 1px solid #444;
    21.     border-radius: 5px;
    22.     display: flex;
    23.     align-items: center;
    24.     justify-content: center;
    25.     flex-direction: column;
    26. }
    27. .container .post{
    28.     display: none;
    29. }
    30. .container .text{
    31.     font-size: 25px;
    32.     color: #666;
    33.     font-weight: 500;
    34. }
    35. .container .edit{
    36.     position: absolute;
    37.     right: 10px;
    38.     top: 5px;
    39.     font-size: 16px;
    40.     color: #666;
    41.     font-weight: 500;
    42.     cursor: pointer;
    43. }
    44. .container .edit:hover{
    45.     text-decoration: underline;
    46. }
    47. .container .star-widget input{
    48.     display: none;
    49. }
    50. .star-widget label{
    51.     font-size: 40px;
    52.     color: #444;
    53.     padding: 10px;
    54.     float: right;
    55.     transition: all 0.2s ease;
    56. }
    57. input:not(:checked) ~ label:hover,
    58. input:not(:checked) ~ label:hover ~ label{
    59.     color: #fd4;
    60. }
    61. input:checked ~ label{
    62.     color: #fd4;
    63. }
    64. input#rate-5:checked ~ label{
    65.     color: #fe7;
    66.     text-shadow: 0 0 20px #952;
    67. }
    68. #rate-1:checked ~ form header:before{
    69.     content: "I just hate it ";
    70. }
    71. #rate-2:checked ~ form header:before{
    72.     content: "I don't like it ";
    73. }
    74. #rate-3:checked ~ form header:before{
    75.     content: "It is awesome ";
    76. }
    77. #rate-4:checked ~ form header:before{
    78.     content: "I just like it ";
    79. }
    80. #rate-5:checked ~ form header:before{
    81.     content: "I just love it ";
    82. }
    83. .container form{
    84.     display: none;
    85. }
    86. input:checked ~ form{
    87.     display: block;
    88. }
    89. form header{
    90.     width: 100%;
    91.     font-size: 25px;
    92.     color: #fe7;
    93.     font-weight: 500;
    94.     margin: 5px 0 20px 0;
    95.     text-align: center;
    96.     transition: all 0.2s ease;
    97. }
    98. form .textarea{
    99.     height: 100px;
    100.     width: 100%;
    101.     overflow: hidden;
    102. }
    103. form .textarea textarea{
    104.     height: 100%;
    105.     width: 100%;
    106.     outline: none;
    107.     color: #eee;
    108.     border: 1px solid #333;
    109.     background: #222;
    110.     padding: 10px;
    111.     font-size: 17px;
    112.     resize: none;
    113. }
    114. .textarea textarea:focus{
    115.     border-color: #444;
    116. }
    117. form .btn{
    118.     height: 45px;
    119.     width: 100%;
    120.     margin: 15px 0;
    121. }
    122. form .btn button{
    123.     height: 100%;
    124.     width: 100%;
    125.     border: 1px solid #444;
    126.     outline: none;
    127.     background: #222;
    128.     color: #999;
    129.     font-size: 17px;
    130.     font-weight: 500;
    131.     text-transform: uppercase;
    132.     cursor: pointer;
    133.     transition: all 0.3s ease;
    134. }
    135. form .btn button:hover{
    136.     background: #1b1b1b;
    137. }

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

     

  • 相关阅读:
    笛卡尔树（Cartesian Tree）
    如何在三星手机上截屏?每一款三星手机的每一种方法，包括S23
    前后端都用得上的 Nginx 日常使用经验
    Kafka怎样完成建立和Broker之间的连接？
    猿创征文｜GaussDB（for openGauss）：基于 GaussDB 迁移、智能管理构建应用解决方案
    android —— 阴影效果和跑马灯效果Textview
    Python、机器学习和量化开发环境
    lvs项目
    问题排查利器：Linux 原生跟踪工具 Ftrace 必知必会
    前端面试题汇总个人笔记
  • 原文地址：https://blog.csdn.net/allway2/article/details/125012012