马黑黑 发表于 2025-5-21 21:46
别的地方没问题，就是论坛运行的东东本来就非常多，一个帖子的代码一般也不建议超过两百行
论坛环境是挺复杂的。{:4_173:}因为要交流互动。。给用户各种权限设置
看来是见识不到了
花飞飞 发表于 2025-5-22 21:06
论坛环境是挺复杂的。因为要交流互动。。给用户各种权限设置
看来是见识不到了
运行过程开销很大，特别是给腾讯接管之后
马黑黑 发表于 2025-5-22 21:16
运行过程开销很大，特别是给腾讯接管之后
速度还可以吧，没大差是因为电脑本身也升级了么
花飞飞 发表于 2025-5-22 21:18
速度还可以吧，没大差是因为电脑本身也升级了么
你若是懂得如何查看计算机性能的占用，你就会理解我的意思
马黑黑 发表于 2025-5-22 21:20
你若是懂得如何查看计算机性能的占用，你就会理解我的意思
肯定不懂得怎么查看。。{:4_170:}
若是我懂得如何查看计算机的性能占用，我就会能看懂这些奇怪的代码，也不会有这些问题出来
花飞飞 发表于 2025-5-23 20:09
肯定不懂得怎么查看。。
若是我懂得如何查看计算机的性能占用，我就会能看懂这些奇怪的代码， ...
{:4_197:}
马黑黑 发表于 2025-5-24 00:01
{:4_173:}我呢不懂的东西多了去了，不怕多这一项
花飞飞 发表于 2025-5-24 16:54
我呢不懂的东西多了去了，不怕多这一项
{:4_172:}
马黑黑 发表于 2025-5-24 18:12
{:4_196:}笨笨的挺好。容易开心
本帖最后由 马黑黑 于 2025-5-25 20:03 编辑 <br /><br /><style>
iframe { position: relative; width: 100%; height: 100%; border: none; outline: none; box-sizing: border-box; margin: 0; }
.wrap{ left:calc(50% - 81px); transform:translateX(-50%);width:1400px; height:700px; background:linear-gradient(to right,#eee 59px,#aaa 60px,#fff 0); border:1px solid gray; border-radius:4px; box-shadow:2px 2px 6px gray; z-index: 1; position:relative; margin: 30px 0; }
@media screen and (max-width: 1280px) { .wrap { width: 90vw; height: 75vh; font-size: 12px; } }
.wrap:hover{ border-color: black; }
.wrap:has(#editor:focus) { border-width:2px; }
.same{ position: absolute; top:10px; box-sizing: border-box; padding: 8px; border:none; border-radius: inherit; white-space: pre-wrap; word-break: break-all; font: normal 16px/24px Consolas,'Courier New','Andale Mono',monospace; tab-size: 4; overflow: auto; }
#editor{ right: 0; width: calc(100% - 60px); height: calc(100% - 20px); resize: none; outline: none; background: #fefefe; scroll-padding: 8px;}
#line-number{ position: absolute; width: 100%; height: calc(100% - 20px); color: gray; user-select: none; }
#line-number > span{cursor:pointer;}
#line-number > span:hover{ font-weight: bold; color: red; }
#mnbox{ min-height: 0; visibility: hidden; }
#showBox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #fff; display: none; padding: 0; overflow: hidden; z-index: 10000; margin: 0; }
#showBox::after { position: absolute; content: '关闭预览'; bottom: 10px; left: calc(50% - 40px); padding: 0 4px; width: 80px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #efe; border-radius: 6px; background: #eee; font-size: 14px; box-shadow: 2px 2px 6px rgba(0,0,0,.25); cursor: pointer; }
#btnPrev { padding: 2px 8px; cursor: pointer; border: 1px solid #efe; border-radius: 4px; box-shadow:2px 2px 6px rgba(0,0,0,.25); font-size: 14px; }
#btnPrev:hover { color: red; }
</style>
<h2>Web代码简易编辑器</h2>
<div class="wrap">
<div id="mnbox" class="same"></div>
<div id="line-number" class="same"></div>
<textarea id="editor" class="same" placeholder="输入CSS+HTML+JS代码..."></textarea>
</div>
<p><button type="button" id="btnPrev" title="预览效果">运行代码</button></p>
<div id="showBox" title="点击关闭"></div>
<script>
let isSyncing = false;
const lnum = document.getElementById('line-number');
const editor = document.getElementById('editor');
const mnbox = document.getElementById('mnbox');
const btnPrev = document.getElementById('btnPrev');
const selectLine = (num) => {
let mpos, tstr = '';
let ar = editor.value.split('\n');
for (j = 0; j < num; j ++) {
tstr += ar + 2;
}
mpos = tstr.length;
editor.setSelectionRange(mpos, mpos + ar.length);
editor.focus();
};
const addLineNum = () => {
const lines = editor.value.split('\n');
let str = '';
lines.forEach((line, key) => {
let br = '<br>'.repeat(calcSolftLines(line) || 1);
let idx = (key + 1).toString().padStart(4,' ');
str += `<span onclick="selectLine(${key})">${idx}</span>${br}`;
});
lnum.innerHTML = str;
};
const calcSolftLines = (text) => {
const cssdata = window.getComputedStyle(editor);
mnbox.style.width = editor.offsetWidth + 'px';
mnbox.style.overflowY = editor.scrollTop > 0 ? 'scroll' : 'hidden';
mnbox.innerText = text;
const lineheight = parseFloat(cssdata.getPropertyValue('line-height'));
const padding = parseFloat(cssdata.getPropertyValue('padding'));
return Math.floor((mnbox.offsetHeight - padding * 2) / lineheight);
};
const getCurrentLineIndent = () => {
const cursorPos = editor.selectionStart;
const content = editor.value;
let lineStart = content.lastIndexOf('\n', cursorPos - 1) + 1;
const line = content.slice(lineStart, cursorPos);
return line.match(/^[\t ]*/)?. || '';
};
const insertTextAtCursor = (text) => {
const start = editor.selectionStart;
const end = editor.selectionEnd;
const content = editor.value;
editor.value = content.slice(0, start) + text + content.slice(end);
editor.selectionStart = editor.selectionEnd = start + text.length;
};
const preView = (htmlCode, targetBox) => {
if (targetBox.innerHTML) return;
console.log('Yes');
window.localStorage.setItem('ed1', htmlCode);
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';
}
};
btnPrev.onclick = () => preView(editor.value, showBox);
editor.onkeydown = (e) => {
if (e.key === 'Tab') {
e.preventDefault();
insertTextAtCursor('\t');
}
if (e.key === 'Enter') {
e.preventDefault();
const indent = getCurrentLineIndent();
insertTextAtCursor('\n' + indent);
addLineNum();
}
};
const bindEventLnum = () => {
removeEventEditor();
lnum.addEventListener('scroll', lnumScroll);
};
const bindEventEditor = () => {
removeEventLnum();
editor.addEventListener('scroll', editorScroll);
};
const lnumScroll = () => {
if (!isSyncing) {
isSyncing = true;
editor.scrollTop = lnum.scrollTop;
isSyncing = false;
}
};
const editorScroll = () => {
if (!isSyncing) {
isSyncing = true;
lnum.scrollTop = editor.scrollTop;
isSyncing = false;
}
};
lnum.addEventListener('mouseover', bindEventLnum);
editor.addEventListener('mouseover', bindEventEditor);
lnum.addEventListener('touchstart', bindEventLnum, { passive: false });
editor.addEventListener('touchstart', bindEventEditor, { passive: false });
const removeEventLnum = () => lnum.removeEventListener('scroll', lnumScroll);
const removeEventEditor = () => editor.removeEventListener('scroll', editorScroll);
editor.oninput = () => addLineNum();
window.onresize = () => addLineNum();
editor.onmouseenter = () => editor.focus();
editor.value = window.localStorage.getItem('ed1');
editor.setSelectionRange(0, 0);
addLineNum();
</script>
马黑黑 发表于 2025-5-24 21:04
不错不错
这个错不了
花飞飞 发表于 2025-5-25 15:16
这个错不了
错不了就好
马黑黑 发表于 2025-5-25 18:19
错不了就好
放了个编辑器啊。。新做的么？输入我的一个作品代码，运行正常显示。。怪好用的
花飞飞 发表于 2025-5-25 21:38
放了个编辑器啊。。新做的么？输入我的一个作品代码，运行正常显示。。怪好用的
这个不新，只是放论坛里有难度，一直没敢放
马黑黑 发表于 2025-5-25 21:56
这个不新，只是放论坛里有难度，一直没敢放
我说呢，看着面熟。之前那个简易编辑器运行代码是在底部中间的。
花飞飞 发表于 2025-5-25 22:02
我说呢，看着面熟。之前那个简易编辑器运行代码是在底部中间的。
{:4_191:}
马黑黑 发表于 2025-5-25 22:28
{:4_173:}回到最后一贴来一杯挺好
花飞飞 发表于 2025-5-26 20:39
回到最后一贴来一杯挺好
好喝多喝
马黑黑 发表于 2025-5-26 21:25
好喝多喝
多不了，酒量有限
花飞飞 发表于 2025-5-26 22:11
多不了，酒量有限
感情深一口闷