为什么只显示arr [0]

时间:2016-06-03 14:09:14

标签: javascript setinterval

为什么只显示数组的第一个元素?

代码:

<html>
<head>
   <meta charset="utf-8">
   <style>
       #news {
    height: 30px;
    background-color:rgba(0, 0, 255, 0.37);
    direction: rtl;
    line-height: 30px;

}
    </style>
     <p id="x"></p>
     <p id="y"></p>
     <p id="z"></p>
     <p id="w"></p>
</head>
    <body>
        <div id="news">اخبار :<span id ="ne"></span></div>
        <script>
            var spn = document.getElementById("ne");
            var str = "";
            var arr = ["بهترین ها در سایت ما","آموزش جاوا اسکریپت","مرجع کامل سی اس اس","اولین دوره شبکه"];
            var len = arr.length;
            var i =0,j=0,tim;
            lop();
            function lop() {
                if(arr[i]){
                     var myss = arr[i].split(""); 
                     tim = setInterval(function(){shw(myss)},100);
                }
            }
            function shw(st) {
                if(st[j] != undefined) {
                    str += st[j];
                    spn.innerHTML = str;
                    j+=1;
                }
                else {
                    clearInterval(tim);
                    i++;
                    lop();
                }        
            }
        </script>
    </body>
</html>

2 个答案:

答案 0 :(得分:1)

好像您没有将j重置回0

<html>
  <head>
    <meta charset="utf-8">
    <style>
      #news {
        height: 30px;
        background-color:rgba(0, 0, 255, 0.37);
        direction: rtl;
        line-height: 30px;

      }
    </style>
    <p id="x"></p>
    <p id="y"></p>
    <p id="z"></p>
    <p id="w"></p>
  </head>
  <body>
    <div id="news">اخبار :<span id ="ne"></span></div>
    <script>
      var spn = document.getElementById("ne");
      var str = "";
      var arr = ["بهترین ها در سایت ما","آموزش جاوا اسکریپت","مرجع کامل سی اس اس","اولین دوره شبکه"];
      var len = arr.length;
      var i =0,j=0,tim;
      lop(i);
      function lop(index) {
        if(arr[index]){
          var myss = arr[index].split(""); 
          tim = setInterval(function(){shw(myss)},100);
        }
      }
      function shw(st) {
        if(st[j] != undefined) {
          str += st[j];
          spn.innerHTML = str;
          j+=1;
        }
        else {
          clearInterval(tim);
          i++;
          j=0;
          lop(i);
        }        
      }
    </script>
  </body>
</html>

以下是plunkr

答案 1 :(得分:1)

我想出了一个解决方案:

&#13;
&#13;
#news {
  height: 30px;
  background-color:rgba(0, 0, 255, 0.37);
  direction: rtl;
  line-height: 30px;

}
&#13;
<div id="news">اخبار :<span id ="ne"></span></div>
&#13;
#Example: 
user = User.objects.get(id=1)
print(user._meta.get_fields())
&#13;
&#13;
&#13;