首页使用javaScript写一个逐步打字并可以删除内容的网页

使用javaScript写一个逐步打字并可以删除内容的网页

时间: 2024-02-16 20:04:38 浏览: 49

可以使用以下代码实现一个逐步打字并可以删除内容的网页： ```html <!DOCTYPE html> <html> <head> <title>Typing Effect</title> </head> <body> <div id="typing"></div> <script type="text/javascript"> var text = "This is a typing effect demo!"; // 要逐步打印的文本 var index = 0; // 当前打印的字符下标 var speed = 100; // 打印速度，每个字符之间的间隔时间（毫秒） var deleteSpeed = 50; // 删除速度，每个字符之间的间隔时间（毫秒） var deleting = false; // 是否正在删除文本 function type() { var typingDiv = document.getElementById("typing"); if (!deleting) { // 正在打印文本 typingDiv.innerHTML += text.charAt(index); // 将当前字符添加到div中 index++; // 将下标移动到下一个字符 if (index >= text.length) { // 打印完毕 deleting = true; setTimeout(type, speed); // 停顿一会儿再开始删除 } else { setTimeout(type, speed); // 继续打印下一个字符 } } else { // 正在删除文本 typingDiv.innerHTML = text.substring(0, index - 1); // 将当前字符从div中删除 index--; // 将下标移动到上一个字符 if (index == 0) { // 删除完毕 deleting = false; setTimeout(type, speed); // 停顿一会儿再开始打印 } else { setTimeout(type, deleteSpeed); // 继续删除上一个字符 } } } type(); // 开始打印 </script> </body> </html> ``` 上述代码定义了一个 `type()` 函数，该函数通过控制 `setTimeout` 函数的调用实现了逐步打字和删除的效果。首先在 `div` 中显示文本的每个字符，直到显示完毕，然后再逐个删除字符，最终回到原始状态。你可以根据自己的需要调整打印速度、删除速度等参数。

阅读全文