Javascript 如何添加闪烁“_&引用；在每个字符之后？

上面是我尝试这个的链接

下面是代码：

函数类型ap（目标、toType、stepTime）{
var n=0；
var chars=Array.from（toType）；
setInterval（函数（）{
$（目标）.append（字符[n]）；
n++；
}，步进时间）；
};
typeAp（'.init'，“初始化”，100）
正文{
背景色：#ccc；
}
.集装箱{
显示器：flex；
宽度：100%；
高度：100vh；
证明内容：中心；
对齐项目：居中；
}
.cmd{
背景色：#111；
边界半径：5px；
填充：20px；
宽度：600px；
高度：200px；
}
p{
字母间距：2px；
空白：nowrap；
溢出：隐藏；
字体系列：信使；
颜色：青柠；
}
：：选择{
背景：#111；
}

$Robot~

您可以使用
伪元素和简单动画：

.init::after {
  content: '_';
  display: inline-block;
  animation: flash 1s linear infinite;
}

@keyframes flash {
  50% {
    opacity: 0;
  }
}

将光标添加到HTML：

body
  .container
    .cmd
      p.init
        span.prompt $Robot~ 
        span.cursor _
      p.perc

设置光标的样式：

.cursor {
  animation: blink 1s linear infinite;
}

@keyframes blink {  
  50% { opacity: 0; }
}

并将JS更改为针对新的
span
：

typeAp('.prompt',"initializing",100);

这是一个纯粹的
jQuery
解决方案，但也可以通过css来完成

我在你的
typeAp
中添加了一个
回调函数
，它插入了“\ux”并使其闪烁

这将在完成写入时触发回调

if (n == chars.length) {
    callback(target)
}


函数类型ap（目标、toType、stepTime、回调）{
var n=0；
var chars=Array.from（toType）；
setInterval（函数（）{
$（目标）.append（字符[n]）；
n++；
if（n==字符长度）{
回调（目标）
}
}，步进时间）；
};
typeAp（'.init'，“初始化”，100，函数（目标）{
$（目标）。追加（“\u”）
函数闪烁器（）{
$（'.blink'）。淡出（500）；
$（'.blink'）.fadeIn（500）；
}
设置间隔（闪烁，1000）；
});
正文{
背景色：#ccc；
}
.集装箱{
显示器：flex；
宽度：100%；
高度：100vh；
证明内容：中心；
对齐项目：居中；
}
.cmd{
背景色：#111；
边界半径：5px；
填充：20px；
宽度：600px；
高度：200px；
}
p{
字母间距：2px；
空白：nowrap；
溢出：隐藏；
字体系列：信使；
颜色：青柠；
}
：：选择{
背景：#111；
}

$Robot~

添加到样式

  .init::after {
  content: '_';
  animation: blink 0.2s linear infinite;
  }

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opaicty: 1;
  }
}

使用jQuery的可能解决方案：


函数类型ap（目标、toType、stepTime）{
$（'.dash'）.hide（）；
var n=0；
var chars=Array.from（toType）；
var interval=setInterval（函数（）{
$（目标）.append（字符[n]）；
n++；
如果（n>=字符长度）{
间隔时间；
$（'.dash'）.show（）；
}
}，步进时间）；
};
setInterval（函数（）{
$（'.dash'）.toggleClass（'hide'）；
}, 700);
typeAp（'.text'，“initialized”，100）
正文{
背景色：#ccc；
}
.集装箱{
显示器：flex；
宽度：100%；
高度：100vh；
证明内容：中心；
对齐项目：居中；
}
.cmd{
背景色：#111；
边界半径：5px；
填充：20px；
宽度：600px；
高度：200px；
}
p{
字母间距：2px；
空白：nowrap；
溢出：隐藏；
字体系列：信使；
颜色：青柠；
}
.破折号{
不透明度：0；
}
：：选择{
背景：#111；
}


$Robot~_

使用CSS和伪元素
:after


函数类型ap（目标、toType、stepTime）{
target=$（target.addClass（'typing'）；
var n=0；
var chars=Array.from（toType）；
var interval=setInterval（函数（）{
target.append（chars[n]）；
n++；
如果（n>=字符长度）{
间隔时间；
target.removeClass（'typing'）；
}
}，步进时间）；
};
typeAp（'.init'，“初始化”，100）
正文{
背景色：#ccc；
}
.集装箱{
显示器：flex；
宽度：100%；
高度：100vh；
证明内容：中心；
对齐项目：居中；
}
.cmd{
背景色：#111；
边界半径：5px；
填充：20px；
宽度：600px；
高度：200px；
}
p{
字母间距：2px；
空白：nowrap；
溢出：隐藏；
字体系列：信使；
颜色：青柠；
}
.init:not（.typing）：：之后{
内容:""；
动画：闪烁1s轻松。5s无限；
不透明度：0；
}
@关键帧闪烁{
50% {
不透明度：1；
}
}
：：选择{
背景：#111；
}

$Robot~

在这里：（文本添加到
p
内的
span
，后面是包含光标的动画
span
）