Время прочтения статьи на jQuery

Время прочтения статьи на jQuery Верстка

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

Смотреть DEMO

Код и описание скрипта

(function($) {
    $.fn.readtime = function(options)
    {
        var defaults = {
            format:  '#',
            wrapper: 'time'
        };

        options = $.extend(defaults, options);

        return this.each(function()
        {
          
            var text = this.textContent || this.innerText || '';

            var words = text.replace(/(^\s*)|(\s*$)/gi, '')
                            .replace(/[ ]{2,}/gi, ' ').replace(/\n /, '\n')
                            .split(' ').length;

            var time = (words / options.wpm) * 60;

            if (options.images)
            {
                time += ($(this).find('img').length * options.images);
            }

            time = Math.round(time / 60);

            time = options.format.replace(/#/, time);

            var element = document.createElement(options.wrapper);


            function declOfNum(number, titles) {  
            cases = [2, 0, 1, 1, 1, 2];  
            return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];  
            }

            title=declOfNum(time,['минута','минуты','минут']);

            $('.time_read').html(time+' '+title);
        });
    };
}(jQuery));
$(".text_read").readtime({
	images: 7,
	wpm: 250
});

В данном скрипте реализовано склонение «минут» в зависимости от цифр и гибкая настройка (вы самостоятельно можете сами примерную скорость чтения в минуту – так будет формироваться общее время чтения статьи), также есть возможность включить картинки в общее время прочтения.

За настройки отвечают параметры (находятся в последних строках):

images — время в секундах, которое уходит на просмотр одного изображения;

wpm — среднее количество слов, которое человек читает в минуту.

Если на странице текст будет меньше среднего количества слов указанных в параметре wpm, то скрипт будет выводить время прочтения 0. Чтобы исправить это найдите в скрипте строчку: title=declOfNum(time,['минута','минуты','минут']); и над ней вставьте: if(time == 0) { var time = 1; }.

Установка скрипта на сайт

  1. Если сайт не использует библиотеку jQuery, то ее нужно подключить, следующей строкой:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    или
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  2. Создаем файл readtime.js — помещаем в него выше приведенный код, сохраняем и заливаем на сайт. Либо в конце статьи можно скачать архив с 2 файлами readtime.js и readtime.min.js — минифицированная версия загружаем один из файлов к себе на сайт и подключаем после подключения библиотеки jQuery.
    <script src="/путь к файлу/readtime.js"></script>
  3. В нужное место вставляем вывод времени прочтения:
    <strong>Время прочтения:</strong> <span class="time_read"></span>
  4. Ваш текст, или код, который его формирует, оберните в теги:
    <div class="text_read">Ваша статья</div>

Установка окончена!

Скачать скрипт
Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 1 оценка, среднее 5 из 5 )
Web-Revenue.ru