【学艺不精系列】简单的 JavaScript 表示星级的页面控件脚本

效果图：

表单名称：Importance，类型为字符串，默认值 '☆☆☆☆☆'

使用方法：

引用此脚本，为容器设置id='selStar'，容器最好是span，放在页面需要的位置。

JavaScript脚本：

/// <reference path="jquery-1.4.1.js" />
/// <reference path="jquery-1.4.1-vsdoc.js" />

$().ready(function () {
    $("#selStar").css("cursor", "pointer");
    $("#selStar").html('<span id="star0">☆</span><span id="star1">☆</span><span id="star2">☆</span><span id="star3">☆</span><span id="star4">☆</span>'
        + '<input type="hidden" name="Importance" id="importance" value="☆☆☆☆☆" />');

    var s0 = 0; var s1 = 0; var s2 = 0; var s3 = 0; var s4 = 0;

    $("#star0").mouseover(function () { s0 = 1; fnStar(); });
    $("#star1").mouseover(function () { s1 = 1; fnStar(); });
    $("#star2").mouseover(function () { s2 = 1; fnStar(); });
    $("#star3").mouseover(function () { s3 = 1; fnStar(); });
    $("#star4").mouseover(function () { s4 = 1; fnStar(); });

    $("#star0").mouseout(function () { s0 = 0; fnStar(); });
    $("#star1").mouseout(function () { s1 = 0; fnStar(); });
    $("#star2").mouseout(function () { s2 = 0; fnStar(); });
    $("#star3").mouseout(function () { s3 = 0; fnStar(); });
    $("#star4").mouseout(function () { s4 = 0; fnStar(); });

    $("#star0").click(fnClick);
    $("#star1").click(fnClick);
    $("#star2").click(fnClick);
    $("#star3").click(fnClick);
    $("#star4").click(fnClick);

    function fnStar() {
        if (s0 + s1 + s2 + s3 + s4 == 0) {
            var s = $("#importance").val().split('');
            $("#star0").text(s[0]); $("#star1").text(s[1]); $("#star2").text(s[2]); $("#star3").text(s[3]); $("#star4").text(s[4]);
        } else {
            $("#star0").text("☆");
            $("#star1").text("☆");
            $("#star2").text("☆");
            $("#star3").text("☆");
            $("#star4").text("☆");
            if (s0 + s1 + s2 + s3 + s4 > 0) { $("#star0").text("★"); }
            if (s1 + s2 + s3 + s4 > 0) { $("#star1").text("★"); }
            if (s2 + s3 + s4 > 0) { $("#star2").text("★"); }
            if (s3 + s4 > 0) { $("#star3").text("★"); }
            if (s4 > 0) { $("#star4").text("★"); }
        }
    }

    function fnClick() {
        $("#importance").val($("#star0").text() + $("#star1").text() + $("#star2").text() + $("#star3").text() + $("#star4").text());
    }
});

 

转载于:https://www.cnblogs.com/i0air/archive/2012/06/12/2546652.html