Chỉ vài bước đơn giản, bạn có thể tạo được một mẫu bình chọn mà hầu hết các các website trong và ngoài nước đều sử dụng.

Hệ thống bình chọn (Rating) đơn giản sử dụng jQuery

Xem demo Tải về

Bài viết này sử dụng Bootstrap 3.4 làm CSS Framework. Bạn cần thêm vào trước </head>.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

HTML

Mình sử dụng cấu trúc HTML có 10 sao như sau.

<div id="cate-rating" class="cate-rating">
	<div class="stars">
		<a id="star-1" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-2" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-3" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-4" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-5" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-6" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-7" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-8" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-9" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<a id="star-10" class="star"><span class="glyphicon glyphicon-star"></span></a>
		<p id="vote-desc">Mời bạn cho điểm!</p>
	</div>
	<div class="clearfix"></div>
</div>

CSS

CSS đơn giản như sau.

div.stars {}
 
a.star {
    font-size: 24px;
    color: #f0f1f4;
    cursor: pointer;
    line-height: 1;
    transition: all 0.1s ease;
}

a.star.vote-hover {
    color: #96e2fb;
}

a.star:active {
    color: #56CCF2;
}

a.star.vote-active {
    color: #0faef1;
}

.blue {
    color: #0faef1;
}

JavaScript

Các bạn nên sử dụng jQuery để tiện cho việc lập trình.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Thêm đoạn mã sau.

$(document).ready(function() {
    /*
     * Hiệu ứng khi rê chuột lên ngôi sao
     */
    $('a.star').mouseenter(function() {
        if ($('#cate-rating').hasClass('rating-ok') == false) {
            var eID = $(this).attr('id');
            eID = eID.split('-').splice(-1);
            $('a.star').removeClass('vote-active');
            for (var i = 1; i <= eID; i++) {
                $('#star-' + i).addClass('vote-hover');
            }
        }
    }).mouseleave(function() {
        if ($('#cate-rating').hasClass('rating-ok') == false) {
            $('a.star').removeClass('vote-hover');
        }
    });

    /*
     * Sự kiện khi cho điểm
     */
    $('a.star').click(function() {
        if ($('#cate-rating').hasClass('rating-ok') == false) {
            var eID = $(this).attr('id');
            eID = eID.split('-').splice(-1).toString();
            for (var i = 1; i <= eID; i++) {
                $('#star-' + i).addClass('vote-active');
            }
            $('p#vote-desc').html('<span class="blue">' + eID + ' (' + eID * 10 + '%)</span> &middot; ' + 1 + ' đánh giá');
            $('#cate-rating').addClass('rating-ok');
        }
    });
});

Nâng cao

Bạn có thể kết hợp với HTML5 Local StorageAJAX để phát triển hệ thống chấm điểm hoàn chỉnh. Ví dụ: https://www.ocumeo.com/truyen-tranh/tinh-ca/.

Tình Ca - Ổ Cú Mèo

Chúc các bạn thành công!