🕷️Kui
发布于

自定义信息输入栏开源（代码在评论区）

更新复制功能 标题

标题

文字提示

注意事项
事项
自定义信息栏







开源分享区
浏览 (741)
点赞 (4)
收藏
6条评论
陈默
陈默
。。。。这个应该复制到哪里啊。。。
点赞
评论
萌新海宝宝
萌新海宝宝
大佬好厉害，谢谢来源，学习一下
点赞
评论
🕷️Kui
🕷️Kui
更新复制功能（刚才那个有问题） <!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>
点赞
评论
🕷️Kui
🕷️Kui
更新复制所保存信息功能 <!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> <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>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>
点赞
评论
🕷️Kui
🕷️Kui
才发现写完的上面不显示（跑走）
点赞
评论
🕷️Kui
🕷️Kui
<!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>
点赞
评论