星星评分javascript版

JavaScript星星评分效果

最新推荐文章于 2025-09-07 22:29:54 发布

yuxiaoyu.

最新推荐文章于 2025-09-07 22:29:54 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/allentan/archive/2011/12/16/2289679.html

本文介绍了一个简单的JavaScript实现的星星评分效果。通过鼠标悬停在不同的星星上，可以改变星星的显示状态，从而模拟用户评分的过程。该代码适用于网页前端开发，帮助开发者快速实现基本的评分功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>星星评分javascript version</title>

    <script type="text/javascript">
        function bodyOnload() {
var tds = document.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
                td.style.cursor = "pointer";
                td.onmouseover = tdMouseOver;
                td.onmouseout = tdMouseOut;
            }
        }
        function tdMouseOver() {
var star = "★"
var tds = document.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
                td.innerHTML = star;
if (td == this) {
                    star = "☆";
                }
            }
        }
        function tdMouseOut() {
var star = "☆";
var tds = document.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
                td.innerHTML = star;
            }
        }
    </script>

</head>
<body onload="bodyOnload()">
    <table>
        <tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
    </table>
</body>
</html>