Question

这是一个输入代码，使用jQuery

我如何使用自己的风格？

Forexmaple我想要这样的文字：

Hi. My <span style="text-decoration: underline;">name</span> is <span style="color: #ff0000;">Amir</span>. <strong>Nice too see you</strong> guys!

但正如您所见，在＆＃34;数据文本＆＃34;你不能，使用CSS样式和HTML标签。

我该怎么办？

守则：

＆＃13;

var $typer = $('.typer'),
    txt = $typer.data("text"),
    tot = txt.length,
    ch  = 0;

(function typeIt() {   
  if(ch > tot) return;
  $typer.text( txt.substring(0, ch++) );
  setTimeout(typeIt, ~~(Math.random()*(200-60+1)+60));
}());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="typer" data-text="Hi! My name is Al. I will guide you trough the Setup process."></span>

＆＃13;

Answer 1

您可以将data-text设置为html字符串，将.html()替换为.text()来电{/ 1}}

typeIt()

var $typer = $('.typer'),
    txt = $typer.data("text"),
    tot = txt.length,
    ch  = 0;

(function typeIt() {   
  if(ch > tot) return;
  $typer.html( txt.substring(0, ch++) );
  setTimeout(typeIt, ~~(Math.random()*(200-60+1)+60));
}());

或者，您可以创建<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="typer" data-text='Hi. My <span style="text-decoration: underline;">name</span> is <span style="color: #ff0000;">Amir</span>. <strong>Nice too see you</strong> guys! '></span>元素，获取<template>元素.content.childNodes;以template为参数调用Array.prototype.slice.call()。使用template.content.childNodes迭代Array.prototype.reduce() data-text字符串的所有节点，利用html参数.split()创建当前节点{{1}的每个字符的数组}。

在""回调中使用.textContent作为初始值，.reduce()构造函数等待Promise.resolve()持续时间到期，然后使用子节点的当前元素执行下一个任务。

检查节点是Promise()节点，如果是setTimeout，请使用#text设置true html，否则$typer存储{{ 1}}变量中的当前节点，在当前节点上调用.html(function)传递给false，.textContent节点传递给.empty()，迭代当前节点的jQuery()，在每个字符上调用.append()以设置附加节点的$typer。

.textContent

.html()

您自己的键入文本的样式

1 个答案: