showing a string's characters like running typing manner

问题

actually I want know the concept behind this problem.I want to select a string's characters one by one and want to show them one by one like running typing manner by using Java script. see what I exactly want to say http://www.yupptv.com/Movies/Movies.aspx

in this page see the Latest news below the menu bar.

see in this image http://www.sendspace.com/file/wftvr3

what should be the concept behind this and what functions should I use?

thank you.

回答1:

Here is a very basic one (plain text only) :

var s = 'This is a demo on how to build a marquee.',
    i = 0;
setTimeout(function () {
    document.body.innerHTML += s[i++];
    i < s.length && setTimeout(arguments.callee, 50);
}, 50);

And a live demo : http://jsfiddle.net/wared/B2CrB/.

Here is another demo using jQuery which deals with HTML : http://jsfiddle.net/wared/HVBMv/. It was only tested with Chrome, but my goal was mainly to give you a basis to play with, and an amount of code as small as possible.

回答2:

As a reply to your comment, here is an alternative using setInterval :

var s = 'This is a demo on how to build a marquee.',
    i = 0,
    id;
id = setInterval(function () {
    document.body.innerHTML += s[i];
    ++i === s.length && clearInterval(id);
}, 50);

About javascript timers : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Timers.

With a blinking underscore :

<span></span><span>_</span>

var s = 'This is a demo on how to build a marquee.',
    spans = document.getElementsByTagName('span'),
    text = spans[0],
    dash = spans[1],
    i = 0,
    id;

id = setInterval(function () {
    text.innerText += s[i];
    if (++i === s.length) {
        clearInterval(id);
        dash.style.visibility = 'hidden';
        setInterval(function () {
            dash.style.visibility = (
                dash.style.visibility === 'visible' ? 'hidden' : 'visible'
            );
        }, 700);
    }
}, 50);

Demo : http://jsfiddle.net/wared/5LDs3/.

来源：https://stackoverflow.com/questions/20160006/showing-a-strings-characters-like-running-typing-manner

标签

javascript

marquee