|
|
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>音画帖快手</title>
<meta name="author" content="mhh" />
<meta name="keywords" content="tzmaker2026,lrc" />
<meta name="description" content="快速制作音画帖" />
</head>
<body style="background: #666; color: white;">
<style>
.mainBox { --xx: 0px; margin: 30px 0; left: calc(50% - var(--xx)); transform: translateX(-50%); width: 98vw; height: 86vh; background: white; color: black; padding: 0 20px; border-radius: 8px; box-sizing: border-box; display: flex; flex-direction: row; gap: 5px; position: relative; }
.item { flex-grow: 1; box-sizing: border-box; padding: 10px; display: flex; gap: 10px; flex-direction: column; }
.item div { flex-grow: 0; font-size: 18px; display: flex; gap: 10px; }
.item div:nth-of-type(2) { flex-grow: 2; background: #ccc; }
.item div:nth-of-type(2) textarea { flex-grow: 1; box-sizing: border-box; resize: none; overflow: auto; padding: 10px; font: normal 16px/1.2 monospace; background: beige; color: black; }
.mainBox button { outline: none; border: none; box-shadow: 0 0 2px gray; border-radius: 16px; padding: 6px 20px; }
.mainBox button:hover { color: red; box-shadow: 1px 1px 8px gray; }
#previewBox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,.99); display: none; padding: 0; overflow: hidden; z-index: 1000; margin: 0; }
#previewBox::after { position: absolute; content: '关闭预览'; top: 20px; right: 20px; padding: 0 4px; width: 80px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #efe; border-radius: 6px; background: #eee; color: red; font-size: 14px; box-shadow: 2px 2px 6px rgba(0,0,0,.25); cursor: pointer; }
#previewBox iframe { position: relative; width: 100%; height: 100%; border: none; outline: none; box-sizing: border-box; margin: 0; }
#copyMsg { position: fixed; top: 50%; right: 50%; background: #333; color: #fff; padding: 10px 15px; border-radius: 4px; opacity: 0; display: none; transition: opacity 0.3s; }
.wrapper { position: absolute; transform: translate(0, -30px); border-radius: 8px 8px 0 0; background: white; padding: 5px 16px 5px 8px; }
.grow2 { flex-grow: 2; }
.tMid { text-align: center; }
</style>
<h2 class="tMid">音画帖快手</h2>
<div class="mainBox">
<div class="wrapper" title="点击切换单曲/专辑
注意：代码会重置！">
<input type="checkbox" id="mMusic" name="mMusic">
<label for="mMusic" >专辑</label>
</div>
<div class="item">
<div><span>CSS代码</span></div>
<div><textarea></textarea></div>
<div>
<button value="0">重置CSS代码</button>
</div>
</div>
<div class="item">
<div>html代码</div>
<div><textarea></textarea></div>
<div>
<button value="1">重置HTML代码</button>
</div>
</div>
<div class="item">
<div>
<span>JS代码</span>
<span class="grow2"></span>
<button value="3">预览帖子效果</button>
</div>
<div><textarea></textarea></div>
<div>
<button value="2">重置JS代码</button>
<span class="grow2"></span>
<button value="4">复制帖子代码</button>
</div>
</div>
</div>
<div id="previewBox"></div>
<div id="copyMsg">showToast</div>
<script>
const tzBasicCodes = [`<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css';
.pa { --bg: url('背景图片') no-repeat center/cover; }
.player { bottom: 50px; width: 120px; height: 120px; }
.bgprog { bottom: 20px; }
.btnFs { left: 30px; top: 30px; color: lightblue; }
/* .lrc { top: 30px; } */
</style>`,
`<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=歌曲ID" autoplay loop></audio>
<!--<video class="pd-vid" src="熊猫视频" autoplay loop muted></video>-->
<!--<div class="lrc">LRC</div>-->
<img src="小播图片" class="player rotate" title="Alt+X" alt="">
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>`,
`\<script\>
/* lrc歌词同步
var gc = \`
[00:01.300]歌词
[00:04.260]歌词\`;
*/
loadJs('https://638183.freep.cn/638183/tzmaker/tz2026.min.js');
function loadJs(url, callback) {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.defer = true;
script.onload = () => {
var tz = TZ('pa');
tz.start(); // tz.start(gc);
};
document.head.appendChild(script);
}
\</script\>`];
const mtzBasicCodes = [`<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026m.css';
.pa { --bg: url('背景图片') no-repeat center/cover; }
.mlist { left: 30px; top: 20px; }
.player { bottom: 50px; }
.bgprog { bottom: 20px; }
.btnFs { right: 30px; top: 30px; color: lightblue; }
</style>`,
`<div class="pa">
<audio></audio>
<!--<video class="pd-vid" src="熊猫视频" autoplay loop muted></video>-->
<ol class="mlist"></ol>
<img class="player rotate" title="Alt+X" alt="">
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>`,
`\<script\>
var musics = [
['https://music.163.com/song/media/outer/url?id=歌曲ID', '曲名'],
['https://music.163.com/song/media/outer/url?id=歌曲ID', '曲名'],
];
loadJs('https://638183.freep.cn/638183/tzmaker/tz2026m.js', tzInit);
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.defer = true;
script.onload = callback;
document.head.appendChild(script);
}
function tzInit() {
var tz = TZ('pa', musics);
tz.start();
}
\</script\>`];
</script>
<script>
const btns = document.querySelectorAll('.mainBox button');
const tboxes = document.querySelectorAll('.mainBox textarea');
const mMusic = document.getElementById('mMusic');
let codeAr = [];
// 按钮单击函数
function handleBtnClick(ar) {
btns.forEach(btn => btn.onclick = () => {
switch (btn.value) {
// 重置代码
case "0":
case "1":
case "2":
const k = btn.value * 1;
tboxes[k].value = ar[k];
tboxes[k].focus();
break;
// 预览
case "3":
preView(getCodes(), previewBox);
break;
// 复制代码
default:
xCopy(getCodes());
}
});
}
// 预览
function preView(htmlCode, targetBox) {
if (targetBox.innerHTML) return;
const iframe = document.createElement('iframe');
htmlCode = htmlCode + '\n<style>body {margin: 0; }</style>\n';
iframe.srcdoc = htmlCode;
targetBox.appendChild(iframe);
targetBox.style.display = 'block';
targetBox.onclick = () => {
targetBox.innerHTML = '';
targetBox.style.display = 'none';
}
}
// 整合代码
function getCodes() {
return tboxes[0].value.trim() + '\n\n' + tboxes[1].value.trim() + '\n\n' + tboxes[2].value.trim() + '\n';
}
// 复制
function xCopy(content) {
if (!content) return;
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(content)
.then(() => {
showToast('复制成功');
})
.catch(err => {
console.error('复制失败:', err);
showToast('复制失败');
});
} else {
return new Promise((resolve) => {
let successful = false;
const body = document.body;
if (!body) {
showToast('复制失败');
resolve(false);
return;
}
const textarea = document.createElement('textarea');
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
textarea.value = content;
body.appendChild(textarea);
textarea.select();
try {
successful = document.execCommand('copy');
} catch (err) {
successful = false;
}
body.removeChild(textarea);
if (successful) {
showToast('复制成功');
resolve(true);
} else {
console.error('execCommand 复制失败');
showToast('复制失败');
resolve(false);
}
});
}
}
// 复制交互
function showToast(message, duration = 2000) {
const toast = document.getElementById('copyMsg');
toast.textContent = message;
toast.style.display = 'block';
toast.style.opacity = '1';
clearTimeout(toast.timeout);
toast.timeout = setTimeout(() => {
toast.style.display = 'none';
toast.style.opacity = '0';
}, duration);
}
// 单曲或专辑
function selectCode() {
codeAr = mMusic.checked ? mtzBasicCodes : tzBasicCodes;
tboxes.forEach((tbox, k) => tbox.value = codeAr[k]);
}
// 专辑复选按钮
mMusic.onclick = () => selectCode();
//初始化页面
selectCode();
handleBtnClick(codeAr);
</script>
</body>
</html>
|
|
发表于