html编程,要求:写一个网页,上面是显示区域,底部有一个输入框,输入一段代码点确定后一条一条的按格式显示到上面显示区域
时间: 2024-04-15 22:31:47 浏览: 26
您可以使用以下的HTML和JavaScript代码来实现您的要求:
```html
<!DOCTYPE html>
<html>
<head>
<title>代码显示</title>
<style>
#display {
width: 100%;
height: 300px;
border: 1px solid black;
overflow: auto;
padding: 10px;
}
</style>
<script>
function displayCode() {
var codeInput = document.getElementById("codeInput").value;
var lines = codeInput.split("\n");
var display = document.getElementById("display");
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
var formattedLine = document.createElement("pre");
formattedLine.innerText = line;
display.appendChild(formattedLine);
}
}
</script>
</head>
<body>
<div id="display"></div>
<textarea id="codeInput" rows="4" cols="50"></textarea>
<br />
<button onclick="displayCode()">确定</button>
</body>
</html>
```
这个网页会在上面的显示区域逐行显示您在输入框中输入的代码。当您点击"确定"按钮时,输入框中的代码会按照格式一行一行地显示在上面的显示区域中。每一行代码都会使用 `<pre>` 元素来保持原始格式。上面的显示区域同样使用了一个带有滚动条的 `<div>` 元素,以便在显示大段代码时能够方便地滚动查看。