JS 实现简单星星评分功能

最新推荐文章于 2024-03-06 20:14:13 发布

geekzsp

最新推荐文章于 2024-03-06 20:14:13 发布

阅读量8k

点赞数 4

分类专栏：前端文章标签： js 评分星星

本文链接：https://blog.csdn.net/mixi9760/article/details/52038816

版权

前端专栏收录该内容

25 篇文章 2 订阅

订阅专栏

思路

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

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document示例</title>
</head>
<body  onload="test()">
<table id ="czy">
    <tr>
        <td>★</td><td>★</td><td>★</td><td>★</td><td>★</td>
    </tr>
</table>
<input type="button" id="ok" value="打分">

<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>
</body>
</html>

效果图

这里写图片描述

geekzsp

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
JS 实现简单星星评分功能

思路调用onmouseover将经过的星星和之前的设置成红色之后的设置成黑色代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document示例</title></head><body onload="test()"><table id ="czy"> <tr>
复制链接

扫一扫