我有一些实现打字机效果的 JS 代码。但是,如果在 google chrome 上一切正常,那么在 IE 中为什么会出现额外的缩进。
在 chrome 的控制台中,有 2 个缩进,即 3 个,为什么总是多一个,这是一个错误吗?
let textBox = document.querySelector('.index-title-main h1'),
text = textBox.innerText,
newHTML = '';
for(i = 0; i < text.length; i++){
newHTML += '<span>'+text[i]+'</span>';
}
textBox.innerHTML = newHTML;
let spans = textBox.querySelectorAll('span'),
count = 0,
timeout = 0;
function typing_text(){
spans[count].classList.add('visible');
if(spans[count].innerText == '\n' || spans[count].innerHTML == '\n'){
timeout = Math.floor(Math.random() * Math.floor(1000));
spans[count-1].classList.add('cursor');
}else{
timeout = 150;
}
if (count < text.length - 1){
setTimeout(function() {
Array.prototype.forEach.call(spans, function (e) {
e.classList.remove('cursor');
});
count ++;
typing_text();
}, timeout);
}
}
typing_text();
body{
background-color: #000;
}
.index-title-main{
color: #fff;
font-size: 25px;
height: 290px;
white-space: pre-wrap;
}
/* Animation */
.index-title-main h1 span {
visibility: hidden;
}
.index-title-main h1 span.visible {
visibility: visible;
}
.index-title-main h1 span.cursor {
background: #34DEB4;
width: 2px;
animation: blinking 0.5s step-start infinite;
}
<div class="index-title-main"><h1>Text 1 <br>Text 2, <br>Text 3</h1></div>
谷歌浏览器:
Internet Explorer 11: