https://codepen.io/-dhaval-/pen/yMJKgE
上面是我正在尝试这个的链接...
下面是代码:
function typeAp(target, toType, stepTime){
var n = 0;
var chars = Array.from(toType);
setInterval(function(){
$(target).append(chars[n]);
n++;
},stepTime);
};
typeAp('.init',"initializing",100);body{
background-color:#ccc;
}
.container{
display:flex;
width:100%;
height:100vh;
justify-content:center;
align-items:center;
}
.cmd{
background-color:#111;
border-radius:5px;
padding:20px;
width:600px;
height:200px;
}
p{
letter-spacing:2px;
white-space: nowrap;
overflow: hidden;
font-family:courier;
color:lime;
}
::selection{
background:#111;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p class="init">$Robot~ </p>
<p class="perc"> </p>
</div>
</div>
</body>我想在每个字符后添加闪烁的“_”，这样看起来就像输入了文本，感觉就像命令行。
建议任何错误，或者如果您愿意，我可以添加到此代码中的额外内容。
最佳答案
这是一个纯粹的jQuery解决方案，但也可以通过css来完成。
我已经为您的 typeAp 添加了一个回调函数，它会插入“_”并使其闪烁。
这会在写入完成时触发回调。
if (n == chars.length) {
callback(target)
}
function typeAp(target, toType, stepTime, callback) {
var n = 0;
var chars = Array.from(toType);
setInterval(function() {
$(target).append(chars[n]);
n++;
if (n == chars.length) {
callback(target)
}
}, stepTime);
};
typeAp('.init', "initializing", 100, function(target) {
$(target).append("<span class='blink'>_</span>")
function blinker() {
$('.blink').fadeOut(500);
$('.blink').fadeIn(500);
}
setInterval(blinker, 1000);
});body {
background-color: #ccc;
}
.container {
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
.cmd {
background-color: #111;
border-radius: 5px;
padding: 20px;
width: 600px;
height: 200px;
}
p {
letter-spacing: 2px;
white-space: nowrap;
overflow: hidden;
font-family: courier;
color: lime;
}
::selection {
background: #111;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p class="init">$Robot~ </p>
<p class="perc"> </p>
</div>
</div>
</body>关于javascript - 如何在每个字符后添加闪烁的 "_"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42649379/