【学艺不精系列】简单的 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()); } });
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步