Рейтинг для сайта как сделать
rusenergonsk.ru

Рейтинг для сайта как сделать


Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

UsefulScript.ruСкриптыРазныеРейтинг со звездочками

26

85

В процессе создания одного из сайтов появилась необходимость добавить рейтинг со звездочками или как его еще называют звездный рейтинг. После беглого изучения уже имеющихся скриптов рейтингов со звездочками было принято решение написать свой собственный скрипт без излишеств и как можно проще для быстрого его встраивания на любой сайт.


Наш скрипт звездного рейтинга так же как и другие подобные скрипты позволяет оценивать что угодно на сайте, но при этом наш скрипт позволяет это делать сразу по нескольким параметрам и высчитывать общую (среднюю) оценку.


Для демонстрации работы предлагаемого нами скрипта звездного рейтинга, сделанного при использовании jQuery, обратите внимание на рейтинг со звездочками, расположенный ниже:

Параметр 1:

5.0

Параметр 2:

5.0

Параметр 3:

5.0

Общая оценка:

5.00

При перемещении курсора мышки по звездочкам, они визуально показывают текущее значение рейтинга данного параметра в соответствии с текущим положением курсора мышки. Справа от звездочек показывается текущее значение рейтинга данного параметра.


При клике по звездочкам какого-либо параметра значение текущего параметра рейтинга будет зафиксировано. При повторном клике - значение рейтинга данного параметра вновь будет можно изменять. При клике по кнопке "Отправить!", произойдет передача общей оценки на сервер для ее сохранения и дальнейшей обработки.


Для реализации подобного звездного рейтинга на Вашем сайте, Вам потребуется подключение библиотеки jQuery. Сделать это можно следующим образом:

JavaScript код:

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

Далее Вам потребуется разместить код вывода на экран рейтинга со звездочками:

HTML код:

<div id="rating">
<div class="param">Параметр 1:</div>
<div><div class="stars"></div><p class="progress" id="p1"></p></div>
<div class="rating" id="param1">5.0</div>

<div class="param">Параметр 2:</div>
<div><div class="stars"></div><p class="progress" id="p2"></p></div>
<div class="rating" id="param2">5.0</div>

<div class="param">Параметр 3:</div>
<div><div class="stars"></div><p class="progress" id="p3"></p></div>
<div class="rating" id="param3">5.0</div>

<div class="param">Общая оценка:</div>
<div><div id="sum_stars"></div><p id="sum_progress"></p></div>
<div id="summ">5.00</div>

<input id="el_999" type="submit" value="Отправить!">
<p id="message"></p>
</div>

Обращаем Ваше внимание на то, что el_999 - уникальный идентификатор того, что мы будем оценивать! Для каждой темы (комментария или товара), данный идентификатор должен иметь свое цифровое значение, например, el_1 или el_123.


Далее в шапку сайта между тегами <head> и </head> для такого же отображения рейтинга Вам необходимо добавить следующие стили оформления:

HTML код:

<style type="text/css">
#rating {
    width: 320px;
    border-radius: 4px;
    box-shadow: 0 0 2px 1px #333333;
    margin: 10px auto;
    padding: 10px;
    text-align: center;
}
#rating div { float: left; }
#rating p { margin: 0; padding: 0; }
.param {
    width: 110px;
    margin: 0 20px 0 0;
    text-align: right;
}
.param, .rating, #summ { line-height: 28px; }
.stars, #sum_stars { background: url(image/stars.png); }
.stars, #sum_stars, .progress, #sum_progress {
    width: 130px;
    height: 28px;
    cursor: pointer;
}
.progress { background: #FFEE00; }
#sum_progress { background: #00EE00; }
.rating, #summ {
    margin: 0 0 0 20px;
    font-weight: bold;
}
</style>

В нашем примере в CSS стиле мы указали путь на изображение с пятью прозрачными звездочками, окруженных белым фоном.

Звездный рейтинг

Теперь остается добавить JavaScript код, который будет отвечать за заполнение звездочек, изменение рейтинга, вычисление суммы рейтинга и отправку общего рейтинга на сервер:

JavaScript код:

<script type="text/javascript">
$(document).ready(function(){
 function move(e, obj){
    var summ=0;
    var id = obj.next().attr('id').substr(1);
    var progress = e.pageX - obj.offset().left;
    var rating = progress  5 / $('.stars').width();
    $('#param'+id).text(rating.toFixed(1));
    obj.next().width(progress);
    $('.rating').each(function(){ summ += parseFloat($(this).text()); });
    summ = summ / $('.rating').length;
    $('#sum_progress').width(Math.round($('.stars').width()  summ / 5));
    $('#summ').text(summ.toFixed(2));
 }

 $('#rating .stars').click(function(e){
    $(this).toggleClass('fixed');
    move(e, $(this));
 });

 $('#rating .stars').on('mousemove', function(e){
    if ($(this).hasClass('fixed')==false) move(e, $(this));
 });

 $('#rating [type=submit]').click(function(){
    summ = parseFloat($('#summ').text());
    jQuery.post('change_rating.php', {
        obj_id: $(this).attr('id').substr(3),
        rating: summ
    }, notice);
 });

 function notice(text){
    $('#message').fadeOut(500, function(){ $(this).text(text); }).fadeIn(2000);
 }
});
</script>

Для хранения оценок, отправленных на сервер выше приведенным JavaScript кодом, Вам понадобится в MySQL создать таблицу votes:

Цитата:

CREATE TABLE IF NOT EXISTS `votes` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `date` int(10) unsigned NOT NULL,
  `id_product` int(10) unsigned NOT NULL,
  `ip` int(10) unsigned NOT NULL,
  `rating` float unsigned NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;

Для хранения рейтинга и количества проголосовавших, в MySQL в таблице, которая содержит то, что оценивается (будь то тема, комментарий или товар), добавьте два столбца: points с типом данных float и votes с типом данных int.


В нашем примере мы будем оценивать рейтинг темы и таблица будет называться themes.


Для обработки полученных результатов на сервере и занесения их в MySQL, создайте файл change_rating.php и добавьте в него следующий код:

PHP код:

<?php
if (is_numeric($_POST["obj_id"])) $obj=$_POST["obj_id"];
else $obj='';
if ($_POST["rating"]>=0 and $_POST["rating"]<=5) $ocenka=$_POST["rating"];
else $ocenka='';

if ($ocenka!='' and $obj>0) {
 $time=$_SERVER['REQUEST_TIME'];
 $ip=$_SERVER['REMOTE_ADDR'];
 $db=mysqli_connect("localhost","Логин","Пароль","Имя_БД") or die();
 $res=mysqli_query($db,"DELETE FROM votes WHERE date<".($time-604800));
 $res=mysqli_query($db,"SELECT count(id) FROM votes
    WHERE id_product=".$obj." and ip=INET_ATON('".$ip."')");
 $number=mysqli_fetch_array($res);
 if ($number[0]==0) {
    $res=mysqli_query($db,"INSERT INTO votes (date,id_product,ip,rating)
        values (".$time.",".$obj.",INET_ATON('".$ip."'),".$ocenka.")");
    $res=mysqli_query($db,"UPDATE themes
        SET points=(points+".$ocenka."),votes=(votes+1) WHERE id=".$obj." LIMIT 1");
    echo 'Спасибо, Ваш голос учтен!';
 }
 else echo 'Вы уже сегодня голосовали!';
}
?>

Данный скрипт звездного рейтинга довольно прост в установке и поможет Вам лучше узнать мнение Ваших посетителей об оцениваемых параметрах указанных Вами объектах.

SEO анализ сайтаРейтинг со звездочкамиКод формы обратной связи

jQueryоценить темурейтинг темыскрипт оценок

Закрыть

Ваше имя:

351 + 6 =


Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.


Источник: http://usefulscript.ru/rating_with_stars.php

Рейтинг для сайта как сделать фото



Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать

Рейтинг для сайта как сделать



Меню

Главная

Есть динамики как сделать колонку
Как парня сделать би
Цветок с листьями как у петрушки
Ремонт генератора своими руками мтз
Рождество флеш поздравления
Поздравления в тете в прозе
Как похудеть в домашних условиях быстро и легко за неделю на 5 кг
Как сделать перчатку когтя смерти
Платье 48 р
Как сделать свой тег в инстаграме