隐藏置顶帖
置顶
音画帖快手
.mainBox { --xx: 81px; 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; z-index: 666; position: relative; ...
隐藏置顶帖
置顶
精华
tzMaker V5 高能电饭煲
#mum { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); padding: 20px; width: 1200px; font: normal 16px/24px Consolas,'Courier New','Andale Mono',monospace; background: #fefdfc; box-shadow: 2px 2px 6px gray; position: relative; }
#mum * { box-sizing: border-box; }
#mum input[ ...
隐藏置顶帖
置顶
精华
tzMaker指令速览
#mainBox { width: 98vw; left: calc(50% - 81px); transform: translateX(-50%); font-size: 16px; margin: 20px auto; z-index: 999; position: relative; }
.dataTab { width: 100%; border-collapse: collapse; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; white-space: pre-wrap; ta ...
隐藏置顶帖
置顶
精华
花潮LRC在线增强版
/*
名称 ：花潮LRC在线增强版
制作 ：马黑黑
更新 ：2022年9月23日
简述 ：用于制作加餐格式的花潮LRC，兼容以往帖子模板
声明 ：转载与转用请注明作者与出处
*/
.outer { margin: auto; width: fit-content; height: fit-content; }
.outer h2 { margin: 10px; padding: 0; font: bold 1.5em sans-serif; text-align ...
隐藏置顶帖
置顶
精华
文字效果集中营
本帖最后由 马黑黑 于 2024-1-18 08:30 编辑
#linkBox { column-count: 3; column-gap: 10px; }
#linkBox a{ text-decoration: none; }
#linkBox a:hover{ color: red; }
var hrefAr = [
['https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=57643&pid=1478607&fromuid=7130', '随机多彩 ...
隐藏置顶帖
置顶
精华
颜色中英文对照表
.tbl { margin:0 auto; border:1px solid olive; width:720px; }
.tbl td { padding:2px; border:1px solid dimgray; }
颜色
英文代码
中文名称
HEX格式
RGB格式
LightPink
浅粉红
#FFB6C1
255,182,193
Pink
粉红
#FFC0CB
255,192,203
Crimson
猩红
#DC143C
220,20,60
LavenderBlush
脸红的 ...
新型LMP34播放器
New
本帖最后由 亚伦影音工作室 于 2026-10-25 07:39 编辑
#papa{margin: 10px 0 30px calc(50% - 680px);
width: 1286px;
height: 740px;
background:#800000;
box-shadow: 3px 3px 20px #880000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 42111;
}
#lmp34-play ...
获取容器元素的子节点
.artBox { margin: 20px auto; max-width: 1200px; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; }
.artBox p { margin: 10px 0; ...
AI的知识从何而来
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h3 { margin: 8px 0; }
.artBox blockquote { margin: 10px 20px; padding: 2px 15px; border-left: 3px solid skyblue; background: #e7e5e3; }
AI的大脑是 ...
这个图案以前用svgdr画过
<style>
/* svg id选择器可以定义使用的部分属性（fill、stroke-*等） */
#msvg { display: block; margin: auto; fill: none; stroke: steelblue; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
/* 外层图案（齿轮）样式 */
.path{ stroke-dasharray: var(--len); stroke-dashoffs ...
pencil code文档（20260623更新）
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox p { margin: 10px 0; }
pencile code 是马黑整站系统开发的在线HTML代码编辑器，分普通版和代码着色版两个版本，二者的主要区别是：前者使用 textarea 后者使用 con ...
JS节流基础版
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; max-width: 1000px; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox p { margin: 10px 0; }
.artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; ...
规避输入法编码上屏问题
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 8px 0; }
.artBox code { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox blockquote { margin: 10px 20px; padding: 2px 15p ...
audioplayer修正版（存档）
SVG内部图像自适应宽高的实现
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox p { margin: 10px 0; }
.artBox mark { padding: 2px 6px; background: #ccc; }
通常，SVG可视子元素使用像素为单位定义自己的尺寸或路径相关数据，不支持百分比或相对单位的表达方法。为此，在SVG中所绘制的图案，最终尺 ...
浅谈待预览HTML代码的包装
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox p { margin: 10px 0; }
在线预览 html 代码的效果有很多实现方式，其中，使用“Blob + URL”方法足够轻量、高效。核心代码如下：
// content 为 html 代码字符串
let content = '<h1>Hello World!</h1>';
const codeBlob ...
使用svgdr动态绘制图案
<style>
#msvg {
display: block;
margin: auto;
border: 1px solid gray;
polygon {
stroke-dasharray: var(--len);
stroke-dashoffset: var(--len);
animation: draw 6s linear forwards;
}
}
@keyframes draw { to { stroke-dashoffset: 0; } }
</style>
<svg id="msvg" width="600" height="60 ...
什么果
CSS父选择器嵌套子选择器
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
CSS设置子元素的样式，常规的写法是这样：
/* CSS 代码 */
.papa { /* 父元素属性集 */ }
.papa .son { /* 子元素属性集 */ }
现在可以是这样：
/* CSS 代码 */
.papa {
...
pencil code代码着色版更新说明
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox p { margin: 10px 0; }
.artBox mark { padding: 2px 6px; background: #ccc; }
pencil-code 是一个在线Web编辑器，相较于后来开发的简易Web编辑器，它提供更多的辅助性功能，代码着色版使用体验更为接近现代代码编辑器。 ...
一文讲清 SVG 动态绘图
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox blockquote { padding: 4px 16px; border-left: 4px solid teal; border-radius: 8px; font-size: 16px; }
.artBox > p { margin: 10px 0; }
#msvg { display: blo ...
svg接力绘图演示
<style>
#msvg {
display: block;
margin: auto;
path {
stroke-dasharray: var(--perimeter);
stroke-dashoffset: var(--perimeter);
fill: none;
stroke: green;
stroke-width: 2;
animation: draw 4s var(--dela ...
基于 DOMParse API 的 HTML 预览演示
<button type="button" id="btnTest">点击我预览效果</button>
<script>
function preView(code) {
// HTML代码转DOM实体
const doc = new DOMParser().parseFromString(code, 'text/html');
// 添加meta标签(用于定义网页字符集)
const metas = doc.getElementsByTagName('meta');
let hasCharset ...
使用CSS Custom Highlight API做全文多彩字
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 8px 0; }
.artBox code { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox blockquote { margin: 10px 20px; padding: 2px 15p ...
第一天给俺一分钱
然后每天都是前一天的一倍，30天后俺就发财了：
function pay(basic = 0.01) {
let total = basic;
let str = `第1天支付：${total}元\n`;
for (let i = 1; i < 30; i ++) {
total *= 2;
str += `第 ${i + 1}天支付 ：${total}元\n`;
}
return str ...
svg蓝色星球
#msvg { display: block; margin: 20px auto; }
Mahei TextArea文档
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
Mahei TextArea（下面简称 mhta）是一款基于 h5 textarea 控件的 Web 编辑器，集成行号、当前行行号高亮、智能缩进、行移动、键盘成对符号自动完成、编辑器状态保存、效果预览等 ...
华为“韬定律”
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
“韬（τ）定律”是华为在2026年5月正式发布的半导体产业新演进原则，其核心在于用“时间缩微”替代传统的“几何缩微”。
🔬 什么是“韬（τ）定律”？
过去半个多世纪，全球 ...
textarea移动行代码示例
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
在 textarea 编辑器中上下移动光标所在行或选中的多行，应该有多种实现方式。由于个人偏好使用JS数组，以下实现机制主要通过数组达成，整体思路和实现步骤应该可以在代码注释中得以充分展现：
<style>
#ta { width: 600px; height ...
Textarea回车键的处理
过去手写的基于 textarea 标签的只能回车键处理极为简洁：
但它忽略了一个问题：当辑框里如果有选中文本。
为了省事，我把上面的代码交给DS，让它帮完善。DS考虑得很周到，它提供的代码可行：
代码量远远超出我的预期。要保持简洁度，还是用回原来的代码，需要改进一下：
核心在 09 行：编辑框输入光标的位置指定—— ...
浅析AI生图“一眼假”
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
AI生成的图片之所以常常“一眼假”，核心原因在于目前的AI本质上是一个基于概率的“统计机器”，它缺乏对物理世界真实规律的认知，换言之，缺少一个真正的“世界模型”。它并不理解光线是如何折射 ...
mhta初稿演示
:root { --xx: 60px; }
.ta-container { margin: 30px auto; width: 700px; height: 450px; border: 1px solid gray; background: linear-gradient(90deg, #ddd var(--xx), white var(--xx), white 0); padding: 0; position: relative; }
.lnum { position: relative; margin: 0; padding: 0; color: #999; v ...
Squire 编辑器实现音视频的插入功能
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { ...
利用p标签的visibility属性给textarea加行号
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 8px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; w ...
textarea符号补全演示
<style>
.wrap { margin: 30px auto; width: 800px; height: 460px; }
#editor { width: 100%; height: 100%; box-sizing: border-box; padding: 10px; font-size: 1.5em; }
</style>
<div class="wrap">
<textarea id="editor" placeholder="输入小角括号引号等..."></textarea>
</div>
<script>
// 自 ...
svgdr : 让 rotates 图标随机着色
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
function drRun() {
var dr = _dr(msv ...
使用 audioplayer+yslrc 制作歌词帖
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { ...
豆包收费在即，它给免费用户的定心丸
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
❓传言豆包即将收费。我想知道：像我这样，日常会使用豆包帮忙修改或编写一两个PHP函数之类的东东，不知收费之后，作为免费用户的我，这类需求豆包还会提供帮助吗？
✔️ 结论 ...
SVG：使用symbol封装现成路径
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { ...
Audio Player类（初稿）
关注公众号