在javascript中使用RSS feed

时间:2012-07-23 09:50:40

标签: javascript rss google-feed-api

我对Google Feed有疑问。它帮助我使用JavaScript显示RSS。首先,我想展示代码,然后我会问我的问题。

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 onload="startbcscroll();" bgcolor="#ffffcc" text="navy"><center>
<div id="feed"></div>

好的,我正在使用此Google Feed代码和其他js以水平滚动显示消息。它们现在都在工作,但我想在这个水平滚动中显示RSS feed。当我运行代码时,首先它显示Rss提要的标题,然后在底部有一个水平滚动。在此水平滚动中,它从名为“sglm”的数组中获取值。你可以在JS Part中看到它。例如,它必须完全采用这种格式,否则它将无法工作;

sglm [0] ='Hello World'

现在我想以这种格式将来自RSS提要的标题放入此数组中。我无法理解,所以也许你可以帮助我。顺便说一下,它将Rss feed标题放入带有id feed的div中。谢谢。

1 个答案:

答案 0 :(得分:1)

那很有趣......不! ;)
我不得不改变指示器工作的方式,因为我无法想象如何以它的方式更新它。您现在有一个简单的函数tickerUpdateItems,您只需传递一系列项目即可更新 这是新来源......

<!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 ='&nbsp;' + items[i] +'&nbsp;' +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 + '&nbsp;' : '') +
        '</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 + '&nbsp' + 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>

....希望它适合你:)