Question

实际上我想知道这个问题背后的概念。我想逐个选择字符串的字符，并希望逐个显示它们，就像使用Java脚本运行打字方式一样。看看我想说的http://www.yupptv.com/Movies/Movies.aspx

在此页面中，请参阅菜单栏下方的最新新闻。

请参阅此图片http://www.sendspace.com/file/wftvr3

这背后的概念应该是什么以及我应该使用哪些功能？

谢谢。

Answer 1

这是一个非常基本的（纯文本）：

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);

现场演示：http://jsfiddle.net/wared/B2CrB/。

这是另一个使用jQuery处理HTML的演示：http://jsfiddle.net/wared/HVBMv/。它仅在Chrome上测试过，但我的目标主要是为您提供一个基础，以及尽可能少的代码。

Answer 2

作为对您评论的回复，以下是使用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);

关于javascript计时器：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Timers。

闪烁的下划线：

<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);

演示：http://jsfiddle.net/wared/5LDs3/。

显示字符串的字符，如运行打字方式

2 个答案: