Question

我有一个HTML表单，当前有一个空的占位符值。

TypingEffect()随机选择八个示例中的一个，然后调用type()将其键入为占位符。然后，在2000年的间隔之后，它会应用擦除效果，擦除它。

我认为我的问题在于我的语法，更具体地说是TypingEffect()函数，但我无法理解。

HTML：

<form action="" method="get" type="search">
      <input type="text" class="textbox" placeholder='' />    
</form>

Javascript + jQuery：

$(document).ready(function() {
    setInterval ('cursorAnimation', 600);
    textbox = $('.textbox');

    setInterval ('TypingEffect', 600);
    setInterval ('ErasingEffect', 2000);
});

function TypingEffect() {
    var tag = Math.floor((Math.random() * 10) + 1);
    if (tag = 1) { caption = "Example1" }
    if (tag = 2) { caption = "Example2" }
    if (tag = 3) { caption = "Example3" }
    if (tag = 4) { caption = "Example4" }
    if (tag = 5) { caption = "Example5" }
    if (tag = 6) { caption = "Example6" }
    if (tag = 7) { caption = "Example7" }
    if (tag = 8) { caption = "Example8" }
    type();
}

function type() {
    textbox.attr("placeholder", (caption.substr(0, captionLength++)));
    if(captionLength < caption.length+1) {
        setTimeout('type()', 50);
    } else {
        captionLength = 0;
        caption = '';
    }
}

function ErasingEffect() {
    caption = captionEl.html();
    captionLength = caption.length;
    if (captionLength>0) {
        erase();
    }
}

function erase() {
    textbox.attr("placeholder",(caption.substr(0, captionLength--)));
    if(captionLength >= 0) {
        setTimeout('erase()', 50);
    } else {
        captionLength = 0;
        caption = '';
    }   
}

Answer 1

我更新了你的小提琴，让它发挥作用。 https://jsfiddle.net/uxftux9w/5/ 有一些问题，但我认为有些问题是将代码复制到jsfiddle，例如cursorAnimation变量，并且您没有将jQuery包含在小提琴中

主要问题是像Shilly指出的那样使用setInterval。使用函数名称而不是像setInterval('type()', 50)

这样的字符串

setInterval(type, 50)

另一个问题是你使用了两个setInterval如下

 setInterval ('TypingEffect', 600);
 setInterval ('ErasingEffect', 2000);

这些只会反复调用这两个函数，而不考虑您尝试输入的字幕长度的任何差异。

相反，我使用setTimeout来延迟对TypingEffect和ErasingEffect函数的初始调用，而使用setInterval重复调用type / {{1函数，直到标题被完全输入或删除。这是代码。我添加了评论，所以我希望它有一定道理。如果您愿意，可以通过多种方式优化和减少重复。

HTML

erase

的JavaScript

<form action="search.php" method="get" type="search">
  <input type="text" class="textbox" placeholder='' />
</form>

更新 - 适合喜欢CSS的人

Here与Lea Verou在纯CSS中发现的效果类似。

jQuery占位符动画

1 个答案: