Zobrazení zbývajícího času čtení

Výsledek

<title>Zobrazení zbývajícího času čtení</title>
<h1>Zobrazení zbývajícího času čtení</h1>

<div class="doba">
    <div id="podil"></div>
    <div class="zbyva">
        Zbývající doba čtení: <b id="doba"></b>
    </div>
</div>

<div class="obsah">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, dolorem soluta consequuntur vero quod maxime eveniet expedita velit voluptatibus architecto? Fuga, nemo molestiae provident impedit laborum voluptatibus ullam eveniet maxime.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, voluptatibus, quasi, beatae tenetur explicabo eos illum deleniti fugiat impedit ipsum eveniet incidunt earum fugit. Quisquam mollitia quaerat libero dignissimos consectetur?</p>
<p>Id, at, officia, rem, harum esse enim fuga asperiores a odit eos itaque voluptatem ea in laudantium aliquid. Quaerat, repellat, minus tempore necessitatibus aut fugiat molestias. Nulla veritatis ipsam non?</p>
<p>Incidunt, ad, aliquid, cupiditate, obcaecati provident doloremque libero aperiam quae ipsum quaerat neque odit unde quam itaque eius soluta earum perspiciatis illum consequuntur dolores nulla labore consequatur error deserunt id.</p>
<p>Enim, accusantium maxime cupiditate quasi impedit nam id eius repudiandae exercitationem omnis et laborum dolorum porro magni ab! Consequatur quod hic consequuntur rerum molestiae minima iure omnis velit natus a.</p>
<p>Modi, dolor repudiandae sunt nam tempore ipsum quam! Soluta, id quia repellat animi consequuntur sunt ut magni magnam sint at illum dolores quaerat fuga. Ducimus, consequuntur aspernatur placeat dolorem voluptates!</p>
<h2>Ratione, sit nihil id doloribus aut ducimus deleniti architecto dolorum suscipit. Cumque, mollitia, quo, pariatur reprehenderit possimus quos dolores dolorem voluptas cum voluptate fuga praesentium! Ratione earum nostrum facilis possimus.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, nobis, natus obcaecati minus assumenda tempore est quae sapiente mollitia laboriosam adipisci ipsum et fugit repellat aperiam dignissimos fuga amet eveniet.</p>
<p>At harum laboriosam eum ducimus blanditiis impedit voluptatum debitis sapiente perspiciatis tenetur. Adipisci, nemo, sit dignissimos natus in est voluptatum culpa blanditiis quod quaerat ex doloribus qui dolorem architecto et?</p>
<p>Magnam, sit, in, deserunt veniam aut voluptates ut pariatur laborum sint perferendis harum error placeat rerum maxime unde velit dicta vitae minus esse cum. Praesentium eveniet quas mollitia repellendus dolorum.</p>
<p>Sed, velit, veniam, mollitia delectus facilis neque ab accusantium deleniti in placeat a incidunt eum modi enim atque? Ipsa, provident consectetur perferendis iusto eligendi inventore blanditiis ipsum hic veniam esse.</p>
<p>Perferendis, ducimus laboriosam ex delectus sint quidem possimus officia aut tempore explicabo non nam a modi repellat distinctio blanditiis dignissimos eveniet sed quam ab ipsam reiciendis dolorum esse reprehenderit totam!</p>
<h2>Saepe, quisquam, architecto, dicta facilis praesentium porro iste corporis provident beatae quae nulla veritatis similique cum vel exercitationem itaque quod hic harum dolore non aliquid ratione vitae modi ea qui!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, aliquam, commodi voluptate tempora reiciendis officiis tempore accusantium dolorem ut ipsum recusandae velit. Laborum, earum ab reprehenderit aut dolor officia vel.</p>
<p>Libero, nulla, placeat pariatur magni in saepe rerum cupiditate nemo officia omnis! Molestias, maxime, odio, debitis, rem quos vitae praesentium ex dolorem aliquid saepe sequi culpa earum deserunt impedit distinctio!</p>
<p>Totam, in, pariatur quam tenetur est eaque consequuntur minima deserunt odio porro fuga maiores ut dolor. Tempore, eius, fuga repellendus omnis quam voluptas quaerat eveniet neque cupiditate odit dicta recusandae?</p>
<p>Placeat, mollitia, asperiores molestias iusto iure incidunt assumenda laudantium est voluptatem ipsam expedita nisi dicta necessitatibus repudiandae sapiente. Neque, deserunt, ab doloremque voluptatem veniam fuga at error quos. Impedit, iusto?</p>
<p>Ipsa, error, consequuntur cumque pariatur iure rerum dolores alias nisi ex delectus iste hic iusto perferendis! Blanditiis, nostrum quidem! Delectus ut quam quod voluptas vero nisi enim autem dicta veniam.</p>
<h2>Perspiciatis, itaque, tempore quam deleniti sunt totam repudiandae minima iste tempora quod error animi doloremque aliquam quibusdam nihil. Excepturi, nobis sapiente similique minima aut dolorum iure perspiciatis aspernatur numquam dignissimos!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, voluptas, fugiat eos alias quam rem quia reprehenderit cupiditate iste voluptatibus quisquam natus quasi est minima eaque laboriosam vero maxime dolorum!</p>
<p>Praesentium, consequatur autem veritatis. Earum, consequatur dolores veritatis atque repellendus animi necessitatibus nulla molestiae quod rerum accusamus commodi magnam ea cum ab quibusdam voluptatum. Aut, amet cupiditate possimus architecto quisquam!</p>
<p>Soluta, officia, quod, voluptas, aliquid nam iusto error aliquam aut perspiciatis perferendis sunt nihil unde dicta nesciunt in qui praesentium consequuntur excepturi debitis mollitia neque tempora delectus tempore. Perspiciatis, molestiae.</p>
<p>Ipsam, similique, consequatur enim molestiae aspernatur unde rem aperiam assumenda autem suscipit obcaecati recusandae rerum nulla vel eius magnam debitis dolor fugiat dicta accusantium soluta libero praesentium vero nobis quia!</p>
<p>Soluta, cum, rem, quis, totam praesentium iusto unde eligendi numquam aliquid maxime explicabo adipisci quas velit nam delectus. Nemo omnis ducimus beatae rerum laborum natus deserunt cupiditate tenetur ipsum minima.</p>
<h2>Recusandae, sapiente aliquid consequuntur facere praesentium ex deserunt incidunt ipsam minima ut vel veritatis autem non ipsum temporibus fugit quis enim commodi delectus aperiam assumenda esse tempora eveniet? Est, itaque.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, vitae, provident nulla repellat ex possimus pariatur consequatur tempora dolores maiores odit veniam quo culpa eaque illo rem deleniti architecto commodi.</p>
<p>Necessitatibus, id omnis perspiciatis sunt error architecto tempora dignissimos ea explicabo atque ipsum commodi sapiente tempore. Quos, minus, blanditiis reiciendis cupiditate repellat quo aut delectus illum est exercitationem possimus distinctio.</p>
<p>Numquam, suscipit, placeat quos reprehenderit eligendi ut repellat amet sed provident tempore itaque alias quaerat optio consequuntur distinctio ea modi atque possimus odio enim mollitia iusto perferendis et hic a.</p>
<p>Commodi, consectetur numquam saepe tenetur error culpa fuga necessitatibus voluptatibus esse vitae! Libero, ex, officia, id expedita beatae totam molestias quas inventore hic laboriosam harum consequuntur nostrum labore odio at.</p>
<p>A, perspiciatis, at doloremque magnam aliquid ratione debitis eos eaque dignissimos ullam dolores dolorem impedit excepturi aperiam distinctio dolore esse. Sapiente, consequatur pariatur assumenda soluta fuga ipsa sunt rem temporibus?</p>
<h2>Architecto, labore, repudiandae, ex, numquam excepturi iusto nostrum ratione ullam molestias mollitia neque est. Itaque, perspiciatis, blanditiis, officiis provident nisi quas soluta veniam explicabo id tenetur voluptate nesciunt dolore repellendus!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, expedita, vero sunt quam dolorum quo harum consectetur dolorem dicta sit eaque porro neque dignissimos? Sint officia dignissimos nemo numquam excepturi.</p>
<p>Perferendis, facere, excepturi, sed repellendus mollitia laudantium quo incidunt ipsa sint nostrum ex repudiandae iure at consequatur corporis dolor blanditiis unde aliquam sequi magni. Hic, magnam omnis nulla velit nisi.</p>
<p>Nesciunt, magnam, cum, sit sequi illum delectus vero maiores reprehenderit itaque autem natus eum laudantium et ipsa aliquid perferendis earum modi esse veniam non molestias aperiam expedita nisi suscipit repellat.</p>
<p>Adipisci, consectetur, quod explicabo aliquid aut sit aspernatur porro qui maiores laboriosam quaerat quibusdam odio laudantium id amet modi veritatis repellendus fuga voluptatibus sequi quidem rem magni rerum? Doloremque, unde!</p>
<p>Nemo, aspernatur, autem, ea voluptate accusamus sed veritatis quisquam adipisci porro eum laborum recusandae nostrum numquam dicta obcaecati nihil ad praesentium voluptas unde error voluptatem officia placeat esse sint quia.</p>
<h2>Iure, eius, nulla quae a ex cum quas quidem enim hic dolore odio quaerat velit nihil nam temporibus repellat reprehenderit accusamus laboriosam harum libero animi et dolorum natus aspernatur suscipit?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, unde, eligendi perspiciatis reiciendis molestiae magni placeat. Doloribus, explicabo alias voluptate quos commodi molestias! Sed, placeat repellendus blanditiis aliquam ullam at.</p>
<p>Quia, at, perspiciatis, repudiandae similique rerum pariatur ullam explicabo amet fuga quis doloribus ipsam perferendis rem placeat tenetur quae atque cupiditate dolor libero officia eius modi iusto inventore quidem nostrum.</p>
<p>Error, laudantium, tempora, est facere ab eaque maxime ad maiores omnis nobis quidem officia repellat illum itaque similique cupiditate vitae labore repellendus quia cum dolore ut ducimus illo atque sed?</p>
<p>Dicta, debitis, obcaecati, qui, nihil a ipsum inventore laborum dolore impedit aliquid adipisci placeat ducimus expedita pariatur odio. Eligendi eveniet unde minima porro a quisquam ab suscipit aut adipisci quod!</p>
<p>Deserunt, culpa consectetur cum quasi repudiandae voluptatibus. Ea, error, vel perspiciatis itaque enim animi soluta distinctio officiis modi porro sed sunt hic iure earum totam harum dolore eum eius aliquid.</p>
<h2>Soluta, tenetur, asperiores, fugit molestiae omnis laboriosam enim deserunt odit earum laudantium id illo eum sit. Eius, doloribus, consequuntur, voluptatibus perspiciatis libero deleniti voluptas itaque veniam esse architecto quaerat ipsum!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, quas, laudantium fugit soluta accusamus iste porro fuga tempore neque aspernatur voluptate praesentium voluptatum dolorem. Illum, sapiente illo mollitia reiciendis at!</p>
<p>Nobis, fugiat nulla nam ut saepe exercitationem tempora ipsa ducimus animi fuga voluptatibus impedit perspiciatis maxime quaerat repellendus. Fugiat omnis ipsam deleniti laudantium iste? Ipsa recusandae nostrum in odio quisquam!</p>
<p>Sint, maxime, perferendis impedit dolore iste rem fugit deleniti nesciunt quae vel iure placeat voluptatem in sunt ex voluptate rerum commodi dolores ea incidunt. Est quo sit eveniet dicta rem.</p>
<p>Enim, delectus, dignissimos, laboriosam explicabo aliquam quo amet provident quam deleniti ea beatae numquam rerum inventore doloribus dolore sapiente sed dolor porro et fugit a eos nobis. Possimus, ipsa, consequatur.</p>
<p>Ducimus, nihil reprehenderit suscipit nobis sit nulla mollitia repellendus perferendis eius error consectetur laborum impedit asperiores assumenda dolor sapiente alias dicta a ea delectus facilis vero voluptate aliquam numquam quidem!</p>
<h2>Accusamus, in, fugit, non id magni animi voluptas facere officia libero mollitia molestias labore impedit hic nesciunt consequatur deleniti dolore eum placeat consectetur natus dolorem obcaecati veritatis dicta odit architecto.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, officiis, aliquid omnis nostrum minus fuga facilis nemo alias officia doloremque voluptates consequuntur nisi quibusdam non ut iure at! Explicabo, ut.</p>
<p>Inventore, saepe, aliquam nobis nesciunt tenetur ducimus voluptatibus. Quae, blanditiis, molestiae modi minima velit deleniti similique odio natus vitae aliquam temporibus dolor magnam deserunt perferendis accusantium repudiandae ullam iste recusandae.</p>
<p>Fugit, earum, iste est voluptas doloribus neque obcaecati explicabo ducimus quam itaque quasi illum accusantium labore commodi odio voluptate aliquam? Laborum, facilis, ipsum dignissimos culpa iure minima odio. Quae, aliquam!</p>
<p>Deleniti doloremque repellendus dolor necessitatibus quis velit eos quaerat deserunt fuga nobis. Enim, nostrum, quod, similique quam tempore pariatur molestias atque amet eum quos accusamus quis repudiandae quidem suscipit numquam?</p>
<p>Ducimus, earum, ut incidunt possimus dolores impedit labore non cum quisquam quo obcaecati natus ad nam. Dolor, similique excepturi cumque laborum hic soluta molestiae officia illum aliquam ad praesentium dolores?</p>
<h2>Explicabo, voluptatum, illum, sint, accusamus cupiditate odio dolore mollitia optio perferendis adipisci quaerat distinctio tempora! Reiciendis, cumque, similique! Consequuntur, porro, asperiores expedita aut similique illum ipsa hic recusandae libero commodi.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nobis sapiente corporis est delectus magnam voluptate voluptatibus. Sint, officia natus voluptatem beatae a explicabo accusantium eaque aliquam. Iure, laborum, hic!</p>
<p>Ab, esse, delectus explicabo aliquid libero minus vitae ut deleniti nulla excepturi dignissimos est rem. Deleniti, nihil, dignissimos, eos cupiditate assumenda distinctio a pariatur eius sit ipsum error cum perspiciatis.</p>
<p>Similique dolore voluptatibus accusamus voluptatum unde obcaecati! Eligendi, saepe, illo repellendus atque error voluptate fuga inventore debitis ea at dolore excepturi culpa obcaecati voluptatum laborum harum doloribus ratione iste distinctio.</p>
<p>Odit, assumenda, quo, rerum, veritatis nihil quis vero quas ducimus at reiciendis illo obcaecati reprehenderit libero aliquid quam numquam maiores ipsum corporis provident ad dolorum quia voluptate repudiandae voluptatum hic?</p>
<p>In dicta delectus sint laborum sunt sed praesentium quae laudantium. Quidem, sint nesciunt fugit tempora quaerat distinctio totam ut. Repudiandae suscipit quis sequi nulla enim placeat numquam fugit nam amet!</p>    
</div>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

function inViewPort(el) {
  var coords = el.getBoundingClientRect();
  return (
    coords.top >= 0 && coords.left >= 0 && coords.top
  ) 
  <= (
    window.innerHeight || document.documentElement.clientHeight
  );
}

var RYCHLOST_CTENI = 200;
var slov = 0;

function pocetSlov(obsah) {
    var bezZancek = obsah.textContent || obsah.innerText || "";
    slov += bezZancek.match(/\b/g).length / 2;
    return slov;
}

function setPocetSlov(el, pocet) {
    el.setAttribute("data-slov", pocetSlov(el));
}

var prvky;
var pocetPrvku;
function spocitat(el) {
    prvky = (el || document.body).querySelectorAll("*");
    pocetPrvku = prvky.length;
    for (var i = 0; i < pocetPrvku; i++) {
        setPocetSlov(prvky[i]);
    }
}
spocitat(document.querySelector(".obsah"));

function inViewPort(el) {
  var coords = el.getBoundingClientRect();
  return (
    coords.top >= 0 && coords.left >= 0 && coords.top
  ) 
  <= (
    window.innerHeight || document.documentElement.clientHeight
  );
}

var rAF = window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.requestAnimationFrame || setTimeout;

function formatCisla(cislo) {
    return ("00" + parseInt(cislo)).slice(-2);
}

function formatCasu(minut) {
    return formatCisla(parseInt(minut)) + ":" + formatCisla(Math.floor((minut * 60) % 60));
}

var prepocet;
window.onscroll = function() {
    clearTimeout(prepocet);
    prepocet = setTimeout(prepocitat, 200);
};

prepocitat();

JS

Autoformát
jQuery
Umístění JS