闪亮的评级输入

“闪亮的评级输入”这个表述可能指的是一个用户界面元素，用于接收用户对某事物的评级，并且这个元素在用户交互时会有视觉上的反馈，比如闪烁效果，以增强用户体验。以下是一个简单的示例，展示如何使用HTML、CSS和JavaScript来创建一个具有闪亮效果的评级输入：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>闪亮评级输入</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="rating-container">
  <span class="star" data-value="1">&#9733;</span>
  <span class="star" data-value="2">&#9733;</span>
  <span class="star" data-value="3">&#9733;</span>
  <span class="star" data-value="4">&#9733;</span>
  <span class="star" data-value="5">&#9733;</span>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.rating-container {
  font-size: 2em;
  cursor: pointer;
}

.star {
  color: grey;
  transition: color 0.2s;
}

.star.active {
  color: gold;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
  const stars = document.querySelectorAll('.star');

  stars.forEach(star => {
    star.addEventListener('click', function() {
      const value = this.getAttribute('data-value');
      highlightStars(value);
    });

    star.addEventListener('mouseover', function() {
      const value = this.getAttribute('data-value');
      highlightStars(value);
    });

    star.addEventListener('mouseout', function() {
      resetStars();
    });
  });

  function highlightStars(value) {
    stars.forEach(star => {
      if (star.getAttribute('data-value') <= value) {
        star.classList.add('active');
      } else {
        star.classList.remove('active');
      }
    });
  }

  function resetStars() {
    stars.forEach(star => {
      star.classList.remove('active');
    });
  }
});

在这个示例中，我们创建了一个包含五个星星的评级输入。当用户点击或悬停在星星上时，星星会变成金色并开始闪烁。点击后，星星会保持金色状态，直到用户再次点击其他星星或悬停在星星上。这个示例使用了CSS动画来实现闪烁效果，并通过JavaScript来处理用户的交互。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

闪亮的评级输入

HTML

CSS (styles.css)

JavaScript (script.js)

相关·内容

83 字符数组的输入

LabVIEW计算输入信号的直方图

跨平台、无隐私追踪的开源输入法Rime定制指南: 聪明的输入法懂我心意!

91 字符串的格式化输入输出

55 字符串的格式化输入输出

C语言 | 输入小于1000的数，输出平方根

DC电源模块宽电压输入和输出的问题

python开发视频课程2.6实战：将用户输入的字符转换为ascii

【编程小知识】为啥我输入的网址被改变了？讲讲重定向

golang教程 go语言基础 11 标准的输入与输出学习猿地

15-尚硅谷-Javascript-实战-删除指定行-控制键盘的输入

python开发视频课程2.7实战：根据用户输入的生日年份计算年龄段

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

闪亮的评级输入

HTML

CSS (styles.css)

JavaScript (script.js)

83 字符数组的输入

LabVIEW计算输入信号的直方图

跨平台、无隐私追踪的开源输入法Rime定制指南: 聪明的输入法懂我心意!

91 字符串的格式化输入输出

55 字符串的格式化输入输出

C语言 | 输入小于1000的数，输出平方根

DC电源模块宽电压输入和输出的问题

python开发视频课程2.6实战：将用户输入的字符转换为ascii

【编程小知识】为啥我输入的网址被改变了？讲讲重定向

golang教程 go语言基础 11 标准的输入与输出 学习猿地

15-尚硅谷-Javascript-实战-删除指定行-控制键盘的输入

python开发视频课程2.7实战：根据用户输入的生日年份计算年龄段

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

golang教程 go语言基础 11 标准的输入与输出学习猿地