如何在静态网页中添加星级？

Question

我正在寻找一个五星级代码来添加到我的 HTML 文档中，它可以在服务器上正常运行，并且在静态方面对 SEO 没有负面影响。 我的意思是低于谷歌结果。图片旁白：

它的静态代码已经准备好了，我不知道如何执行它。 我将把静态代码放下。请将您的代码应用到它，并请告诉一些来源

希望我解释清楚。

div.stars {
  width: 270px;
  display: inline-block;
}

input.star { display: none; }

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked ~ label.star:before {
  content: '\2605';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
  content: '\2605';
}

<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star"/>
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

我的英文不是很好，可能是我没有解释清楚，所以如果你有任何问题，问

Answer 1

你是说这个吗？

window.addEventListener("load", function() {
  document.querySelector(".stars").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.tagName==="LABEL" && tgt.classList.contains("star")) {
      const star = tgt.getAttribute("for"); 
      console.log(star);
      // here you can ajax to the server
    }
  })
})

div.stars {
  width: 270px;
  display: inline-block;
}

input.star {
  display: none;
}

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked~label.star:before {
  content: '\2605';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked~label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked~label.star:before {
  color: #F62;
}

label.star:hover {
  transform: rotate(-15deg) scale(1.3);
}

label.star:before {
  content: '\2605';
}

<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star" />
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star" />
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star" checked />
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star" />
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star" />
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

Answer 2

您可以将 json 数据发布到服务器并保存评分。

$("input.star").click(function() {
      var value = $(this).attr("id");
      console.log("start ID : "+ value);
      
      var data={
        point: value
      };
      
       $.ajax({    
          type: 'POST',
          url: './rating',
          contentType: 'application/json; charset=utf-8',
          data: JSON.stringify({data}),
          dataType: 'json',
          success: function (response) {
            alert('succes!!');
          },
          error: function (error) {
            alert("errror");
          }
       });
    });