制作一个页面,页面上包含一个文本框、一个“开始”按钮、一个“暂停”按钮,用户点击“开始”按钮后,网页中从左到右以打字机效果(文字单个增加),循环显示用户输入的文本。用户点击“暂停”按钮时,暂停效果;
时间: 2023-06-19 19:09:04 浏览: 40
以下是一个简单的示例代码,实现了您所需的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>打字机效果</title>
<style>
#text {
font-size: 24px;
font-family: Arial;
margin: 20px;
padding: 10px;
border: 1px solid black;
height: 50px;
width: 500px;
overflow: hidden;
}
</style>
</head>
<body>
<input type="text" id="input" placeholder="请输入文本">
<button id="start">开始</button>
<button id="pause">暂停</button>
<div id="text"></div>
<script>
var input = document.getElementById("input");
var startButton = document.getElementById("start");
var pauseButton = document.getElementById("pause");
var text = document.getElementById("text");
var intervalId;
function startTyping() {
var i = 0;
var typedText = input.value;
intervalId = setInterval(function() {
if (i <= typedText.length) {
text.innerHTML = typedText.slice(0, i);
i++;
} else {
i = 0;
}
}, 100);
}
function pauseTyping() {
clearInterval(intervalId);
}
startButton.addEventListener("click", startTyping);
pauseButton.addEventListener("click", pauseTyping);
</script>
</body>
</html>
```
以上代码使用了 HTML、CSS 和 JavaScript 来实现您所需的功能。页面上有一个文本框用于用户输入文本,两个按钮用于开始和暂停打字机效果,以及一个用于显示效果的文本框。在 JavaScript 中,我们使用 setInterval 函数来实现每隔一定时间显示下一个字符的效果,并使用 clearInterval 函数来停止打字机效果。