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

148次阅读
没有评论

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

代码如下:

data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmJtemhwLmNvbSBlZGl0IG1lPC9odG1sPg==

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

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

V2 的大佬们做出了更多玩法:

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

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>

网页绘图板功能:

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 实时渲染器:

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>

在线表格功能:

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

正文完
 0
板面杂货铺
版权声明:本站原创文章,由 板面杂货铺 于2023-06-08发表,共计2894字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。