我正在从外部页面转换 JSON 数据并尝试在新闻行情中使用该数据。
当我尝试使用从 JSON 创建的数据时，自动收报机不起作用。
当我在页面源中手动写入相同的数据时，ticker 工作正常。
我该如何解决这个问题？
谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A powerful, flexible and animated vertical news ticker plugin for JQuery, which provides multiple callbacks and methods to allow a maximum flexibility and an easy implementation into any project.">
<meta name="author" content="risq">
<title>JQuery Advanced News Ticker | risq</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://risq.github.io/jquery-advanced-news-ticker/assets/css/main.css" rel="stylesheet">
<link href="http://risq.github.io/jquery-advanced-news-ticker/assets/css/font-awesome.min.css" rel="stylesheet">
<link href="http://risq.github.io/jquery-advanced-news-ticker/assets/css/prism.css" rel="stylesheet" />
<link href="http://risq.github.io/jquery-advanced-news-ticker/assets/css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Customers</h1>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3schools.com/website/Customers_MYSQL.php";
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = '<ul id="nt-example1">';
for(i = 0; i < arr.length; i++) {
out += '<li>' +
arr[i].Name +
' - ' +
arr[i].City +
'-' +
arr[i].Country +
'</li>';
}
out += '</ul>';
document.getElementById("id01").innerHTML = out;
}
</script>
<div class="green">
<div class="container">
<div class="row">
<div class="col-md-7 centered">
<div id="nt-example1-container">
<i class="fa fa-arrow-up" id="nt-example1-prev"></i>
<!-- <ul id="nt-example1">
<li>Alfreds Futterkiste - Berlin-Germany</li><li>Berglunds snabbköp - Luleå-Sweden</li><li>Centro comercial Moctezuma - México D.F.-Mexico</li>
<li>Ernst Handel - Graz-Austria</li>
<li>FISSA Fabrica Inter. Salchichas S.A. - Madrid-Spain</li><li>Galería del gastrónomo - Barcelona-Spain</li><li>Island Trading - Cowes-UK</li>
<li>Königlich Essen - Brandenburg-Germany</li>
<li>Laughing Bacchus Wine Cellars - Vancouver-Canada</li>
<li>Magazzini Alimentari Riuniti - Bergamo-Italy</li>
<li>North/South - London-UK</li><li>Paris spécialités - Paris-France</li><li>Rattlesnake Canyon Grocery - Albuquerque-USA</li>
<li>Simons bistro - København-Denmark</li><li>The Big Cheese - Portland-USA</li><li>Vaffeljernet - Århus-Denmark</li>
<li>Wolski Zajazd - Warszawa-Poland</li>
</ul> -->
<div id="id01"></div>
<i class="fa fa-arrow-down" id="nt-example1-next"></i>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://risq.github.io/jquery-advanced-news-ticker/assets/js/jquery.newsTicker.js"></script>
<script>
$('a[href*=#]').click(function(e) {
var href = $.attr(this, 'href');
if (href != "#") {
$('html, body').animate({
scrollTop: $(href).offset().top - 81
}, 500);
}
else {
$('html, body').animate({
scrollTop: 0
}, 500);
}
return false;
});
// header news ticker
var nt_title = $('#nt-title').newsTicker({
row_height: 40,
max_rows: 1,
duration: 3000,
pauseOnHover: 0
});
// example 1
var nt_example1 = $('#nt-example1').newsTicker({
row_height: 80,
max_rows: 3,
duration: 4000,
prevButton: $('#nt-example1-prev'),
nextButton: $('#nt-example1-next')
});
// example 2
var nt_example2 = $('#nt-example2').newsTicker({
row_height: 60,
max_rows: 1,
speed: 300,
duration: 6000,
prevButton: $('#nt-example2-prev'),
nextButton: $('#nt-example2-next'),
hasMoved: function() {
$('#nt-example2-infos-container').fadeOut(200, function(){
$('#nt-example2-infos .infos-hour').text($('#nt-example2 li:first span').text());
$('#nt-example2-infos .infos-text').text($('#nt-example2 li:first').data('infos'));
$(this).fadeIn(400);
});
},
pause: function() {
$('#nt-example2 li i').removeClass('fa-play').addClass('fa-pause');
},
unpause: function() {
$('#nt-example2 li i').removeClass('fa-pause').addClass('fa-play');
}
});
$('#nt-example2-infos').hover(function() {
nt_example2.newsTicker('pause');
}, function() {
nt_example2.newsTicker('unpause');
});
// example 3
var state = 'stopped';
var speed;
var add;
var nt_example3 = $('#nt-example3').newsTicker({
row_height: 80,
max_rows: 1,
duration: 0,
speed: 10,
autostart: 0,
pauseOnHover: 0,
hasMoved: function() {
if (speed > 700) {
nt_example3.newsTicker("stop");
$('#nt-example3-button').text("RESULT: " + $('#nt-example3 li:first').text().toUpperCase());
setTimeout(function() {
$('#nt-example3-button').text("START");
state = 'stopped';
},2500);
}
else if (state == 'stopping') {
add = add * 1.4;
speed = speed + add;
nt_example3.newsTicker('updateOption', "duration", speed + 25)
.newsTicker('updateOption', "speed", speed);
}
}
});
$('#nt-example3-button').click(function(){
if (state == 'stopped') {
state = 'turning';
speed = 1;
add = 1;
nt_example3.newsTicker('updateOption', "duration", 0)
.newsTicker('updateOption', "speed", speed)
.newsTicker('start');
$(this).text("STOP");
}
else if (state == 'turning') {
state = 'stopping';
$(this).text("WAITING...");
}
});
</script>
</body>
</html>