显示了字符串's的字符喜欢跑步打字的方式

showing a string's characters like running typing manner

本文关键字：喜欢 方式 字符 显示 字符串      更新时间：2023-09-26

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

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

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

这背后应该有什么概念，我应该使用什么功能？

谢谢。

这里有一个非常基本的（仅限纯文本）：

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上进行了测试，但我的目标主要是给你一个玩的基础，以及尽可能少的代码量。

作为对您评论的回复，这里有一个使用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/.

相关文章：