API tools faq
paste
Guest User

Fast Text Reader

a guest
Mar 15th, 2014
400
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Fast Text Reader</title>
  5.         <style>
  6.             #text_input {
  7.                 border: 1px solid #CCCCCC;
  8.                 outline: none;
  9.                 width: 500px;
  10.                 height: 300px;
  11.                 padding: 5px;
  12.                 margin: 0px;
  13.                 overflow-y: scroll;
  14.                 color: #000000;
  15.                 background-color: #FFFFFF;
  16.                 font-family: Arial;
  17.                 font-size: 14px;
  18.                 resize: none;
  19.             }
  20.             #text_reader {
  21.                 border: 1px solid #CCCCCC;
  22.                 outline: none;
  23.                 width: 510px;
  24.                 height: 60px;
  25.                 padding: 0px;
  26.                 margin: 0px;
  27.                 overflow: none;
  28.                 color: #000000;
  29.                 background-color: #FFFFFF;
  30.                 font-family: Arial;
  31.                 font-size: 40px;
  32.                 text-align: center;
  33.                 line-height: 60px;
  34.                 resize: none;
  35.                 cursor: default;
  36.             }
  37.             #text_speed_show {
  38.                 font-family: Arial;
  39.                 font-size: 14px;
  40.             }
  41.         </style>
  42.         <script>
  43.             var data, it, interval, speed, cronometru;
  44.             document.addEventListener("readystatechange", function(e) {
  45.                 if (document.readyState == "complete") {
  46.                     data = new Array();
  47.                     document.querySelector("#text_start").addEventListener("click", function(e) {
  48.                         it = 0;
  49.                         speed = document.querySelector("#text_speed").value;
  50.                         if (interval == null) {
  51.                             document.querySelector("#text_start").disabled = true;
  52.                             document.querySelector("#text_speed").disabled = true;
  53.                             document.querySelector("#text_input").disabled = true;
  54.                             interval = setInterval(function() {
  55.                                 if (it < data.length)
  56.                                     document.querySelector("#text_reader").value = data[it++];
  57.                                 else {
  58.                                     clearInterval(interval);
  59.                                     interval = null;
  60.                                     document.querySelector("#text_start").disabled = false;
  61.                                     document.querySelector("#text_speed").disabled = false;
  62.                                     document.querySelector("#text_input").disabled = false;
  63.                                 }
  64.                             }, speed);
  65.                         }
  66.                     });
  67.                     document.querySelector("#text_input").addEventListener("input", function(e) {
  68.                         data = document.querySelector("#text_input").value.replace(/\s+/g, " ").split(" ");
  69.                         var info = document.querySelector("#text_speed");
  70.                         var time = new Date(data.length * info.value);
  71.                         document.querySelector("#text_speed_show").innerHTML = info.value + "ms delay, " + data.length + " tokens, time to read: " + time.getUTCHours() + "h " + time.getUTCMinutes() + "m " + time.getUTCSeconds() + "s";
  72.                     });
  73.                     document.querySelector("#text_speed").addEventListener("change", function(e) {
  74.                         var info = this;
  75.                         var time = new Date(data.length * info.value);
  76.                         document.querySelector("#text_speed_show").innerHTML = info.value + "ms delay, " + data.length + " tokens, time to read: " + time.getUTCHours() + "h " + time.getUTCMinutes() + "m " + time.getUTCSeconds() + "s";
  77.                     });
  78.                     document.querySelector("#crono").addEventListener("click", function(e) {
  79.                         if (cronometru) {
  80.                             var time = new Date(new Date() - cronometru);
  81.                             alert(time.getUTCHours() + "h " + time.getUTCMinutes() + "m " + time.getUTCSeconds() + "s");
  82.                             cronometru = null;
  83.                         }
  84.                         else
  85.                             cronometru = new Date();
  86.                     });
  87.                 }
  88.             });
  89.         </script>
  90.     </head>
  91.     <body>
  92.         <textarea id="text_input" value="" spellcheck="false"></textarea>
  93.         <br>
  94.         <textarea id="text_reader" disabled="true" spellcheck="false"></textarea>
  95.         <br>
  96.         <input id="text_speed" type="range" min="100" max="1000" value="500"></input>
  97.         <div id="text_speed_show">Set text speed</div>
  98.         <br>
  99.         <button id="text_start">Start reading</button>
  100.         <button id="crono">Start/Stop stopwatch</button>
  101.     </body>
  102. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!