原生JavaScript中的动画输入

时间:2016-07-11 11:36:31

标签: javascript settimeout

我尝试过创建动画输入/删除效果。它确实打字,但是当它完成第一句时,它就不会做任何其他事情。它似乎停留在第一个if语句中。

window.onload = () => {
  const sentences = ['Who am I?', 'Who are you?', 'Who are we?'];
  const input = document.getElementsByName('q')[0];

  let sentence = 0;
  let character = 0;
  let typing = true;

  (function typing() {

    if (character === sentences[sentence].length - 1) {
      typing = false;
    } else if (character === 0) {
      if (sentence < sentences.length - 1) {
        sentence++;
      } else {
        sentence = 0
      }
      typing = true;
    }

    if (typing) {
      character++;
    } else {
      character--;
    }

    input.placeholder = sentences[sentence].substring(0, character);

    setTimeout(typing, ~~(Math.random() * (300 - 60 + 1) + 60));
  })();

};

2 个答案:

答案 0 :(得分:1)

你在函数本身中覆盖你的函数,setTimeout接收一个布尔作为第一个参数

对于函数名称,最好使用typeSentence之类的动词 对于布尔值,可以使用isTyping

之类的问题

答案 1 :(得分:0)

使用builder.mouse.mouseMove(((Locatable)spanElement).coordinates) 和一些Realm realm = Realm.getInstance(getApplicationContext()); //Writing to Realm with Transaction blocks realm.beginTransaction(); ModelClass modelClass = realm.createObject(ModelClass.class); // increment index long nextID = (long) (realm.where(ModelClass.class).max("id")); long primaryKeyValue = nextID + 1; try { modelClass.setId(primaryKeyValue); //your can set other values realm.commitTransaction(); } catch (Exception e) { Log.e("Realm Error", "error" + e.getLocalizedMessage()); realm.cancelTransaction(); } 函数来查看此方法:

&#13;
&#13;
Promises
&#13;
Array
&#13;
&#13;
&#13;