这个问题来自与上次相同的问题.我的网站运行静态域,因此我希望能够在每个站点上使用此脚本而无需复制副本.
它起到打字文本效果的作用,我希望能够从网页本身而不是脚本中定义打印出来的文本.
使用Javascript
var index = 0;
var text = 'Text';
function type()
{
document.getElementById('screen').innerHTML += text.charAt(index);
index += 1;
var t = setTimeout('type()',100);
}
我已经尝试摆弄代码并使用与我之前的帖子相同的方法,但我似乎无法让它工作.
好吧，我不喜欢上面的代码。一旦到达输入文本的末尾，您的原始代码也不会停止运行，而且我不相信任何其他建议的解决方案也会停止。
这是一个用纯 JS 重写的函数：
function type(i, t, ie, oe) {
input = document.getElementById(ie).innerHTML;
document.getElementById(oe).innerHTML += input.charAt(i);
setTimeout(function(){
((i < input.length - 1) ? type(i+1, t, ie, oe) : false);
}, t);
}
你可以这样称呼：
type(0, 100, "text", "screen");
参数有：beginning index, speed, input element,output element
您的 HTML 将如下所示：
<div id="screen"></div>
<div id="text" style="display:none">Hello Bobby</div>
您可以将 div 重命名为您喜欢的任何名称，只要相应地更新参数即可。我确信还有一种更简单的方法可以编写此方法，但我最喜欢这种方法。
function type(i, t, ie, oe) {
input = document.getElementById(ie).innerHTML;
document.getElementById(oe).innerHTML += input.charAt(i);
setTimeout(function(){
((i < input.length - 1) ? type(i+1, t, ie, oe) : false);
}, t);
}
type(0, 100, "text", "screen");
好问题，LMGTFY 过去经常让我咯咯笑。我认为您可能会发现以下内容很容易随处可见。它只是添加到目标容器中的一些属性，以及启动打字机的调用。
在这里，我同时运行其中 4 个只是为了好玩。在此示例中，可能值得丢弃 forEachNode，而使用少数注释行。如果 getElementsByClassName 的结果是一个真正的数组，您只需调用数组具有的 .forEach 方法即可。不幸的是，nodeList 相似但不相同 - 因此需要这样的函数。在我意识到没有它可能会更清楚之前，我使用了它。无论如何，我多次发现这个功能很方便。我会把它留在那里，作为对考虑这么有趣的问题的感谢。
function forEachNode(nodeList, func) {
var i, n = nodeList.length;
for (i = 0; i < n; i++) {
func(nodeList[i], i, nodeList);
}
}
window.addEventListener('load', mInit, false);
function typeWriter(el) {
var myDelay = el.getAttribute('keyDelay');
if (el.getAttribute('curIndex') == undefined)
el.setAttribute('curIndex', 0);
var curIndex = el.getAttribute('curIndex');
var curStr = el.getAttribute('typewriterdata');
el.innerHTML += curStr.charAt(curIndex);
curIndex++;
el.setAttribute('curIndex', curIndex);
if (curIndex < curStr.length)
setTimeout(callback, myDelay);
else {
if (el.getAttribute('nextline') != undefined) {
var nextTgt = el.getAttribute('nextline');
typeWriter(document.getElementById(nextTgt));
}
}
function callback() {
typeWriter(el);
}
}
function mInit() {
typeWriter(document.getElementById('line1'));
var i, n, elementList;
elementList = document.getElementsByClassName('autoType');
forEachNode(elementList, typeWriter);
// n = elementList.length;
// for (i=0; i<n; i++)
// typeWriter( elementList[i] );
}.multi {
border: solid 2px #333333;
width: 400px;
}<body>
<div class='autoType' typewriterdata='Enter this string letter by letter' keydelay='300'></div>
<div class='autoType' typewriterdata='Enter this string letter by letter' keydelay='200'></div>
<div class='autoType' typewriterdata='This is short but slooooow' keydelay='1000'></div>
<div class='autoType' typewriterdata='The rain falls mainly on the plain in Spain' keydelay='100'></div>
<div class='multi'>
<div id='line1' typewriterdata='This is line 1' keydelay='300' nextline='line2'></div>
<div id='line2' typewriterdata='This is line 2' keydelay='300' nextline='line3'></div>
<div id='line3' typewriterdata='This is line 3' keydelay='300' nextline='line4'></div>
<div id='line4' typewriterdata='This is line 4' keydelay='300'></div>
</div>
</body>| 归档时间： |
|
| 查看次数： |
3004 次 |
| 最近记录： |