JS 实现简单星星评分功能

梦里梦外; 2022-09-24 05:27 246阅读 0赞

思路

调用onmouseover将经过的星星和之前的设置成红色 之后的设置成黑色

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>document示例</title>
  6. </head>
  7. <body onload="test()">
  8. <table id ="czy">
  9.     <tr>
  10.         <td>★</td><td>★</td><td>★</td><td>★</td><td>★</td>
  11.     </tr>
  12. </table>
  13. <input type="button" id="ok" value="打分">
  15. <script> tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].onmouseover=test; } var index; function test(){ for(var i=0;i<tds.length;i++){ if(tds[i]==this) { index=i; } } //选中的设置成红色 没选中的设置成黑色 for(var i=0;i<=index;i++) { tds[i].style.color = "red"; } for(var i=index+1;i<tds.length;i++){ tds[i].style.color="black"; } } document.getElementById("ok").onclick=function(){ alert("评分："+(index+1)+"分"); } </script>
  16. </body>
  17. </html>

效果图

这里写图片描述

发表评论

表情：
评论列表 （有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序实现星星评分效果

    思路很简单，小星星都是一张张独立的图片，点击的时候改变图片的路径就可以了。 我是用背景图片做的，先给盒子设置背景图片为灰色的小星星，盒子是根据js文件中的stars数组循环

    桃扇骨桃扇骨/ 0 赞/ 458 阅读