我想逐个字母地淡入网站 - 但 JS 似乎搞乱了格式 - 你能告诉我这段代码中的错误是什么吗（见下文） - 我在这里部署了当前版本 - http://digitale -anamnese.com/results2.html - 在那里你可以看到问题。
干杯， 弗洛里安
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ihre Ergebnisse</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.results-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 800px;
margin: 40px auto;
}
h1, h3 {
color: #333;
}
p, ul {
font-size: 16px;
line-height: 1.6;
color: #666;
}
a {
color: #3498db;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom: 20px;
}
.highlight {
font-weight: bold;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.results-container');
const originalHTML = container.innerHTML;
container.innerHTML = ''; // Clear the container
let i = 0;
function typeCharacter() {
if (i < originalHTML.length) {
if (originalHTML[i] === "<") {
// If we encounter an opening tag, add the entire tag at once
const closingTagIndex = originalHTML.indexOf(">", i);
container.innerHTML += originalHTML.slice(i, closingTagIndex + 1);
i = closingTagIndex + 1;
} else if (originalHTML[i] === "&") {
// Handle HTML entities (like )
const entityEndIndex = originalHTML.indexOf(";", i);
container.innerHTML += originalHTML.slice(i, entityEndIndex + 1);
i = entityEndIndex + 1;
} else {
container.innerHTML += originalHTML[i];
i++;
}
setTimeout(typeCharacter, 10); // Adjust this value to control typing speed
}
}
typeCharacter(); // Start the typing effect
});
</script>
</head>
<body>
<div class="results-container">
<h1>Diese Förderungen kommen in Frage</h1>
<h3>Deutschland-Spezifische Förderungen</h3>
<ul>
<li>
<span class="highlight">Zentrales Innovationsprogramm Mittelstand (ZIM)</span>
<ul>
<li><strong>Ziel:</strong> Förderung von Innovationsprojekten</li>
<li><strong>Förderquote:</strong> Bis zu 45% der förderfähigen Kosten</li>
<li><strong>Wichtige Kriterien:</strong> Innovationsgrad, Marktpotenzial, technologische Machbarkeit</li>
<li><strong>Webseite:</strong> <a href="https://www.zim.de/ZIM/Navigation/DE/Home/home.html" target="_blank">ZIM Webseite</a></li>
</ul>
</li>
<!-- ... Add other Deutschland-Spezifische Förderungen here ... -->
</ul>
<h3>EU-Förderungen</h3>
<ul>
<li>
<span class="highlight">Horizon Europe</span>
<ul>
<li><strong>Ziel:</strong> Forschung und Innovation</li>
<li><strong>Förderquote:</strong> In der Regel bis zu 100% der förderfähigen Kosten</li>
<li><strong>Wichtige Kriterien:</strong> Wissenschaftliche Exzellenz, gesellschaftliche Relevanz, europäische Zusammenarbeit</li>
<li><strong>Webseite:</strong> <a href="https://ec.europa.eu/info/horizon-europe_en" target="_blank">Horizon Europe Webseite</a></li>
</ul>
</li>
<!-- ... Add other EU-Förderungen here ... -->
</ul>
<p>Diese Programme haben unterschiedliche Anforderungen, Fristen und Auswahlverfahren. Es ist daher ratsam, sich gründlich über die einzelnen Programme zu informieren und eventuell eine professionelle Beratung in Anspruch zu nehmen.</p>
</div>
</body>
</html>
这是我尝试过的 - http://digitale-anamnese.com/results2.html 我期望格式（h1 标签等/列表格式）完好无损，但正如你所看到的，它有点混乱。
KR
正如@RUKAclMortality 所指出的，克隆成功了:-)
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.results-container');
const clonedContainer = container.cloneNode(true); // Clone the container with all its content
container.innerHTML = ''; // Clear the container
function typeNode(node, targetContainer) {
if (node.nodeType === Node.TEXT_NODE) {
// If it's a text node, type its content character by character
let i = 0;
function typeCharacter() {
if (i < node.nodeValue.length) {
targetContainer.append(node.nodeValue[i]);
i++;
setTimeout(typeCharacter, 10);
}
}
typeCharacter();
} else if (node.nodeType === Node.ELEMENT_NODE) {
// If it's an element node, clone it without its children
const clonedNode = node.cloneNode(false);
targetContainer.appendChild(clonedNode);
// Recursively type the children of this node
let childIndex = 0;
function typeChild() {
if (childIndex < node.childNodes.length) {
typeNode(node.childNodes[childIndex], clonedNode);
childIndex++;
setTimeout(typeChild, 10);
}
}
typeChild();
}
}
typeNode(clonedContainer, container);
});
</script>````
试试这个，我使用的 typed.min.js 适用于所有格式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Effect Website</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<h1>Typing Effect Website</h1>
<div id="typewriter-content">
<p>Welcome to our typing effect website. This is a <strong>demo</strong> of a typewriter effect that supports various HTML tags.</p>
<p>You can use <em>italics</em>, make text <span style="color: blue;">colored</span>, and even add links: <a href="https://www.example.com" target="_blank">Example Website</a></p>
<ul>
<li>This is a list item</li>
<li>Another list item</li>
<li>And one more</li>
</ul>
<p>Feel free to edit the content and add more HTML tags as needed.</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
<script>
const targetElement = document.getElementById("typewriter-content");
const textToType = targetElement.innerHTML;
targetElement.innerHTML = ''; // Clear the initial content
const options = {
strings: [textToType],
typeSpeed: 10, // Adjust the speed (milliseconds per character) as needed
};
const typed = new Typed(targetElement, options);
</script>
</body>
</html>