Менять текст каждые 5 секунд по внешней ссылке

0

У меня есть рабочий jQuery, который Ive нашел, чтобы динамически изменять текст с течением времени, с эффектом затухания. Я хочу, чтобы слова добавлялись автоматически по внешней ссылке: 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);

});
  • 1
    Если вам не хватает той части, где вы перебираете массив слов, каково значение i в приведенном выше коде?
  • 0
    Цель состояла в том, чтобы изменить эти слова M8
Показать ещё 2 комментария
Теги:
dynamic
text
external

4 ответа

2
Лучший ответ

Использовать 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);
    }
});

Но вы не сможете получить этот URL-адрес из-за ошибки междоменной.

Скопируйте txt в свой домен или выполните перенаправление.

1

Привет, вам нужно сделать 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

1

Вот мой пример. Вы не можете использовать IBM много глаз, потому что они не позволяют междоменному доступу. Тем не менее, вы можете использовать Bacon Ipsum. Я часто использую это для генерации случайного текста для тестовых случаев. Вот псевдокод:

  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);
});
1

проверьте 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'.

  • 1
    Это приведет к отсутствию «Access-Control-Allow-Origin»
  • 0
    В результате вы получите сообщение об ошибке: XMLHttpRequest cannot load http://www-958.ibm.com/software/data/cognos/manyeyes/datasets/5-adjectives-to-describe-company-2/versions/1.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню