【JavaScript】实现五星评分控件

一个小例子,用JS实现五星评分控件。

代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #dv {
            font-size:50px;
            width:250px;
            background-color:yellow;
            cursor:pointer;
        }
    </style>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script>
        $(function () {
            // 为每一个span加一个属性,标记数字
            $("#dv span").each(function (k, v) {
                $(this).attr("jk", k);
            })
			// 当前current,表示当前点击选中的五角星
            var current; 
            $("#dv span").mouseover(function (e) {
                if (current) return; 
				// 如果current里面没有对象就是undefined,就是false
                // 如果有了对象,就是true
                $(this).text("★").prevAll().text("★").end().nextAll().text("☆");
            }).mouseout(function (e) {
                if (current) return;
                $(this).text("☆").siblings().text("☆");
            }).click(function (e) {
                if (current) return;
                current = this;
            });
            $("#btn").click(function () {
                alert($(current).attr("jk"));
            });
        });

    </script>
</head>
<body>
    <div id="dv"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
    <hr />
    <input type="button" name="name" value="点击获得选中第几颗星" id="btn"/>
</body>
</html>
效果:



猜你喜欢

转载自blog.csdn.net/sz15732624895/article/details/79439615