代码收藏：在两个页面之间传输文字、字体、字号等

作为一个外行，我在搞直播间滚动歌单的时候，想过很多办法，虽然最后选择了最简单的形式，比如直接通过富文本编辑器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>

打赏

原创文章，作者：李晋，如若转载，请注明出处：https://www.lijin.cc/blogs/548.html

代码收藏：在两个页面之间传输文字、字体、字号等

发表回复

评论列表（1条）

代码收藏：在两个页面之间传输文字、字体、字号等

相关推荐

发表回复

评论列表（1条）