每5秒從外部鏈接更改一次文字

Question

我已經找到了一個可以正常工作的jQuery，可以隨着時間的推移動態更改文本，並具有淡入淡出效果。 我希望從外部鏈接自動添加單詞 ： Words Page 。

我怎樣才能做到這一點？

我的目標是使JS文件小/小，因為我有更多其他jQuery的代碼。

感謝任何指導！

檢查我的： 在此處輸入鏈接描述

HTML

<span class="textbox">Stylish</span>

CSS

span.textbox{
    display: inline;
    float: left;
    font-size: 20px;
    margin-top: 50px;
    margin-left: 50px;
    color: #131313;
    font-weight: bold;
    letter-spacing: 1px;
}

JS

$(document).ready(function() {

   // List your words here:
var words = [
    'Awesome',
    'Special',
    'Sofisticated',
    'Simple',
    'Great',
    'Better',
    'Stronger',
    'Stylish',
    'Flawless',
    'Envied',
    'Strong',
    'Sucessful',
    'Grow',
    'Innovate',
    'Global',
    'Knowledgable',
    'Solid'
    ], i = 0;

setInterval(function(){
    $('.textbox').fadeOut(500, function(){
        $(this).html(words[i=(i+1)%words.length]).fadeIn(500);
    });
}, 5000);

});

Answer 1

使用jQuery.ajax（）

$.ajax('http://www-958.ibm.com/software/data/cognos/manyeyes/datasets/5-adjectives-to-describe-company-2/versions/1.txt').done(function(response, status) {
    // Check for error result (404, 500, etc)
    if (status !== 'error')
    {
        // Split words using ", " as separator to words array.
        var words = response.split(", ");
        // Your code here to change texts. Nothing changed.
        setInterval(function(){
            $('.textbox').fadeOut(500, function(){
                $(this).html(words[i=(i+1)%words.length]).fadeIn(500);
            });
        }, 5000);
    }
});

但是由於跨域錯誤，您將無法獲得此網址。

將txt復制到您的域或進行重定向。

Answer 2

查看https://api.jquery.com/jQuery.get/

例如

var words = {};

$.get( "http://www-958.ibm.com/software/data/cognos/manyeyes/datasets/5-adjectives-to-describe-company-2/versions/1.txt", function( data ) {
    words = data.split(',');
});

data是從服務器返回的內容-> .split由字符串組成數組，其中''內的位為分隔符。

編輯

如果由於跨域而無法使用$ .get，則答案是：

在服務器上創建腳本（wordslist.php）

使用CURL獲取頁面->將內容添加到變量$wordsList ，然后執行

return $wordsList;

然后改用$.get到URL'wordslist.php'。

Answer 3

嗨，您需要執行ajax調用，然后將返回的數據拆分為數組，因為它不是有效的json字符串。

試試下面的代碼

$(document).ready(function(){
            $.ajax({
                dataType: "html",
                url: "http://www-958.ibm.com/software/data/cognos/manyeyes/datasets/5-adjectives-to-describe-company-2/versions/1.txt",
                success: function(data) {
                    var words = data.split(', ');
                    var i = 0;
                    setInterval(function(){
                        $('.textbox').fadeOut(500, function(){
                            $(this).html(words[i=(i+1)%words.length]).fadeIn(500);
                        });
                    }, 5000);
                },
                error: function(data) {
                    console.log('error occured');
                }
            });
        });

如果您能夠將txt文件修改為有效的json數組，則可以使用json或jsonp數據類型

Answer 4

這是我的例子。 您不能太多地使用IBM，因為它們不允許跨域訪問。 但是，您可以使用培根益母乳。 我經常使用它來生成測試用例的隨機文本。 這是偽代碼：

1. 對跨域資源進行AJAX調用
2. 成功呼叫后，將數據加載到單詞列表中。
3. 然后開始超時。

代碼（ jsFiddle ）

$(document).ready(function() {
       // List your words here:
    var words = [];
    var baconApi = 'https://baconipsum.com/api/?callback=?';
    var baconSettings = { 
            'type':'meat-and-filler',
              'paras':'1' 
    };

    var baconCallback = function(bacon) {
        if (bacon && bacon.length > 0) {
            // Make word list
            bacon.map(function(meat) {
                words = words.concat(meat.split(/ /));
            });
        }
        var i = 0;
        // Start Timer
        setInterval( function(){
            $('.textbox').fadeOut(500, function(){
                $(this).html(words[i=(i+1)%words.length]).fadeIn(500);
            });
        }, 5000);
    };

    $.getJSON( baconApi, baconSettings, baconCallback);
});