无前端无后端的网页临时记事本代码分享

没有前端，也没有后端，无须服务器部署的临时富文本记事本, 只需要一行代码就可以完成。

代码如下：

1

data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmJtemhwLmNvbSBlZGl0IG1lPC9odG1sPg==

复制到浏览器地址栏运行即可。记事本可以粘贴图片，文本，甚至是网页。

无前端无后端的网页临时记事本代码分享 V2 的大佬们做出了更多玩法：

带保存和加载本地文件功能的：

1

data:text/html;charset=utf-8,<script>r=()=>f?.text().then(x=>f.type='text/html'?e.innerHTML=x:e.innerText=x)</script><body><div id=t><button onclick="e.innerHTML=''">🚮<button onclick="o.showPicker()">📂<button onclick="a.href=`data:text/${p.checked?'plain':'html'};charset=utf-8,${encodeURIComponent (p.checked?e.innerText:e.innerHTML)}`;a.click()">💾</button><input id=o hidden type=file onchange="f=o.files[0];r()"><label><input type=checkbox id=p onchange="e.contentEditable=p.checked?'plaintext-only':'true'">plaintext</label><a hidden id=a download=draft></div><div id=e contenteditable ondrop="f=event.dataTransfer.files[0];r();return false"><style>html{height:100%;display:flex;color-scheme:dark light}body{flex:1;flex-direction:column;font-family:system-ui}#t{position:sticky;padding:8px;inset: 0 0 auto;gap:4px}#t,button,body{display:flex}#e{flex:1;padding:8px;font-size:150%}</style>

网页绘图板功能：

1

data:text/html,<canvas id=v><script>d=document,d.body.style.margin=0,P="onpointer",c=v.getContext`2d`,v.width=innerWidth,v.height=innerHeight,c.lineWidth=2,f=0,d[P+"down"]=e=>{f=e.pointerId+1;e.preventDefault();c.beginPath();c.moveTo(e.x,e.y)};d[P+"move"]=e=>{f==e.pointerId+1&&c.lineTo(e.x,e.y);c.stroke()},d[P+"up"]=_=>f=0</script></canvas>

html，js，css 实时渲染器：

1

data:text/html,<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%;}body{margin:0;}textarea{width: 33.33%;font-size:18px;padding:0.5em}</style><textarea placeholder="HTML"id="h"></textarea><textarea placeholder="CSS"id="c"></textarea><textarea placeholder="JS"id="j"></textarea><iframe id="i"></iframe><script>document.querySelectorAll("textarea").forEach((t)=>t.addEventListener("keydown",function(t){var e,s;"Tab"==t.key&&(t.preventDefault(),e=this.selectionStart,s=this.selectionEnd,this.value=this.value.substring(0,e)+"  "+this.value.substring(s),this.selectionStart=this.selectionEnd=e+1)}))</script></body>

在线表格功能：

1

data:text/html,<table id=t><script>z=Object.defineProperty,p=parseFloat;for(I=[],D={},C={},q=_=>I.forEach(e=>{try{e.value=D[e.id]}catch(e){}}),i=0;i<101;i++)for(r=t.insertRow(-1),j=0;j<27;j++)c=String.fromCharCode(65+j-1),d=r.insertCell(-1),d.innerHTML=i?j?"":i:c,i*j&&I.push(d.appendChild((f=>(f.id=c+i,f.onfocus=e=>f.value=C[f.id]||"",f.onblur=e=>{C[f.id]=f.value,q()},get=_=>{v=C[f.id]||"";if("="!=v.charAt(0))return isNaN(p(v))?v:p(v);with(D)return eval(v.slice(1))},a={get},z(D,f.id,a),z(D,f.id.toLowerCase(),a),f))(document.createElement`input`)))</script><style>#t{border-collapse:collapse}td{border:1px solid gray;text-align:right}input{border:none;width:4rem;text-align:center}</style>

临时网页记事本在需要临时记一些功能又不需要保存的时候非常的实用。主打就是一个简洁！

更多功能可以访问：https://github.com/zserge/awfice