4浏览 (712)
点赞 (4)
收藏
46条评论
请 登录后发表观点
。。。。这个应该复制到哪里啊。。。
点赞
评论
大佬好厉害，谢谢来源，学习一下
点赞
评论
更新复制功能（刚才那个有问题）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<style>
body {
background-color: black;
color: silver;
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
box-sizing: border-box;
position: relative;
min-height: 100vh;
}
body::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 2px solid #c0c0c0;
box-shadow: 0 0 15px rgba(192, 192, 192, 0.3);
z-index: 0;
pointer-events: none;
}
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(45deg,
rgba(192, 192, 192, 0.1) 25%,
transparent 25%,
transparent 75%,
rgba(192, 192, 192, 0.1) 75%),
linear-gradient(-45deg,
rgba(192, 192, 192, 0.1) 25%,
transparent 25%,
transparent 75%,
rgba(192, 192, 192, 0.1) 75%);
background-size: 40px 40px;
opacity: 0.3;
z-index: -1;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
position: relative;
background: black;
z-index: 1;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #f0f0f0;
text-shadow: 0 0 10px rgba(240, 240, 240, 0.5);
font-family: "Courier New", cursive;
margin: 20px 0;
}
@keyframes glow {
50% { opacity: 0.8; text-shadow: 0 0 20px rgba(255,255,255,1); }
}
.description { font-weight: bold; margin-bottom: 20px; }
.accordion, .panel {
background: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
font-family: Arial, sans-serif;
font-weight: bold;
color: black;
}
.panel { display: none; }
input, select, textarea, button {
width: 100%;
margin-top: 5px;
padding: 5px;
box-sizing: border-box;
}
textarea { resize: none; }
.worldview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
text-align: left;
}
textarea { resize: none; }
.character-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
text-align: left;
}
.option-section {
background: rgba(192, 192, 192, 2); /* 浅灰色半透明背景 */
padding: 10px;
border-radius: 5px;
margin: 10px 0;
}
.character-grid label,
.worldview-grid label {
display: flex;
align-items: center;
gap: 8px;
background: rgba(192, 192, 192, 0.05); /* 更浅的灰色背景 */
padding: 6px;
border-radius: 3px;
transition: all 0.2s;
}
.character-grid label:hover,
.worldview-grid label:hover {
background: rgba(192, 192, 192, 0.15);
}
.character-grid label input,
.worldview-grid label input {
order: 2; /* 将复选框移到文字后面 */
margin: 0;
width: auto;
}
#copyBtn {
margin-top: 10px;
padding: 8px 15px;
background: #c0c0c0;
color: black;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
#copyBtn:hover {
background: #a0a0a0;
}
</style>
</head>
<body>
<h1>标题</h1>
<p class="description">文字提示</p>
<div class="container">
<div class="accordion" onclick="togglePanel('notice')">注意事项</div>
<div id="notice" class="panel">事项</div>
<div class="accordion" onclick="togglePanel('customInfo')">自定义信息栏</div>
<div id="customInfo" class="panel">
<label>姓名：<input type="text" id="name"></label><br>
<label>性别：<input type="text" id="gender"></label><br>
<label>身高：<input type="text" id="height" style="width: calc(100% - 30px);"> cm</label><br>
<div class="option-section">
<label>世界观选择（可多选）：</label>
<div class="worldview-grid">
<label>【1】<input type="checkbox" name="worldview" value="【1】"></label>
<label>【2】<input type="checkbox" name="worldview" value="【2】"></label>
</div>
</div>
<label>1：</label><br>
<textarea id="description"></textarea><br>
<label>1：</label><br>
<textarea id="story"></textarea><br>
<button onclick="saveInfo()">保存信息</button>
<div id="savedInfo"></div>
</div>
</div>
<script>
function togglePanel(id) {
var panel = document.getElementById(id);
panel.style.display = (panel.style.display === "block") ? "none" : "block";
}
function saveInfo() {
// 获取各字段值（保持原样）
let name = document.getElementById("name").value;
let gender = document.getElementById("gender").value;
let height = document.getElementById("height").value;
let worldviews = [...document.querySelectorAll('input[name="worldview"]:checked')].map(e => e.value).join(', ');
let description = document.getElementById("description").value;
let story = document.getElementById("story").value;
// 创建纯文本版本
let textContent = `【开局引导】🕷️玩家信息:\n`
+ `姓名：${name}\n`
+ `性别：${gender}\n`
+ `身高：${height} cm\n`
+ `世界观选择：${worldviews}\n`
+ `1：${description}\n`
+ `1：${story}`;
// 更新显示内容（添加复制按钮和隐藏文本域）
document.getElementById("savedInfo").innerHTML = `
<strong>【开局引导】🕷️玩家信息:</strong><br>
<p><strong>姓名：</strong> ${name}</p>
<p><strong>性别：</strong> ${gender}</p>
<p><strong>身高：</strong> ${height} cm</p>
<p><strong>世界观选择：</strong> ${worldviews}</p>
<p><strong>玩家禁忌和癖好：</strong> ${description}</p>
<p><strong>心仪魔物娘：</strong> ${story}</p>
<button id="copyBtn" onclick="copyInfo()">📋 复制到剪贴板</button>
<textarea id="clipboardContent" style="position:absolute;left:-9999px;">${textContent}</textarea>
`;
}
function copyInfo() {
// 获取隐藏文本域内容
const textarea = document.getElementById("clipboardContent");
// 执行复制操作
textarea.select();
try {
document.execCommand("copy");
alert("✓ 信息已复制到剪贴板！");
} catch (err) {
// 备用方法：使用现代Clipboard API
navigator.clipboard.writeText(textarea.value)
.then(() => alert("✓ 信息已复制！"))
.catch(() => alert("⚠ 复制失败，请手动复制"));
}
}
</script>
</body>
</html>
点赞
评论
更新复制所保存信息功能
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<style>
body {
background-color: black;
color: silver;
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
box-sizing: border-box;
position: relative;
min-height: 100vh;
}
body::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 2px solid #c0c0c0;
box-shadow: 0 0 15px rgba(192, 192, 192, 0.3);
z-index: 0;
pointer-events: none;
}
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(45deg,
rgba(192, 192, 192, 0.1) 25%,
transparent 25%,
transparent 75%,
rgba(192, 192, 192, 0.1) 75%),
linear-gradient(-45deg,
rgba(192, 192, 192, 0.1) 25%,
transparent 25%,
transparent 75%,
rgba(192, 192, 192, 0.1) 75%);
background-size: 40px 40px;
opacity: 0.3;
z-index: -1;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
position: relative;
background: black;
z-index: 1;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #f0f0f0;
text-shadow: 0 0 10px rgba(240, 240, 240, 0.5);
font-family: "Courier New", cursive;
margin: 20px 0;
}
@keyframes glow {
50% { opacity: 0.8; text-shadow: 0 0 20px rgba(255,255,255,1); }
}
.description { font-weight: bold; margin-bottom: 20px; }
.accordion, .panel {
background: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
font-family: Arial, sans-serif;
font-weight: bold;
color: black;
}
.panel { display: none; }
input, select, textarea, button {
width: 100%;
margin-top: 5px;
padding: 5px;
box-sizing: border-box;
}
textarea { resize: none; }
.worldview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
text-align: left;
}
textarea { resize: none; }
.character-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
text-align: left;
}
.option-section {
background: rgba(192, 192, 192, 2); /* 浅灰色半透明背景 */
padding: 10px;
border-radius: 5px;
margin: 10px 0;
}
.character-grid label,
.worldview-grid label {
display: flex;
align-items: center;
gap: 8px;
background: rgba(192, 192, 192, 0.05); /* 更浅的灰色背景 */
padding: 6px;
border-radius: 3px;
transition: all 0.2s;
}
.character-grid label:hover,
.worldview-grid label:hover {
background: rgba(192, 192, 192, 0.15);
}
.character-grid label input,
.worldview-grid label input {
order: 2; /* 将复选框移到文字后面 */
margin: 0;
width: auto;
}
#copyBtn {
margin-top: 10px;
padding: 8px 15px;
background: #c0c0c0;
color: black;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
#copyBtn:hover {
background: #a0a0a0;
}
</style>
</head>
<body>
<h1>标题</h1>
<p class="description">文字提示</p>
<div class="container">
<div class="accordion" onclick="togglePanel('notice')">注意事项</div>
<div id="notice" class="panel">事项</div>
<div class="accordion" onclick="togglePanel('customInfo')">自定义信息栏</div>
<div id="customInfo" class="panel">
<label>姓名：<input type="text" id="name"></label><br>
<label>性别：<input type="text" id="gender"></label><br>
<label>身高：<input type="text" id="height" style="width: calc(100% - 30px);"> cm</label><br>
<div class="option-section">
<label>世界观选择（可多选）：</label>
<div class="worldview-grid">
&lt;label&gt;【1】&lt;input type=&#34;checkbox&#34; name=&#34;worldview&#34; value=&#34;【1】&#34;&gt;&lt;/label&gt;
&lt;label&gt;【2】&lt;input type=&#34;checkbox&#34; name=&#34;worldview&#34; value=&#34;【2】&#34;&gt;&lt;/label&gt;
&lt;label&gt;【3】&lt;input type=&#34;checkbox&#34; name=&#34;worldview&#34; value=&#34;【3】&#34;&gt;&lt;/label&gt;
&lt;label&gt;【4】&lt;input type=&#34;checkbox&#34; name=&#34;worldview&#34; value=&#34;【4】&#34;&gt;&lt;/label&gt;
&lt;label&gt;【5】&lt;input type=&#34;checkbox&#34; name=&#34;worldview&#34; value=&#34;【5】&#34;&gt;&lt;/label&gt;
&lt;label&gt;【6】&lt;input type=&#34;checkbox&#34; name=&#34;worldview&#34; value=&#34;【6】&#34;&gt;&lt;/label&gt;
&lt;label&gt;【7】&lt;input type=&#34;checkbox&#34; name=&#34;worldview&#34; value=&#34;【7】&#34;&gt;&lt;/label&gt;
&lt;label&gt;【8】&lt;input type=&#34;checkbox&#34; name=&#34;worldview&#34; value=&#34;【8】&#34;&gt;&lt;/label&gt;
</div>
</div>
<label>1：</label><br>
<textarea id="description"></textarea><br>
<label>1：</label><br>
<textarea id="story"></textarea><br>
<button onclick="saveInfo()">保存信息</button>
<div id="savedInfo"></div>
</div>
</div>
<script>
function togglePanel(id) {
var panel = document.getElementById(id);
panel.style.display = (panel.style.display === "block") ? "none" : "block";
}
function saveInfo() {
// 获取各字段值（保持原样）
let name = document.getElementById("name").value;
let gender = document.getElementById("gender").value;
let height = document.getElementById("height").value;
let worldviews = [...document.querySelectorAll('input[name="worldview"]:checked')].map(e => e.value).join(', ');
let description = document.getElementById("description").value;
let story = document.getElementById("story").value;
// 创建纯文本版本
let textContent = `【开局引导】🕷️玩家信息:\n`
+ `姓名：${name}\n`
+ `性别：${gender}\n`
+ `身高：${height} cm\n`
+ `世界观选择：${worldviews}\n`
+ `1：${description}\n`
+ `1：${story}`;
// 更新显示内容（添加复制按钮和隐藏文本域）
document.getElementById("savedInfo").innerHTML = `
<strong>【开局引导】🕷️玩家信息:</strong><br>
<p><strong>姓名：</strong> ${name}</p>
<p><strong>性别：</strong> ${gender}</p>
<p><strong>身高：</strong> ${height} cm</p>
<p><strong>世界观选择：</strong> ${worldviews}</p>
<p><strong>玩家禁忌和癖好：</strong> ${description}</p>
<p><strong>心仪魔物娘：</strong> ${story}</p>
<button id="copyBtn" onclick="copyInfo()">📋 复制到剪贴板</button>
<textarea id="clipboardContent" style="position:absolute;left:-9999px;">${textContent}</textarea>
`;
}
function copyInfo() {
// 获取隐藏文本域内容
const textarea = document.getElementById("clipboardContent");
// 执行复制操作
textarea.select();
try {
document.execCommand("copy");
alert("✓ 信息已复制到剪贴板！");
} catch (err) {
// 备用方法：使用现代Clipboard API
navigator.clipboard.writeText(textarea.value)
.then(() => alert("✓ 信息已复制！"))
.catch(() => alert("⚠ 复制失败，请手动复制"));
}
}
</script>
</body>
</html>
点赞
评论
才发现写完的上面不显示（跑走）
点赞
评论
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
<style>
body {
background-color: black;
color: silver;
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
box-sizing: border-box;
position: relative;
min-height: 100vh;
}
body::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 2px solid #c0c0c0;
box-shadow: 0 0 15px rgba(192, 192, 192, 0.3);
z-index: 0;
pointer-events: none;
}
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(45deg,
rgba(192, 192, 192, 0.1) 25%,
transparent 25%,
transparent 75%,
rgba(192, 192, 192, 0.1) 75%),
linear-gradient(-45deg,
rgba(192, 192, 192, 0.1) 25%,
transparent 25%,
transparent 75%,
rgba(192, 192, 192, 0.1) 75%);
background-size: 40px 40px;
opacity: 0.3;
z-index: -1;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
position: relative;
background: black;
z-index: 1;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #f0f0f0;
text-shadow: 0 0 10px rgba(240, 240, 240, 0.5);
font-family: "Courier New", cursive;
margin: 20px 0;
}
@keyframes glow {
50% { opacity: 0.8; text-shadow: 0 0 20px rgba(255,255,255,1); }
}
.description { font-weight: bold; margin-bottom: 20px; }
.accordion, .panel {
background: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
font-family: Arial, sans-serif;
font-weight: bold;
color: black;
}
.panel { display: none; }
input, select, textarea, button {
width: 100%;
margin-top: 5px;
padding: 5px;
box-sizing: border-box;
}
textarea { resize: none; }
.worldview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
text-align: left;
}
textarea { resize: none; }
.character-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
text-align: left;
}
.option-section {
background: rgba(192, 192, 192, 2); /* 浅灰色半透明背景 */
padding: 10px;
border-radius: 5px;
margin: 10px 0;
}
.character-grid label,
.worldview-grid label {
display: flex;
align-items: center;
gap: 8px;
background: rgba(192, 192, 192, 0.05); /* 更浅的灰色背景 */
padding: 6px;
border-radius: 3px;
transition: all 0.2s;
}
.character-grid label:hover,
.worldview-grid label:hover {
background: rgba(192, 192, 192, 0.15);
}
.character-grid label input,
.worldview-grid label input {
order: 2; /* 将复选框移到文字后面 */
margin: 0;
width: auto;
}
</style>
</head>
<body>
<h1>抬头logo</h1>
<p class="description">题词简介</p>
<div class="container">
<div class="accordion" onclick="togglePanel('notice')">栏位一</div>
<div id="notice" class="panel">栏位一）</div>
<div class="accordion" onclick="togglePanel('customInfo')">自定义信息栏</div>
<div id="customInfo" class="panel">
<label>姓名：<input type="text" id="name"></label><br>
<label>性别：<input type="text" id="gender"></label><br>
<label>身高：<input type="text" id="height" style="width: calc(100% - 30px);"> cm</label><br>
<div class="option-section">
<label>视角：</label>
<div class="character-grid">
<label>【a】<input type="checkbox" name="character" value="【a】"></label>
<label>【b】<input type="checkbox" name="character" value="【b】"></label>
</div>
</div>
<div class="option-section">
<label>世界观选择（可多选）：</label>
<div class="worldview-grid">
<label>【1】<input type="checkbox" name="worldview" value="【1】"></label>
<label>【2】<input type="checkbox" name="worldview" value="【2】"></label>
<label>【3】<input type="checkbox" name="worldview" value="【3】"></label>
<label>【4】<input type="checkbox" name="worldview" value="【4】"></label>
<label>【5】<input type="checkbox" name="worldview" value="【5】"></label>
<label>【6】<input type="checkbox" name="worldview" value="【6】"></label>
<label>【7】<input type="checkbox" name="worldview" value="【7】"></label>
<label>【8】<input type="checkbox" name="worldview" value="【8】"></label>
</div>
</div>
<label>简述：</label><br>
<textarea id="description"></textarea><br>
<label>描述：</label><br>
<textarea id="story"></textarea><br>
<button onclick="saveInfo()">保存信息</button>
<div id="savedInfo"></div>
</div>
</div>
<script>
function togglePanel(id) {
var panel = document.getElementById(id);
panel.style.display = (panel.style.display === "block") ? "none" : "block";
}
function saveInfo() {
let name = document.getElementById("name").value;
let gender = document.getElementById("gender").value;
let height = document.getElementById("height").value;
let character = [...document.querySelectorAll('input[name="character"]:checked')].map(e => e.value).join(', ');
let worldviews = [...document.querySelectorAll('input[name="worldview"]:checked')].map(e => e.value).join(', ');
let description = document.getElementById("description").value;
let story = document.getElementById("story").value;
document.getElementById("savedInfo").innerHTML = `
<strong>【开始游戏】🕷️玩家信息:</strong><br>
<p><strong>姓名：</strong> ${name}</p>
<p><strong>性别：</strong> ${gender}</p>
<p><strong>身高：</strong> ${height} cm</p>
<p><strong>视角：</strong> ${character}</p>
<p><strong>世界观选择：</strong> ${worldviews}</p>
<p><strong>简述：</strong> ${description}</p>
<p><strong>描述：</strong> ${story}</p>
`;
}
</script>
</body>
</html>
点赞
评论