作为一个外行，我在搞直播间滚动歌单的时候，想过很多办法，虽然最后选择了最简单的形式，比如直接通过富文本编辑器PO过去，直接在同一个页面展示，但其实别的办法我也有尝试，而且有一些挺好的启示。
在A页面填写数值，如文字内容、字号、颜色等，在B页面预览展示。代码比较简单，其中我将A页面的文本在B页面识别换行操作，这样不至于所有文字乱作一团。
当然，这只是一个雏形，更多的用途或尝试，你可以拿去借鉴。
A页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>输入页面</title> </head> <body> <h1>输入页面</h1> <form action="preview.html" method="get"> <label for="textContent">文字内容:</label> <textarea id="textContent" name="textContent" rows="5" cols="30"></textarea><br> <label for="fontSize">文字大小:</label> <select id="fontSize" name="fontSize"> <option value="12">12px</option> <option value="14">14px</option> <option value="16">16px</option> <option value="18">18px</option> <option value="20">20px</option> <option value="32">32px</option> <option value="48">48px</option> <option value="64">64px</option> </select><br> <label for="textColor">文字颜色:</label> <input type="color" id="textColor" name="textColor" value="#000000"><br> <label for="fontFamily">字体:</label> <select id="fontFamily" name="fontFamily"> <option value="Arial">Arial</option> <option value="Courier New">Courier New</option> <option value="Times New Roman">Times New Roman</option> <option value="Verdana">Verdana</option> <!-- 添加本地字体选项 --> <option value="字体1">字体1</option> <option value="字体2">字体2</option> <option value="字体3">字体3</option> </select><br> <input type="submit" value="提交并预览"> </form> </body> </html>
B页面：
</pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>预览页面</title>
<style>
#preview {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
font-family: Arial, sans-serif; /* 默认字体 */
}
</style>
</head>
<body>
<h1>预览页面</h1>
<div id="preview">
<!-- 使用JavaScript动态设置内容 -->
</div>
<script>
// 获取URL中的查询参数
function getQueryParam(name) {
var match = RegExp('[?&]' + name + '=([^&#]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
// 设置预览内容
var textContent = getQueryParam('textContent');
var fontSize = getQueryParam('fontSize') || '16';
var textColor = getQueryParam('textColor') || '#000000';
var fontFamily = getQueryParam('fontFamily') || 'Arial'; // 默认字体
// 将换行符转换为<br>标签
textContent = textContent.replace(/\n/g, '<br>');
var previewElement = document.getElementById('preview');
previewElement.style.fontSize = fontSize + 'px';
previewElement.style.color = textColor;
previewElement.style.fontFamily = fontFamily;
previewElement.innerHTML = textContent;
</script>
</body>
</html>
<pre>
