Init HTML

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 Storage và AJAX để 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/.

Tham khảo thêm:

• Tạo mục đánh giá bài viết đơn giản với KK Star Ratings

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