javascript文字追加(javascript text append)

javascript文字追加(javascript text append)

我不知道如何描述这个，但我相信你会明白，如果你访问这个链接。 http://jsfiddle.net/pahnin/yN3xf/

我想用javascript将文本附加到ap元素并且我很成功，但是如果文本包含像<font>的标签，则标签显示为原样。

我应该添加代码来检测html元素，还是可以通过其他方式完成？ 如果我添加检测字体标记的代码如何将标记添加回文本？

I dont know how to describe this but I'm sure you'll understand if you visit this link. http://jsfiddle.net/pahnin/yN3xf/

I want to append text to a p element with javascript and I'm sucessful, but if the text contains a tag like <font> the tag is displayed as it is.

Should I add code to detect the html elements or it can be done any other means? if I do add code which detect font tag how to add the tag back to the text??

最满意答案

你可以这样做。 一旦所有文本都被写出，那么你用原始文本替换整个welcome html。 这不是我承认的最好的。

http://jsfiddle.net/yN3xf/13/

$(document).ready(function() { var htmlcopied = $('.welcome').html(); var textcopied = $('.welcome').text(); $('.welcome').text(''); function foobar(i) { if (i < textcopied.length) { $('.welcome').append(textcopied.charAt(i)); setTimeout(function() { foobar(i + 1); }, 80); } else { $('.welcome').html(htmlcopied); } } foobar(0); });

UPDATE

这应该通过不同的方式给你想要的效果。 它在原始文本的顶部有一个div，它缓慢显示文本，看起来它正在输入。

例

http://jsfiddle.net/guanome/LrbVy/

HTML

<div class="welcome">Hi, there <span class="hl">special text</span>, normal text <div class="overlay"></div> </div>

JavaScript的

$(document).ready(function() { $('.overlay').css('width', $('div.welcome').css('width')); $('.overlay').css('height', $('div.welcome').css('height') + 15); var origWidth = $('.overlay').css('width').replace(/px/g,''); foobar(origWidth); }); function foobar(i) { if (i > -10) { $('.overlay').css('width', i); setTimeout(function() { foobar(i - 10); }, 80); } }

CSS

.hl{ color: red; font-family: helvetica; background: #efefef; color: black; padding: 2px 7px; -moz-box-shadow: 0 1px 1px #CCCCCC; -webkit-box-shadow: 0 1px 1px #CCCCCC; box-shadow: 0 1px 1px #CCCCCC; } div.welcome { position: relative; width: 500px; } .overlay { position: absolute; right: 0; top: -3px; width: 100%; height: 25px; background-color: #FFF; z-index: 10; }

更新2

通过此更改，叠加层将动态添加到欢迎消息中，不必设置宽度，并且可以轻松地使用多行。

http://jsfiddle.net/guanome/LrbVy/4/

HTML

<div class="welcome">Hi, there <span class="hl">special text</span>, normal text</div>

JavaScript的

$(document).ready(function() { showWelcome(); }); function foobar(i, overlay) { if (i > -10) { overlay.css('width', i); setTimeout(function() { foobar(i - 10, overlay); }, 80); } else { overlay.remove(); } } function showWelcome() { var welcome = $('div.welcome'); welcome.append('<div class="overlay"></div>'); welcome.css('position', 'relative'); var overlay = $('.overlay'); overlay.css({ 'width': welcome.css('width'), 'height': (welcome.outerHeight() + 5), 'position': 'absolute', 'right': '0', 'top': '-3px', 'background-color': '#FFF', 'z-index': '10' }); var origWidth = overlay.css('width').replace(/px/g, ''); foobar(origWidth, overlay); }

You could do something like this. Once all the text has been written out, then you replace the whole html of welcome with the original text. It's not the best I admit.

http://jsfiddle.net/yN3xf/13/

$(document).ready(function() { var htmlcopied = $('.welcome').html(); var textcopied = $('.welcome').text(); $('.welcome').text(''); function foobar(i) { if (i < textcopied.length) { $('.welcome').append(textcopied.charAt(i)); setTimeout(function() { foobar(i + 1); }, 80); } else { $('.welcome').html(htmlcopied); } } foobar(0); });

UPDATE

This should give you the desired effect through different means. It has a div on top of the original text, and it slow reveals the text, which looks like it is being typed out.

Example

http://jsfiddle.net/guanome/LrbVy/

html

<div class="welcome">Hi, there <span class="hl">special text</span>, normal text <div class="overlay"></div> </div>

javascript

$(document).ready(function() { $('.overlay').css('width', $('div.welcome').css('width')); $('.overlay').css('height', $('div.welcome').css('height') + 15); var origWidth = $('.overlay').css('width').replace(/px/g,''); foobar(origWidth); }); function foobar(i) { if (i > -10) { $('.overlay').css('width', i); setTimeout(function() { foobar(i - 10); }, 80); } }

css

.hl{ color: red; font-family: helvetica; background: #efefef; color: black; padding: 2px 7px; -moz-box-shadow: 0 1px 1px #CCCCCC; -webkit-box-shadow: 0 1px 1px #CCCCCC; box-shadow: 0 1px 1px #CCCCCC; } div.welcome { position: relative; width: 500px; } .overlay { position: absolute; right: 0; top: -3px; width: 100%; height: 25px; background-color: #FFF; z-index: 10; }

UPDATE 2

With this change, the overlay will be added dynamically to the welcome message, the width doesn't have to be set, and it will work with multiple lines easily.

http://jsfiddle.net/guanome/LrbVy/4/

html

<div class="welcome">Hi, there <span class="hl">special text</span>, normal text</div>

javascript

$(document).ready(function() { showWelcome(); }); function foobar(i, overlay) { if (i > -10) { overlay.css('width', i); setTimeout(function() { foobar(i - 10, overlay); }, 80); } else { overlay.remove(); } } function showWelcome() { var welcome = $('div.welcome'); welcome.append('<div class="overlay"></div>'); welcome.css('position', 'relative'); var overlay = $('.overlay'); overlay.css({ 'width': welcome.css('width'), 'height': (welcome.outerHeight() + 5), 'position': 'absolute', 'right': '0', 'top': '-3px', 'background-color': '#FFF', 'z-index': '10' }); var origWidth = overlay.css('width').replace(/px/g, ''); foobar(origWidth, overlay); }