<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<!-- 使用的本地导入 须使用可从网上下载 https://www.iconfont.cn/ --> <link rel="stylesheet" href="./font_thzelovwv1/demo.css"> <link rel="stylesheet" href="./font_thzelovwv1/iconfont.css"> <style> .iconfont { font-family: "iconfont" !important; font-size: 50px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .red{ color: red; } </style></head><body> <div class="content"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> let count = 10 for (let i = 0; i < count; i++) { let icon = $("<span/>").addClass("iconfont icon-xingxing1") if (i < 5) { icon.addClass("red") } else { icon.removeClass("red") } $(".content").append(icon) } $(".content span").mouseenter(function () { for (let i = 0; i < count; i++) { if (i <= $(this).index()) { $(".content span").eq(i).addClass("red") } else { $(".content span").eq(i).removeClass("red") } } score = 5 }) $(".content span").mouseleave(function () { for (let i = 0; i < count; i++) { if (i < score) { $(".content span").eq(i).addClass("red") } else { $(".content span").eq(i).removeClass("red") } } }) $(".content span").click(function () { score = $(this).index()+1 }) </script></body></html>
