Question

我正在尝试创建一个JS插件，它将输入一个字符串作为输入，字符串将慢慢丢失字符，一次从每个端点丢失，最终消失（字符串长度= 0）。

这是我到目前为止编写的代码：

var start=0;
var finish=0;

$.fn.scramble = function(){
     $(this).each(function(){
       $element = $(this);
       $inputString = $element.text().trim();
       finish = $inputString.length;
       vanish($inputString.substring(start++, finish--));
     })
  }

vanish = function($inputString){
  console.log($inputString);
  $stringLength = $inputString.length;
  console.log($stringLength);
  if($stringLength <= 0)
     return 0;
  setTimeout(function(){
    vanish($inputString.substring(start++, finish--));
   }, 1000);
 }

我给它一个样本输入，“样本”。预期的输出是“充足”，“mpl”，“p”。但相反，它返回“充足”，“ple”。

当然，我在这里做错了，但我无法弄清楚。请帮助：）

这是一个小提琴设置：http://jsfiddle.net/v6KKM/

Answer 1

考虑将finish = $inputString.length;更改为finish = $inputString.length - 1;

Answer 2

$.fn.scramble = function(){
     $(this).each(function(){
       $element = $(this);
       $inputString = $element.text().trim();
       finish = $inputString.length;
       vanish($inputString.slice(1, -1));
     })
  }

vanish = function($inputString){
  console.log($inputString);
  $stringLength = $inputString.length;
  // console.log($stringLength);
  if($stringLength <= 0)
     return 0;
  setTimeout(function(){
    vanish($inputString.slice(1, -1));
   }, 1000);
 }

也许这就是你想要的。您可以比较＆＃39; substring＆＃39;和＆＃39; slice＆＃39;。我希望这会有所帮助。

Answer 3

使用数组和递归函数可以更简单地获得相同的结果 Fiddle 您需要的所有代码是

<script type="text/javascript">
$(document).ready(function(){
    $.fn.scramble = function(){
        var str=$(this).text()
        function recursor(str){
            newS=''
            if(str.length>=3){
                var arr=str.split('')
                arr.pop()
                arr.shift()
                for(a=0;a<arr.length;a++){newS+=arr[a]}
                $('#text').append(' '+newS)
                setTimeout(function() { recursor(newS) },1000)
             }
        }
        recursor(str)
    }
    $('#sc').click(function(){
        $('#text').scramble()
    })  
})
</script>

或（可能更好）你可以使用子串Fiddle2，你将获得更紧凑的代码

<script type="text/javascript">
$(document).ready(function(){
    $.fn.scramble = function(){
        var str=$(this).text()
        function recursor(str){
            if(str.length>=3){
                var result = str.substring(1, str.length-1);
                $('#text').append(' '+result)
                setTimeout(function() { recursor(result) },1000)
             }
        }
        recursor(str)
    }
    $('#sc').click(function(){
        $('#text').scramble()
    })  
})
</script>

这个解决方案不适合您的需求，我为让您浪费时间而道歉。

Javascript文字效果

3 个答案: