Dấu chấm câu tải "hoạt hình", javascript?

Question

Tôi đang tìm một cách tốt để hiển thị một số dấu câu tải "hoạt hình".

Những gì tôi muốn là một cái gì đó như thế này:

This will display at second 1: "Waiting for your input." 
This will display at second 2: "Waiting for your input.." 
This will display at second 3: "Waiting for your input..." 
This will display at second 4: "Waiting for your input...." 
This will display at second 5: "Waiting for your input." 
This will display at second 6: "Waiting for your input.." 
This will display at second 7: "Waiting for your input..." 
This will display at second 8: "Waiting for your input...." 

Và vân vân.

Tôi bắt đầu bằng cách bao quanh các dấu chấm trong spans và nghĩ rằng tôi có thể lặp qua chúng với jquery và hiển thị thêm một, một, nhiều hơn, sau đó đặt lại thành 1. Nhưng mã đã rất vụng về, vì vậy tôi tự hỏi làm thế nào bạn làm cái này?

Answer 1

Bí quyết tạo chuỗi dấu chấm là tạo một mảng thưa thớt và sau đó nối tất cả các phần tử với ký tự mong muốn.

var count = 0; 
setInterval(function(){ 
    count++; 
    var dots = new Array(count % 10).join('.'); 
    document.getElementById('loadingtext').innerHTML = "Waiting for your input." + dots; 
    }, 1000); 

Đây là Live demo.

Answer 2

Bây giờ chắc chắn cách mã bước ra khỏi tay, bạn chỉ có thể làm:

setInterval(function() { 
    var span = $("#text-loader").children("span:eq(0)"); 
    var ellipsis = span.html(); 
    ellipsis = ellipsis + "."; 
    if (ellipsis.length > 5) { 
    ellipsis = "."; 
    } 
    span.html(ellipsis); 
}, 1000); 

<div id="text-loader"> 
    This will display at second 1: "Waiting for your input<span>.</span> 
</div> 

Và như đối với 1, bạn có thể trao đổi đó ra với số lượng thời gian.

Answer 3

thử chức năng này: I'v đưa một ví dụ ở đây http://jsfiddle.net/XFd39/

var i=0; 
function f() { 
if(i<=4) 
$('#a').append("."); 
i++; 
if(i==4){ 
    $('#a').html(""); 
    i=0; 
} 
setTimeout(f,500); 
} 
f(); 

Answer 4

Dưới đây là một biến thể khá đơn giản: http://jsfiddle.net/psycketom/FusdC/

Đọc các ý kiến ​​dưới đây để hiểu những gì tất cả mọi thứ đang làm gì ở đó.

var span = $('.dots'); // take the element where you have the maximum count of dots 
var text = span.text(); // cahce it's text value 

// we set up a function here, so we can loop it all the time 
var loading = function() 
{ 
    $({ 
     count : 1 // we start at one dot 
    }).animate({ 
     count : text.length // together forming all of it 
    }, { 
     duration : 1000, // make the animation complete in one second 
     step : function() { 
      span.text(text.substring(0, Math.round(this.count))); // on each step, change the text accordingly to current iteration 
     }, 
     complete : function() { 
      loading(); // once complete, start all over again 
     } 
    }); 
}; 

loading(); // start it up for the first time 

Tại đây bạn cũng đạt được lợi thế của việc sử dụng easing nếu bạn muốn, dễ dàng thay đổi tổng thời gian và bó lợi ích khác trong trường hợp bạn đang tốt đẹp với jQuery.

Answer 5

Dude, trừ khi bạn muốn hiển thị hoạt ảnh này mãi mãi bạn sẽ cần một cách để dừng hoạt ảnh hoặc?

Đừng bao giờ suy nghĩ về biến toàn cục, đây là Javascript và nó có đóng cửa cho điều đó :)

<p>please wait<span id="wait"></span></p> 

<input type="submit" id="start" value="start"> 
<input type="submit" id="stop" value="stop"> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     var animator = function($el) { 
      var dotCount = 1; 
      var started = true; 
      return { 
       "start" : function step() { 
        dotCount = (dotCount + 1) % 10; 
        $el.text(new Array(dotCount).join('.')); 
        if (started) { 
         setTimeout(step, 100); 
        } 
       }, 
       "stop" : function() { 
        started = false; 
       } 
      } 
     }; 

     var animatedWait = animator($("#wait")); 

     $("#start").click(animatedWait.start); 
     $("#stop").click(animatedWait.stop); 
    }); 
</script> 

Answer 6

tinh khiết CSS giải pháp

Demo: jsfiddle.net/feklee/D59P9

• HTML:

  Waiting<span class="dots"><span>.</span><span>.</span><span>.</span></span> for more. 
  

• CSS:

  @keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } } 
  @keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } } 
  @keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } } 
  @-webkit-keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } } 
  @-webkit-keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } } 
  @-webkit-keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } } 
  
  .dots span { 
      animation: dots-1 1s infinite steps(1); 
      -webkit-animation: dots-1 1s infinite steps(1); 
  } 
  
  .dots span:first-child + span { 
      animation-name: dots-2; 
      -webkit-animation-name: dots-2; 
  } 
  
  .dots span:first-child + span + span { 
      animation-name: dots-3; 
      -webkit-animation-name: dots-3; 
  } 
  

WebKit chỉ thay thế

Ưu điểm: Không có thẻ lồng nhau. Điều này có nghĩa là dấu ba chấm có thể được đặt thành nội dung thành một phần tử giả ::after.

Demo: jsfiddle.net/feklee/vFT7W

• HTML:

  Waiting<span>...</span> for more. 
  

• CSS:

  body { 
      font-family: 'Roboto', sans-serif; 
      font-size: 50px; 
  } 
  
  @-webkit-keyframes dots { 
      0% { background-position: 0px; } 
      100% { background-position: 50px; } 
  } 
  
  span { 
      background: linear-gradient(to right, white 50%, black 50%); 
      color: transparent; 
      -webkit-background-clip: text; 
      -webkit-animation: dots 1s infinite steps(4); 
      padding-right: 40px; 
      margin-right: -40px; 
  } 
  

Answer 7

này có thể rất dễ dàng:

HTML

<span class="dots"></span> 

JQuery hoạt hình

setInterval(function() { 
    var th = $('.dots'); 
    if(th.text().length < 5){ 
     th.text(th.text()+"."); 
    }else{ 
     th.text(""); 
    } 
}, 500); 

Demo