[英]Change text every 5 seconds from external link
I have a working jQuery that Ive found, to dynamically change text over time, with fade effect. 我已经找到了一个可以正常工作的jQuery,可以随着时间的推移动态更改文本,并具有淡入淡出效果。 I want the words, to be added automatically, from an external link: Words Page . 我希望从外部链接自动添加单词 : Words Page 。
How can I do this? 我怎样才能做到这一点?
My goal is to keep the JS file small/minimal, since I have more code of other jQuery. 我的目标是使JS文件小/小,因为我有更多其他jQuery的代码。
Appreciate any guidance! 感谢任何指导!
Check my: enter link description here 检查我的: 在此处输入链接描述
HTML HTML
<span class="textbox">Stylish</span>
CSS 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 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);
});
Use jQuery.ajax() 使用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);
}
});
But you will not be able to get this url due cross-domain error. 但是由于跨域错误,您将无法获得此网址。
Copy the txt to your domain or make a redirect. 将txt复制到您的域或进行重定向。
check out https://api.jquery.com/jQuery.get/ 查看https://api.jquery.com/jQuery.get/
eg 例如
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
is what is returned from the server -> .split makes array from a string where the bit inside ''
is the seperator. data
是从服务器返回的内容-> .split由字符串组成数组,其中''
内的位为分隔符。
EDIT 编辑
If you cannot use $.get due to cross-domain the answer is: 如果由于跨域而无法使用$ .get,则答案是:
create script on your server (wordslist.php) 在服务器上创建脚本(wordslist.php)
use CURL to get the page -> add the content to a variable $wordsList
and then do 使用CURL获取页面->将内容添加到变量$wordsList
,然后执行
return $wordsList;
Then do a $.get
to the URL 'wordslist.php' instead. 然后改用$.get
到URL'wordslist.php'。
Hi you need to do an ajax call, and then split the data returned into an array, since it's not a valid json string. 嗨,您需要执行ajax调用,然后将返回的数据拆分为数组,因为它不是有效的json字符串。
try the following code 试试下面的代码
$(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');
}
});
});
if you are able to modify the txt file to be a valid json array, you can use json or jsonp datatype 如果您能够将txt文件修改为有效的json数组,则可以使用json或jsonp数据类型
Here is my example. 这是我的例子。 You can't use IBM many eyes because they don't allow cross-domain access. 您不能太多地使用IBM,因为它们不允许跨域访问。 However, you can use Bacon Ipsum. 但是,您可以使用培根益母乳。 I use this often to generate random text for test cases. 我经常使用它来生成测试用例的随机文本。 Here is the pseudo code: 这是伪代码:
Code ( jsFiddle ) 代码( 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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.