JSFiddle - React, Tailwind, and code Playground
HTML
<div id="outer">
<div>
<div>
<div id="newsbar"></div>
<div id="button"><span role="button"> <input type="button" value="submit"/></div>
</div>
</div>
</div>
CSS
#newsbar,#button{display:inline-block;vertical-align:middle;}
JavaScript
var marqueeContent = new Array();
marqueeContent[0] = ' <a href=http://www.blueidea.com/updatelist.asp target=_blank class="f12red"><h2>aaa</h2></a>';
marqueeContent[1] = ' <a href=http://www.blueidea.com/updatelist.asp target=_blank class="f12red"><h2>bbb</h2></a>';
marqueeContent[2] = ' <a href=http://www.blueidea.com/updatelist.asp target=_blank class="f12red"><h2>ccc</h2></a>';
marqueeContent[3] = ' <a href=http://www.blueidea.com/updatelist.asp target=_blank class="f12red"><h2>ddd</h2></a>';
var marqueeInterval = new Array();
var marqueeId = 0;
var marqueeDelay = 2000;
var marqueeHeight = 25;
var newsbar;
function initMarquee() {
var str = marqueeContent[0];
//marqueeId++;
marqueeInterval[0] = setInterval("startMarquee()", marqueeDelay);
}
function startMarquee() {
newsbar = document.getElementById("newsbar");
var str = marqueeContent[marqueeId];
// console.debug("str:"+str);
marqueeId++;
if (marqueeId >= marqueeContent.length) marqueeId = 0;
console.debug("newsbar.childNodes:" + newsbar.childNodes);
console.debug("newsbar.childNodes.length:" + newsbar.childNodes.length);
//console.debug("newsbar.childNodes[0].nodeType:"+newsbar.childNodes[0].nodeType);
if (newsbar.childNodes.length == 0) {
var nextLine = document.createElement('DIV');
nextLine.innerHTML = str;
newsbar.appendChild(nextLine);
} else {
newsbar.childNodes[0].innerHTML = str;
newsbar.appendChild(newsbar.childNodes[0]);
newsbar.scrollTop = 0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1] = setInterval("scrollMarquee()", 20);
}
function scrollMarquee() {
newsbar.scrollTop++;
if (newsbar.scrollTop % marqueeHeight == (marqueeHeight - 1)) {
clearInterval(marqueeInterval[1]);
}
}
window.onload = function () {
var lotusPlaceBar = document.getElementById("outer");
var lotusInner =...