要在前端实现用户输入内容,然后点击按钮,在另一个页面预览显示效果,你可以使用HTML、CSS和JavaScript来完成这个任务。以下是一个简单的示例:
- 创建一个HTML文件(例如index.html)作为你的输入页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入内容预览</title>
</head>
<body>
<h1>输入内容:</h1>
<textarea id="inputText" rows="4" cols="50"></textarea>
<button onclick="preview()">预览</button>
<script>
function preview() {
const inputText = document.getElementById("inputText").value;
localStorage.setItem("previewContent", inputText);
window.open("preview.html", "_blank");
}
</script>
</body>
</html>
在上面的示例中,我们创建了一个包含文本输入框和一个预览按钮的HTML页面。当用户输入内容并点击预览按钮时,它将文本内容存储在localStorage中,并打开一个新的窗口或标签页(在新页面中显示预览)。
- 创建另一个HTML文件(例如preview.html),用于显示预览内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>预览页面</title>
</head>
<body>
<h1>预览内容:</h1>
<div id="previewContent"></div>
<script>
const previewContent = localStorage.getItem("previewContent");
if (previewContent) {
document.getElementById("previewContent").textContent = previewContent;
}
</script>
</body>
</html>
在这个示例中,我们创建了一个新的HTML页面(preview.html),用于显示预览内容。它通过从localStorage中获取内容并将其显示在页面上来实现预览。
当用户在输入页面输入内容并点击预览按钮时,它会打开一个新的页面(preview.html),在那里用户可以看到输入的内容的预览效果。