js五星评分。

先弄两张图片，

然后写个div把图片放到里面，

<div class="div-xx" style="z-index: 99;">
                    <span>如果喜欢的话可以评分诺！</span>
                    <button type="button" id="btn1" class="btn btn-primary"
                    ">提交评分</button>

                    <div style="background-image:url(../img/stark2.png); 27px;height:21px;float:left"
                         onmouseover="xx(1)" onmouseout="yc(0)" onclick="dj()" id="aa"></div>
                    <div style="background-image:url(../img/stark2.png); 27px;height:21px;float:left"
                         onmouseover="xx(2)" onmouseout="yc(1)" onclick="dj()" id="bb"></div>
                    <div style="background-image:url(../img/stark2.png); 27px;height:21px;float:left"
                         onmouseover="xx(3)" onmouseout="yc(2)" onclick="dj()" id="cc"></div>
                    <div style="background-image:url(../img/stark2.png); 27px;height:21px;float:left"
                         onmouseover="xx(4)" onmouseout="yc(3)" onclick="dj()" id="dd"></div>
                    <div style="background-image:url(../img/stark2.png); 27px;height:21px;float:left"
                         onmouseover="xx(5)" onmouseout="yc(4)" onclick="dj()" id="ee"></div>
                </div>

给每个图片加点击事件，然后写js代码

var count = 0;
    function xx(n) {
        if (n == 1) {
            document.getElementById("aa").style.backgroundImage = "url(../img/stars2.png)";
            count = n;

        }
        else if (n == 2) {
            document.getElementById("aa").style.backgroundImage = "url(../img/stars2.png)";
            document.getElementById("bb").style.backgroundImage = "url(../img/stars2.png)";
            count = n;

        }
        else if (n == 3) {

            document.getElementById("aa").style.backgroundImage = "url(../img/stars2.png)";
            document.getElementById("bb").style.backgroundImage = "url(../img/stars2.png)";

            document.getElementById("cc").style.backgroundImage = "url(../img/stars2.png)";
            count = n;

        }
        else if (n == 4) {
            document.getElementById("aa").style.backgroundImage = "url(../img/stars2.png)";
            document.getElementById("bb").style.backgroundImage = "url(../img/stars2.png)";
            document.getElementById("cc").style.backgroundImage = "url(../img/stars2.png)";
            document.getElementById("dd").style.backgroundImage = "url(../img/stars2.png)";
            count = n;
        }
        else if (n == 5) {
            document.getElementById("aa").style.backgroundImage = "url(../img/stars2.png)";
            document.getElementById("bb").style.backgroundImage = "url(../img/stars2.png)";
            document.getElementById("cc").style.backgroundImage = "url(../img/stars2.png)";
            document.getElementById("dd").style.backgroundImage = "url(../img/stars2.png)";
            document.getElementById("ee").style.backgroundImage = "url(../img/stars2.png)";
            count = n;
        }

    }
    function yc(n) {
        if (n == 0) {
            document.getElementById("aa").style.backgroundImage = "url(../img/stark2.png)";
            count = 0;
        }
        else if (n == 1) {
            document.getElementById("aa").style.backgroundImage = "url(../img/stark2.png)";
            document.getElementById("bb").style.backgroundImage = "url(../img/stark2.png)";
            count = 0;
        }
        else if (n == 2) {
            document.getElementById("aa").style.backgroundImage = "url(../img/stark2.png)";
            document.getElementById("bb").style.backgroundImage = "url(../img/stark2.png)";
            document.getElementById("cc").style.backgroundImage = "url(../img/stark2.png)";
            count = 0;
        }
        else if (n == 3) {
            document.getElementById("aa").style.backgroundImage = "url(../img/stark2.png)";
            document.getElementById("bb").style.backgroundImage = "url(../img/stark2.png)";
            document.getElementById("cc").style.backgroundImage = "url(../img/stark2.png)";
            document.getElementById("dd").style.backgroundImage = "url(../img/stark2.png)";
            count = 0;
        }
        else if (n == 4) {
            document.getElementById("aa").style.backgroundImage = "url(../img/stark2.png)";
            document.getElementById("bb").style.backgroundImage = "url(../img/stark2.png)";
            document.getElementById("cc").style.backgroundImage = "url(../img/stark2.png)";
            document.getElementById("dd").style.backgroundImage = "url(../img/stark2.png)";
            document.getElementById("ee").style.backgroundImage = "url(../img/stark2.png)";
            count = 0;
        }
    }
    function dj() {
        document.getElementById("aa").onmouseover = null;
        document.getElementById("bb").onmouseover = null;
        document.getElementById("cc").onmouseover = null;
        document.getElementById("dd").onmouseover = null;
        document.getElementById("ee").onmouseover = null;

        document.getElementById("aa").onmouseout = null;
        document.getElementById("bb").onmouseout = null;
        document.getElementById("cc").onmouseout = null;
        document.getElementById("dd").onmouseout = null;
        document.getElementById("ee").onmouseout = null;
    }

写完可以取n的值来加入数据库了。