猿问

单个元素的打字效果

我想创建一个打字效果，但只针对单个元素<p>，而不是整个页面主体，此代码片段可以完美运行，但它会为整个页面创建效果，我不知道Javascript。


var str = document.body.innerHTML.toString();

var i = 0;

document.body.innerHTML = "";


setTimeout(function() {

    var se = setInterval(function() {

        i++;

        document.body.innerHTML = str.slice(0, i) + "|";

        if (i == str.length) {

            clearInterval(se);

            document.body.innerHTML = str;

        }

    }, 10);

});


感谢您提供的任何帮助。


波斯汪
浏览 176回答 3
3回答

HUWWW

你完成了几乎所有的工作，你错过的是你必须选择你想要修改的元素：创建一个<p>（或任何其他标签，没有限制）添加一个id标签在你的js中选择标签document.getElementById()将代码段中的每个实例替换document.body为所选元素我删除了它，因为它什么也setTimeout没给 imo，如果您的情况需要，请随时将其添加var回去letconst element = document.getElementById("typed")let str = element.innerHTML;let i = 0;element.innerHTML = "";let se = setInterval(function() {&nbsp; &nbsp; i++;&nbsp; &nbsp; element.innerHTML = str.slice(0, i) + "|";&nbsp; &nbsp; if (i == str.length) {&nbsp; &nbsp; &nbsp; &nbsp; clearInterval(se);&nbsp; &nbsp; &nbsp; &nbsp; element.innerHTML = str;&nbsp; &nbsp; }}, 100);&nbsp;// I slowed the interval to make it more visible it only type the center elementtext shown everytime<p id="typed">this text will be typed</p>this text shown everytime too如果需要，第二个代码段允许您在同一页面中输入多个消息const elements = document.getElementsByClassName("typed")Array.from(elements).forEach(el => {&nbsp; let str = el.innerHTML;&nbsp; let i = 0;&nbsp; el.innerHTML = "";&nbsp;&nbsp;&nbsp; let se = setInterval(function() {&nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; &nbsp; el.innerHTML = str.slice(0, i) + "|";&nbsp; &nbsp; &nbsp; if (i == str.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(se);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.innerHTML = str;&nbsp; &nbsp; &nbsp; }&nbsp; }, 100);})text shown everytime<p class="typed">this text will be typed</p>this text shown everytime too<p class="typed">this text will be typed too</p>
0

BIG阳

首先为需要打字效果的元素添加ID属性。var str = document.getElementById("heading").innerHTML.toString();var i = 0;document.getElementById("heading").innerHTML = "";setTimeout(function() {&nbsp; &nbsp; var se = setInterval(function() {&nbsp; &nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("heading").innerHTML = str.slice(0, i) + "|";&nbsp; &nbsp; &nbsp; &nbsp; if (i == str.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(se);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("heading").innerHTML = str;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, 10);});<html><body>Text without typing effect<p id="heading">Text with typing effect</p></body></html>
0

森栏

你只需要getElementById和 两个spans，为了让它有点真实，一个模拟光标的动画。如果您愿意，她是更高级的代码。let span = document.getElementById( 'typewriter')const text = 'How are you today?';const length = text.length;span.innerText = '';let index = 0;let se = setInterval(function() {&nbsp; &nbsp; span.innerText = text.slice(0, index);&nbsp; &nbsp; if (index++ == text.length) {&nbsp; &nbsp; &nbsp; &nbsp; clearInterval(se);&nbsp; &nbsp; &nbsp; &nbsp; span.innerText = text.slice(0, index);&nbsp; &nbsp; }}, 100);&nbsp;#cursor {&nbsp; white-space: pre;&nbsp; background-color: #f00;&nbsp; animation-name: cursor;&nbsp; animation-duration: 1s;&nbsp; animation-timing-function: cubic-bezier(0, 1, 0, 1);&nbsp; animation-delay: 0s;&nbsp; animation-iteration-count: infinite;&nbsp; animation-direction: normal;&nbsp; animation-fill-mode: none;&nbsp; animation-play-state: running;}@keyframes cursor {&nbsp; &nbsp;0% {&nbsp; &nbsp; &nbsp;opacity: 1; }&nbsp; 50% {&nbsp; &nbsp; &nbsp;opacity: 0; }&nbsp; 100% {&nbsp; &nbsp; &nbsp;opacity: 1; }&nbsp;}<!DOCTYPE html><html><head>&nbsp; <meta charset="UTF-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=">&nbsp; <title></title></head><body>&nbsp; <span id='typewriter'></span>&nbsp; <span id='cursor'>_</span></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答