问题
I have a question about Google Feed. It helps me to display RSS by using javascript. First I want to show the code, then I'm going to ask my question.
JS Part:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script language="javascript">
var sglm=new Array();
sglm[0]= 'ahmet tanakol';
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/rss/rss.xml");
feed.setNumEntries(6);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
Body:
<body onload="startbcscroll();" bgcolor="#ffffcc" text="navy"><center>
<div id="feed"></div>
Ok, I'm using this Google Feed code and another js to display messages in a horizontal scrolling. Both of them are working now, but I want to display RSS feed in this horizontal scrolling. When I run the code, first it displays titles of Rss feeds, then at the bottom there is a horizontal scrolling. In this horizontal scrolling, it takes values from an array called "sglm". You can see it in JS Part. For example it has to be exactly in this format othersiw it won't work;
sglm[0] = 'Hello World'
Now I want to put titles from RSS feeds into this array in this format. I couldn't figure it out, so maybe you can help me. By the way,it puts Rss feeds titles into a div with id feed. Thank you.
回答1:
Well that was fun....NOT! ;)
I had to change the way the ticketer worked a little as I couldn't figure how to update it the way it was. You now have an easy function tickerUpdateItems that you just pass an array of items and it will update.
Here's the new source....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JS-Ticker</title>
<style> <!--
BODY, P, SPAN, DIV, TABLE, TD, TH, UL, OL, LI {
font-family: Arial, Helvetica;
font-size: 14px;
color: black;
}
.code {
font-family: Courier New, Monospace;
font-size: 12px;
margin: 10px;
padding: 0px;
color: blue;
}
--> </style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//THIS IS MY HORIZONTAL SCROLLING. RSS TO JAVASCRIPT CODE IS AT THE END OF IT!!!!!
var tickerEntries = new Array(
"Hello!",
"Use this script to create a news ticker.",
"You can also use <b>HTML tags</b>.",
"The quick brown fox jumps over the lazy dog."
);
//---------------------------------------------------------------------------------------------------------
// Configuration
//---------------------------------------------------------------------------------------------------------
var tickerWidth = 400; // width (pixels)
var tickerMargin = 20; // margin (pixels)
var tickerDelay = 30; // scrolling delay (smaller = faster)
var tickerSpacer = "+++"; // spacer between ticker entries
var tickerBGColor = "#E0F0FF"; // background color
var tickerHLColor = "#FFF0E0"; // hilight (mouse over) color
var tickerFont = "Courier New, Courier, Monospace"; // font family (CSS-spec)
var tickerFontSize = 16; // font size (pixels)
var tickerFontColor = "blue"; // font color
var tickerBorderWidth = 2; // border width (pixels)
var tickerBorderStyle = "groove"; // border style (CSS-spec)
var tickerBorderColor = "#FFFFFF"; // border color
//---------------------------------------------------------------------------------------------------------
// Functions
//---------------------------------------------------------------------------------------------------------
var DOM = document.getElementById;
var IE4 = document.all;
var tickerIV, tickerID;
var tickerItems = new Array();
var tickerHeight = tickerFontSize + 8;
function tickerGetObj(id) {
if(DOM) return document.getElementById(id);
else if(IE4) return document.all[id];
else return false;
}
function tickerObject(id) {
this.elem = tickerGetObj(id);
this.width = this.elem.offsetWidth;
this.x = tickerWidth;
this.css = this.elem.style;
this.css.width = this.width + 'px';
this.css.left = this.x + 'px';
this.move = false;
return this;
}
function tickerNext() {
if(!DOM && !IE4) return;
var obj = tickerItems[tickerID];
if(obj) {
obj.x = tickerWidth;
obj.css.left = tickerWidth + 'px';
obj.move = true;
}
}
function tickerMove() {
if(!DOM && !IE4) return;
for(var i = 0; i < tickerItems.length; i++) {
if(tickerItems[i].move) {
if(tickerItems[i].x > -tickerItems[i].width) {
tickerItems[i].x -= 2;
tickerItems[i].css.left = tickerItems[i].x + 'px';
}
else tickerItems[i].move = false;
}
}
if(tickerItems.length == 1) {
if(tickerItems[tickerID].x + tickerItems[tickerID].width <= 0) {
tickerNext();
}
}
else if(tickerItems[tickerID].x + tickerItems[tickerID].width <= tickerWidth) {
tickerID++;
if(tickerID >= tickerItems.length) tickerID = 0;
tickerNext();
}
}
function tickerStart(init) {
if(!DOM && !IE4) return;
if(tickerBGColor) {
var obj = tickerGetObj('divTicker');
obj.style.backgroundColor = tickerBGColor;
}
if(init) {
tickerID = 0;
tickerNext();
}
if (tickerIV) clearInterval(tickerIV);
tickerIV = setInterval('tickerMove()', tickerDelay);
}
function tickerStop() {
if(!DOM && !IE4) return;
clearInterval(tickerIV);
if(tickerHLColor) {
var obj = tickerGetObj('divTicker');
obj.style.backgroundColor = tickerHLColor;
}
}
function tickerInit() {
if(!DOM && !IE4) return;
var obj = tickerGetObj('divTicker');
obj.style.width = tickerWidth + 'px';
obj.style.visibility = 'visible';
//tickerStart(true);
tickerUpdateItems(tickerEntries);
}
function tickerReload() {
if(!DOM && !IE4) return;
document.location.reload();
}
//window.onresize = tickerReload;
window.onload = tickerInit;
//---------------------------------------------------------------------------------------------------------
// Build ticker
//---------------------------------------------------------------------------------------------------------
document.write(
'<style> ' +
'#divTicker { ' +
'position: absolute; ' +
'width: 10000px; ' +
'height: ' + tickerHeight + 'px; ' +
'cursor: default; ' +
'overflow: hidden; ' +
'visibility: hidden; ' +
(tickerBorderWidth ? 'border-width: ' + tickerBorderWidth + 'px; ' : '') +
(tickerBorderStyle ? 'border-style: ' + tickerBorderStyle + '; ' : '') +
(tickerBorderColor ? 'border-color: ' + tickerBorderColor + '; ' : '') +
'} ' +
'.cssTickerContainer { ' +
'position: relative; ' +
'height: ' + tickerHeight + 'px; ' +
'margin-top: ' + tickerMargin + 'px; ' +
'margin-bottom: ' + tickerMargin + 'px; ' +
'} ' +
'.cssTickerEntry { ' +
'position:absolute;top:2px; white-space:nowrap;'+
'font-family: ' + tickerFont + '; ' +
'font-size: ' + tickerFontSize + 'px; ' +
'color: ' + tickerFontColor + '; ' +
'} ' +
'</style>'
);
function tickerUpdateItems(items) {
var ticker = document.getElementById('divTicker');
ticker.innerHTML = '';
if (items.length > 0) {
for (var i = 0; i < items.length; i++) {
var tickerItem = document.createElement('DIV');
tickerItem.id = 'divTickerEntry' + (i + 1);
tickerItem.className = 'cssTickerEntry';
tickerItem.innerHTML =' ' + items[i] +' ' +tickerSpacer;
ticker.appendChild(tickerItem);
}
}
tickerItems=[];
for (var i = 0; i < items.length; i++) {
tickerItems[i] = new tickerObject('divTickerEntry' + (i + 1));
}
tickerStart(true);
}
/*document.write(
'<div class="cssTickerContainer">' +
'<div id="divTicker" onMouseOver="tickerStop()" onMouseOut="tickerStart()">'
);
for(var i = 0; i < tickerEntries.length; i++) {
document.write(
'<div id="divTickerEntry' + (i+1) + '" class="cssTickerEntry" ' +
'style="position:absolute; top:2px; white-space:nowrap">' +
tickerEntries[i] + ((tickerEntries.length > 1) ? ' ' + tickerSpacer + ' ' : '') +
'</div>'
);
}
//END OF HORIZONTAL SCROLLER
//---------------------------------------------------------------------------------------------------------
// THIS IS WHERE I TRANSFORM RSS TO JAVASCRIPT!!!!!!!!!!!!!!!!!!!!!!!
document.write('</div></div>');*/
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/rss/rss.xml");
feed.setNumEntries(6);
feed.load(function(result) {
if (!result.error) {
var titles=[];
var container = document.getElementById("feed");
var html = '';
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
titles.push(entry.title);
html += '<p>' + entry.publishedDate + ' ' + entry.title;
}
container.innerHTML = html;
tickerUpdateItems(titles);
}
});
}
google.setOnLoadCallback(initialize);
// END OF RSS TO JAVASCRIPT
</script>
</head>
<body>
<div class="cssTickerContainer"><div id="divTicker" onMouseOver="tickerStop()" onMouseOut="tickerStart()"></div></div>
<div id="feed"></div>
</body>
</html>
....hope it works out for you :)
来源：https://stackoverflow.com/questions/11610151/using-rss-feeds-in-javascript