無前端無後端的網頁臨時記事本程式碼分享

沒有前端，也沒有後端，無需伺服器部署的臨時富文本記事本，只需要一行程式碼就可以完成。

程式碼如下：

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