Question

此代码读取存档txt y开始阅读http://spritzinc.com/我希望如此喜欢。提高注意力，完成度和流利程度。享受愉快，轻松的阅读体验。

您准备好在舒适的桌面浏览器上浏览整个互联网了吗？书签是一种软件，您可以与浏览器一起使用以与网页进行交互。我们创建了Spritzlet来帮助人们浏览他们访问的网站。点击这里获取Spritzlet。

`<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
</head>

<style type="text/css">
.spritz {
position: relative;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
padding: 2rem 0 1.2rem;

}

.spritz:before, .spritz:after {
content: "";
position: absolute;
left: 40%;
height: 0.2rem;
width: 10px;
margin-left: -1px;
background-color: #000;
}

.spritz-word {
font-size: 5rem;
line-height: 5rem;
height: 5.5rem;
font-weight: 600;
}

.spritz-word div {
display: table-cell;
}
.spritz-word div:first-child {
width: 40%;
text-align: right;
}
.spritz-word div:nth-child(2) {
color: #e60000;
}
.night .spritz-word div:nth-child(2) {
color: #ff4d4d;
}
.spritz-word div:last-child {
width: 60%;
text-align: left;
}
.row{
margin: 5rem auto;
justify-content: center;
display: flex;
}
</style>
<body> 
<h1 class="text-center">Ejemplo Lector Como Spritz</h1>
<div class="row">
 <div class="spritz col-md-3"> 
  <div class="spritz-word"></div>
 </div>
</div>
<div class="row">
 <div class="settings col-md-4">
  <input type="file" id="file-input" class="form-control" />
  <input class="form-control" id="spritz_wpm" type="number" 
  value="300"step="50" min="50"/>
  <button class="btn btn-danger pause" id="spritz_pause"><i class="glyphicon 
  glyphicon-play"></i></button>
  <button class="btn btn-danger pause" id="spritz_change"><i 
  class="glyphicon 
  glyphicon-refresh"></i></button>
  </div>
 </div>
</div>
<div class="container-fluid"><textarea class="demo-text form-control" 
id="contenido-archivo" rows="15">_</textarea></div>

</body>
</html>
<script src="sp.js"></script>
<script src="js/jquery.js"></script>

<script src="js/bootstrap.js"></script>


<script type="text/javascript">
$( document ).ready(function() {
spritz_pause();
});

function leerArchivo(e) {
var archivo = e.target.files[0];
if (!archivo) {
  return;
}
var lector = new FileReader();
lector.onload = function(e) {
  var contenido = e.target.result;
  mostrarContenido(contenido);
};
lector.readAsText(archivo);
}

function mostrarContenido(contenido) {
var elemento = document.getElementById('contenido-archivo');
elemento.innerHTML = contenido;
clearInterval(spritz);
words_set();
i = 0;
spritz_play();
}

document.getElementById('file-input')
.addEventListener('change', leerArchivo, false);


var wpm = $('#spritz_wpm').val();
var interval = 60000/wpm;
var paused = false;
var $space = $('.spritz-word');
var i = 1;

/* TEXT PARSING */
function words_set() {
words = $('.demo-text').val().trim()
.replace(/([-—])(\w)/g, '$1 $2')
.replace(/[\r\n]/g, ' {linebreak} ')
.replace(/\. /g, '. {period} ')
.replace(/[ \t]{2,}/g, ' ')
.split(' ');
 for (var j = 1; j < words.length; j++) {
  words[j] = words[j].replace(/{linebreak}|{period}/g, '   ');
 }
 }
 /* ON EACH WORD */
 function word_show(i) {
 var word = words[i];
 var stop = Math.round((word.length+1)*0.4)-1;
 $space.html('<div>'+word.slice(0,stop)+'</div><div>'+word[stop]+'</div>
 <div>'+word.slice(stop+1)+'</div>');
 }
 /* ITERATION FUNCTION */
 function word_update() {
 spritz = setInterval(function() {
  word_show(i);
  i++;
  if (i == words.length) {
    setTimeout(function() {
      $space.html('');
      spritz_pause();
    }, interval);
    clearInterval(spritz);
  };
 }, interval);
 }

 /* PAUSING FUNCTIONS */
 function spritz_pause() {
 clearInterval(spritz);
 paused = true;
 $('#spritz_pause').addClass('paused');
 }
 function spritz_play() {
 word_update();
 paused = false;
 $('#spritz_pause').removeClass('paused');
 }
 function spritz_flip() {
 if (paused) {
  spritz_play();
 } else {
  spritz_pause();
 }
 }

 /* INITIATE */
 words_set();
 word_show(0);
 word_update();

 /* CHANGE SPEED */
 $('#spritz_wpm').on('input', function() {
 interval = 60000/$('#spritz_wpm').val();
 if (!paused) {
  clearInterval(spritz);
  word_update();
 }
 });

 /* REFRESH TEXT */
 $('#spritz_change').on('click', function() {
 clearInterval(spritz);
 words_set();
 i = 0;
 spritz_play();
 });

 /* PAUSE BUTTON AND SPACE BAR */
 $('#spritz_pause').on('click', function() {
 spritz_flip();
 return false;
 });
 $(document).on('keyup', function(e) {
 if (e.keyCode == 32) {
  spritz_flip();
 }
 })


 /* LIGHT/DARK THEME */
 $('.light').on('click', function() {
 $('html').toggleClass('night');
 return false;
 });
 </script>`

Answer 1

你必须在技术上提交文件。

将其上传到临时文件夹
阅读文件，并将其预览到前端
如果客户确认，重新找到它（或将其上传到数据库），如果拒绝删除它。

我想分享一下使用spritz技术的这个例子。我希望它适用于某人

1 个答案: