3

このコードは、ローディング バー (" Loading., Loading.., Loading...) のようなドット効果を提供しますが、問題は、単一のスパン ID のみが機能し、2 番目のスパン ID が機能しないことです。理由はわかりません...みんな私を助けてください

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function showProgressDots(numberOfDots) {

    var progress = document.getElementById('progressDots');

    switch(numberOfDots) {
        case 1:
            progress.innerHTML = '.';
            timerHandle = setTimeout('showProgressDots(2)',200);
            break;
        case 2:
            progress.innerHTML = '..';
            timerHandle = setTimeout('showProgressDots(3)',200);
            break;
        case 3:
            progress.innerHTML = '...';
            timerHandle = setTimeout('showProgressDots(1)',200);
            break;
    }
}
window.setTimeout('showProgressDots(1)',100);
//-->
</SCRIPT>

Loading<span id="progressDots" style="position:absolute;"></span>
SecondLoading<span id="progressDots" style="position:absolute;"></span>
4

4 に答える 4

6

必要な場合の簡単な解決策を次に示します。

HTML:

Loading<span id="progressDots1"></span>
SecondLoading<span id="progressDots2"></span>

JavaScript:

function loading(id) {
    var el = document.getElementById(id),
        i = 0,
        dots = "...";

    setInterval(function() {
        el.innerHTML = dots.substring(0, ++i);
        if (i % 3 == 0) i = 0;
    }, 500);
}

loading("progressDots1");
loading("progressDots2");​

デモ: http://jsfiddle.net/dzFL3/

于 2012-05-25T16:24:52.040 に答える
3

編集1：ローダーを登録/登録解除できるように、カスタマイズ可能なローダーを作成しました。以下を参照してください。

編集2：ビジョンが指摘したように

ただ興味がない...複数のタイマーを作成して配列に格納するポイントは何だと思いましたか? しばらく待つと、別々のタイマーが非同期になります。これはどうですか: jsfiddle.net/rMpK9/5

改善されたコード: (Vision のDEMOと の使用からgetElementsByTagName)

var timer = null,
    dotLimit = 3,
    elements = [];

function registerProgressDots(progress) {
    for (var i = 0; i < progress.length; i++) {
        elements.push(progress[i]);
    }

    timer = setInterval(function() {
        for (var i = 0; i < elements.length; i++) {
            with(elements[i]) {
                innerHTML = innerHTML.length == dotLimit ? '' : innerHTML + '.';
            }
        }
    }, 200);
}

function unRegisterProgressDots(index, clearDots) {
    if (typeof index == 'undefined' || index == null) {
        clearInterval(timer);
    } else {
        elements.splice(index, 1);
        if (elements.length == 0) {
            clearInterval(timer);
        }
    }

    if (clearDots) {
        var progress = document.getElementsByClassName('progressDots');
        for (var i = 0; i < progress.length; i++) {
            progress[i].innerHTML = '';
        }
    }
}

window.setTimeout(function() {
    var spanTags = document.getElementsByTagName('span');

    var progress = [];
    for (var i = 0; i < spanTags.length; i++) {
        if (spanTags[i].className.indexOf('progressDots') >= 0) {
            progress.push(spanTags[i]);
        }
    }

    registerProgressDots(progress);
}, 100);

window.setTimeout(function() {
    unRegisterProgressDots(null, true);
}, 10000); //stop loading text after 10 seconds

最終デモ

于 2012-05-25T16:14:35.943 に答える
1

これが私の提案です：

Loading<span id="progressDots" style="position:absolute;"></span> //element before script

<script type="text/javascript">
var i='', dots=20;

showProgressDots();    
function showProgressDots() {
    var progress = document.getElementById('progressDots');
        progress.innerHTML = i;
    i+='.';
    if (i.length<dots) setTimeout(showProgressDots, 200);
}
</script>

フィドル

于 2012-05-25T16:46:19.193 に答える
1

このために作成した小さなプラグインを投稿するだけです（楽しみのために..）。

(function($){
    $.fn['progress'] = function(_options){
        var options = {
            symbol: '.',
            delay: 200,
            length: 3,
            duration: 0
        };
        if (typeof _options === 'object'){
            $.extend(options, _options);
        } else if (_options === 'clear'){
            return this.each(function(){
                clear.apply(this);
            });
        }
        
        function display(){
            var self = $(this),
                txt = self.text() + options.symbol;
            if (txt.length  > options.length){
                txt = '';
            }
            self.text( txt );
        }
        
        function clear(){
            var self = $(this),
                timer = self.data('progressTimer');
            
            clearInterval(timer);
            self.text('');
            self.removeData('progressTimer');
        }
        
        return this.each(function(){
            var self = $(this),
                that = this,
                timer = null;
            
            timer = setInterval(function(){
                display.apply(that);
            }, options.delay);
            
            self.data('progressTimer', timer);
            
            if (options.duration){
                setTimeout(function(){
                        clear.apply(that);
                    }, options.duration);
            }
        });
    }
                         
})(jQuery);

あなたはそれを使用します

// to set it
$('some-selector').progress({/*options*/});

// to stop it
$('some-selector').progress('clear');

利用可能なoptions存在で

  • symbol各反復で追加する文字 (デフォルトは.)
  • length最初からやり直す前に表示するシンボルの最大数 (デフォルトは 3 )
  • delay各余分なシンボルが追加されるのにかかる時間 (ミリ秒単位) (デフォルトは 200 )
  • durationプラグインをクリアするまでの合計時間 (ミリ秒単位) (デフォルトは 0 で、自動クリアなしを意味します)

例はjsfiddleを指しています

$('some-selector').progress({
  symbol: '*',
  length: 10,
  delay: 100,
  duration: 5000 
});

コメントの更新

特定の時間後に自動的にクリアするには、コードにタイムアウトを追加するだけです..

それで

var progressElements = $('some-selector').progress({/*options*/}); // set the progress
setTimeout(function(){
   progressElements.progress('clear');
 }, 1000); // 1000ms = 1 second

2 番目のコメントの更新

durationパラメータを許可するように上記のプラグイン コードを変更しました。

指定した場合、プラグインが自動的にクリアされるまでの時間を宣言します。

http://jsfiddle.net/gaby/gh5CD/3/のデモ( 2 番目のローダーは 2 秒後にクリアされます)

于 2012-05-26T14:18:46.990 に答える