Home / Questions / 46823
Accepted
lromeraj
Asked: 2020-01-31 11:14:15 +0800 CST 2020-01-31 11:14:15 +0800 CST

制作自己正在编写的文本的效果

  • 772

我正在做的是一种让它看起来像自己写的文本的效果，我拥有的代码如下：

这是一个简单<body>的两个元素来查看示例（也在：jsfiddle）。

$("#write").click(function() {

  //Es un fragmento de texto extraido del periódico "El país"
  var text = "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas, las niñas eran violadas por padres, tíos y sobrinos. Por esto fue multado en 2011 con unos 700 euros.";

  var writer = "";
  writer.length = 0; //Limpiar el string
  var maxLength = text.length;
  var count = 0;
  var speed = 5000 / maxLength; //La velocidad varía dependiendo de la cantidad de caracteres

  var write = setInterval(function() {

    if (count > text.length) {
      clearInterval(write);
    }

    writer += text.charAt(count);
    document.getElementById("text").innerHTML = writer;
    count++;

  }, speed);

  $("#write").click(function() {
    clearInterval(write);
  }); //si se pulsa en el botón limpiar el intervalo

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="write" type="button">Write!</button>
<h1 id="text"></h1>

我的疑问是我不知道我是否使用了正确的方法来做到这一点。也就是说，我不清楚是使用循环更好for，还是使用setInterval（如示例中所示），以及代码是否可以简化得更多。

但是，当然，如果我使用，for我将不得不在其中添加一个setTimeout……这就是我正在考虑的问题。

javascript

4 Answers

  1. Best Answer

    根据您的代码。并使用setInterval(function(){ 

    function escribir(contenedor,writer,speed){

   longitud = writer.length;

   cnt = document.getElementById(contenedor);
   var i=0;
   tiempo = setInterval(function(){
      cnt.innerHTML = cnt.innerHTML.substr(0,cnt.innerHTML.length-1) + writer.charAt(i)+ " ";
      if(i >= longitud){
         clearInterval(tiempo);
         cnt.innerHTML = cnt.innerHTML.substr(0,longitud);
         return true;
      } else {
         i++;
      }},speed);
};

var texto =  "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas.";
$("#write").click(function() {
escribir("text",texto,100);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button id="write" type="button">Write!</button>
        <h1 id="text"></h1>
</body>

    • 23

  2. 有setInterval就好。我给你一个使用setInterval和Generadores来自 ES6 的例子。我使用生成器从给定的文本中逐行生成，原谅冗余。

    function temporizator() {
  const write = function() {
    let letters = letterGenerator();
    window.setInterval(function() {
      let next = letters.next();
      if (!next.done) {
        let letter = next.value;
        let content = document.querySelector('#code').textContent;
        if (letter === 'new line') {
          document.querySelector('#code').textContent = content + '\n';
        } else {
          document.querySelector('#code').textContent = content + letter;
        }
        highlight();
      }
    }, 70);
  }

  const highlight = function() {
    hljs.initHighlighting.called = false;
    hljs.initHighlighting();
  }

  const letterGenerator = function*() {
    const lines = temporizator.toString().split(/\n/);
    for (let line of lines) {
      for (letter of line) {
        yield letter;
      }
      yield 'new line';
    }
  }
  
  return {
    start: write
  }
}

temporizator().start();
    @import url('https://fonts.googleapis.com/css?family=Lato:400,700|Source+Code+Pro:400,600,700');


*,
*:before,
*:after {
  box-sizing: border-box;
}

#editor {
  border: 2px solid #ddd;
  border-radius: 5px;
  box-shadow: 2px 5px 25px 1px rgba(0,0,0,.15);
  display: block;
  margin: 50px auto;
  max-width: 530px;
  width: 88%;
}

#editor header {
  background: -webkit-linear-gradient(top, #f7f7f7, #f2f2f2);
  background: linear-gradient(to bottom, #f7f7f7, #f2f2f2);
  border-bottom: 1px solid #e9e9e9;
  padding: 5px;
  padding: .35rem;
  position: relative;
  text-align: center;
}

#editor header h3 {
  color: #333;
  font-family: 'lato';
  font-size: 15px;
  margin: 0;
}

#editor header #buttons {
  display: inline-block;
  left: 10px;
  line-height: 10px;
  position: absolute;
  top: 9px;
}

#editor header #buttons hr {
  border: none;
  border-radius: 100%;
  cursor: pointer;
  display: inline-block;
  height: 15px;
  margin: 0 4px;
  width: 15px;
}

#editor header #buttons hr.red {
  background-color: #e74c3c;
}

#editor header #buttons hr.yellow {
  background-color: #f39c12;
}

#editor header #buttons hr.green {
  background-color: #27ae60;
}

#editor pre {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

#editor pre #code {
  display: block;
  font-family: 'source code pro';
  font-size: 15px;
  margin-top: -1.2em;
  margin-bottom: -2.4em;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  padding: .65rem;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
 
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 3px;
}
 
::-webkit-scrollbar-thumb {
  background-color: #ccc;
    border-radius: 25px;
    
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/atom-one-light.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/languages/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>

<div id="editor">
  <header>
    <h3>Temporizator.js</h3>
    <section id="buttons">
      <hr class="red" />
      <hr class="yellow" />
      <hr class="green" />
    </section>
  </header>
  <pre>
    <code id="code" class="javascript"></code>
  </pre>
</div>

    注意：代码只能在支持Generators.

    • 15

  3. 版

    由于我已经改进了此答案的代码和功能供我个人使用，因此我将其与社区分享：

    const ACTION_ADD = 'ACTION_ADD';
const ACTION_REPLACE = 'ACTION_REPLACE';

class AsyncWritter {
    textContentArr;
    numTicks = 3;
    isInfiniteLoop = true;

    constructor(selector, messages){
      let element = document.querySelector(selector);
      
      this.textContentArr = messages;

      Rx.Observable.concat(
        ...this.textContentArr.map( (x) => 
          this.write(x).finally( ()=> element.textContent = '')
        )
      )
      .repeat( this.isInfiniteLoop ? null : 1)
      .subscribe(
        (val) => {
          //console.log(val)
          switch(val.action){
            case ACTION_ADD : element.textContent += val.value; break;
            case ACTION_REPLACE : element.textContent = element.textContent.slice(0, element.textContent.length - 1); break;
          }
        }
      )
    }

    write(text){
      return Rx.Observable
        .concat(
          ...Array
            .from(text).map( (val) =>{

              let { 
                  action = ACTION_ADD
                , value = val
              } = val;

              let obs = (action === ACTION_ADD 
                ? this.add(value) : this.replace() )

              return Rx.Observable
                .concat( obs, this.add('|'), this.replace() )
            }), 
          this.tick().repeat(this.numTicks),
          this.replaceWithTick().repeat(text.length)
        )
    }

    randomDelay(bottom, top) {
      return Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom;
    }

    tick(start = 1200, end = 1200){
      return Rx.Observable.concat(
        this.add('|'),
        this.replace(start, end)
      )
    }

    add(value, start = 10, end = 100){
      return Rx.Observable
        .of({ action : ACTION_ADD, value })
        .delay( this.randomDelay(start, end) );
    }

    replace(start = 10, end = 100){
      return Rx.Observable
        .of({ action : ACTION_REPLACE })
        .delay( this.randomDelay(start, end) );
    }

    replaceWithTick(){
      return Rx.Observable.concat(
        this.replace(), this.tick(10, 100)
      )
    }

}


let messages = [
    'JEJEJEJEJ',
 [
      ...Array.from('Hola que'),
      {action : 'ACTION_REPLACE', value : 1},
      'é',
      ...Array.from(' tal?')
    ]
  ];

new AsyncWritter('div', messages);
    <div></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>

    原始答案

    不久前我在StackOverflow上写了一个类似的答案，它使用了 Promises。

    以下示例使用来自 RxJS 库的 Observables。

    // Creamos una función que devolverá un observable
const escribe = function(palabra){
  // creamos un array con cada elemento de la frase
  const array = palabra.split('');
  // contador
  let count = 0;
  // Observable que devolverá el elemento actual
  // del array. y aumentará el contador
  let obs = Rx.Observable.create(
    observer =>{
      observer.next(array[count++]);
      if(!array[count]) observer.complete();
    }
  );
  // Devolvemos un observable
  return Rx.Observable
    // Crea un intervalo de tiempo cada 60 ms
    .interval(60)
    .timeInterval()
    // que devolverá el observable creado anteriormente
    .flatMap(()=> obs)
    // Ejecutaremos hasta que el observable "obs"
    // devuelva undefined
    .takeWhile(val => val != undefined)
}
let textArea = document.querySelector('#textArea');

escribe(escribe.toString()).subscribe(
  data => {
    textArea.innerHTML += data;
  }
);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>

<div id="textArea"></div>

    • 7

  4. 正如您在问题中提到的，您可以使用setTimeout()在指定的时间间隔内显示每个字符。 

    var i = 0;
var msg = 'Stackoverflow en español!...';
var velocidad = 200;

function typeWriter() {
  if (i < msg.length) {
    document.getElementById("escribetexto").innerHTML += msg.charAt(i);
    i++;
    setTimeout(typeWriter, velocidad);
  }
}
    <!DOCTYPE html>
<html>
<body  style="background-color:orange;">

<button onclick="typeWriter()">Clic para mostrar texto</button>

<h1>
<font face="verdana" color="white">
<p id="escribetexto"></p>
</font>
</h1>



</body>
</html>

    De esta forma se mostraría el efecto "typeWriter" (máquina de escribir) en tu página.

    introducir la descripción de la imagen aquí

    • 0