JS实现评价的星星功能

(编辑：jimmy 日期: 2025/11/6 浏览：3 次 )

刚开始接触写星星评价时，哇！估计脑子刚被驴踢了，竟然想到了最笨的办法-手工画五角星。妈呀！ css样式都写了好大一串，还沾沾自喜终于画出来了，然后瞅一瞅旁边的妹子写得怎么样了，哇！人家机智的！直接用符号★就解决了！！！唉，智商捉急呀！

先上图看看吧：

虽然简单，还是有几个注意的地方：

1. 未点击时的hover效果，星星会随鼠标移动亮起来喔。

2. 点击后关闭hover效果。

3. 点击同一颗星星，星星可以随时换色。

具体代码展示：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <style type="text/css">
    .stars{
      white-space: nowrap;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .stars li{
      display: inline-block;
      color: #ADADAD;
      font-size: 40px;
    }
  </style>
  <body>
    <ul class="stars">
      <li>★</li>
      <li>★</li>
      <li>★</li>
      <li>★</li>
      <li>★</li>
    </ul>
    <script src="/UploadFiles/2021-04-02/jquery-git.js">

总结
以上所述是小编给大家介绍的JS实现评价的星星功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

上一篇：JS数组操作之增删改查的简单实现
下一篇：详解A标签中href=""的几种用法