無(wú)前后端,徹底無(wú)服務(wù)的網(wǎng)頁(yè)版辦公套件
來(lái)源 | https://www.fly63.com/
文本編輯器
一個(gè)簡(jiǎn)單的富文本編輯器。輸入任何你想要的，它不會(huì)被保存在任何地方，但它可能對(duì)快速一次性筆記很方便。您應(yīng)該能夠使用 Ctrl+B 和 Ctrl+I 將文本選擇標(biāo)記為粗體或斜體。撤消/重做也應(yīng)該有效。您還可以從其他來(lái)源復(fù)制/粘貼文本和圖像。 復(fù)制并添加到書(shū)簽或在 URL 欄中打開(kāi)：
data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+
不使用base64，更簡(jiǎn)約的代碼如下：
data:text/html;,<html contenteditable>
雙屏對(duì)照版：
data:text/html;text,<html><body style="display:flex"><div contenteditable style="flex:1;padding:5px"></div><div contenteditable style="flex:1;padding:5px"></div></body></html>
代碼編輯器
一個(gè)簡(jiǎn)單的代碼編輯器。您可以輸入 HTML、 css 和 Javascript。
復(fù)制并添加到書(shū)簽或在 URL 欄中打開(kāi)：
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>
計(jì)算器
一個(gè)簡(jiǎn)單的計(jì)算器，支持基本運(yùn)算符號(hào)計(jì)算。
復(fù)制并添加到書(shū)簽或在 URL 欄中打開(kāi)：
data:text/html,<table style="text-align: center;width:80vw;margin: 0 auto;"><tbody><tr><td colspan="4"><textarea></textarea></td></tr></tbody><script>let d=document;let tbl=d.querySelector('tbody');let z=d.querySelector('textarea');let oc=(x)=>z.value+=x;let cl=()=>z.value='';let re=()=>{try{z.value=eval(z.value);}catch(error){cl();}};[[1,2,3,'+'],[4,5,6,'-'],[7,8,9,'*'],['C',0,'=','/']].forEach((a)=>{let r=d.createElement('tr');r.style.lineHeight='64px';tbl.appendChild(r);a.forEach((b)=>{let tb=d.createElement('tb');tb.innerText=b;tb.style.padding='16px';tb.style.border='1px solid';r.appendChild(tb);tb.onclick=b==='='?re:b==='C'?cl:()=>oc(b);})})</script></table>
電子表格
帶有數(shù)學(xué)公式的非?；镜碾娮颖砀?。它有 100 行和 26 列 (A..Z)。如果單元格中的值以“=”開(kāi)頭，則將其計(jì)算為公式。
您可以參考其他單元格值，即“=(A10+A11)/A12”。在引擎蓋下它使用 eval()，所以要小心。
復(fù)制并添加到書(shū)簽或在 URL 欄中打開(kāi)：
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>
繪圖應(yīng)用程序
沒(méi)有什么比用鼠標(biāo)在空白畫(huà)布上繪圖更簡(jiǎn)單的了。也適用于觸摸屏。為了保存你的結(jié)果......好吧，也許做一個(gè)截圖......
復(fù)制并添加到書(shū)簽或在 URL 欄中打開(kāi)：
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>
幻燈片
只是帶有一些熱鍵的富文本編輯器的幻燈片。有 50 張空白幻燈片供您使用（我希望您不需要用更多的幻燈片來(lái)讓您的觀眾感到厭煩）。
每張幻燈片都是一個(gè)富文本編輯器，但有一些熱鍵可以使樣式更好：
-
Ctrl+Alt+1：頁(yè)眉
-
Ctrl+Alt+2：普通樣式
-
Ctrl+Alt+3：左對(duì)齊
-
Ctrl+Alt+4：居中對(duì)齊
-
Ctrl+Alt+5：右對(duì)齊
-
Ctrl+Alt+6：減少縮進(jìn)
-
Ctrl+Alt+7：縮進(jìn)
-
Ctrl+Alt+8：制作列表
復(fù)制并添加到書(shū)簽或在 URL 欄中打開(kāi)：
data:text/html,<body><script>d=document;for(i=0;i<50;i++)d.body.innerHTML+='<div style="position:relative;width:90%;padding-top:60%;margin:5%;border:1px solid silver;page-break-after:always"><div contenteditable style=outline:none;position:absolute;right:10%;bottom:10%;left:10%;top:10%;font-size:5vmin>';d.querySelectorAll("div>div").forEach(e=>e.onkeydown=e=>{n=e.ctrlKey&&e.altKey&&e.keyCode-49,f="formatBlock",j="justify",x=[f,f,j+"Left",j+"Center",j+"Right","outdent","indent","insertUnorderedList"][n],y=["<h1>","<div>"][n],x&&d.execCommand(x,!1,y)})</script><style>@page{size:6in 8in landscape}@media print{*{border:0 }}
原理說(shuō)明
以下是來(lái)自 Google Bard 對(duì)其工作原理的解釋：
瀏覽器URL中的代碼data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+是一個(gè)data URI scheme。
它是一種將少量數(shù)據(jù)（例如文本、圖像或 CSS）直接嵌入網(wǎng)頁(yè)的方法。這對(duì)于將小徽標(biāo)或跟蹤像素嵌入頁(yè)面，或?yàn)闊o(wú)法加載外部資源的用戶提供后備內(nèi)容等非常有用。
數(shù)據(jù) URI 方案由以下 語(yǔ)法 定義：
[< media type >][;base64],<data>
<media type> 是一個(gè)字符串，用于標(biāo)識(shí)嵌入的數(shù)據(jù)類型。<data> 是實(shí)際數(shù)據(jù)，以 base64 編碼。
在您提供的示例中，<media type> 是 text/html，<data> 是簡(jiǎn)單頁(yè)面的 HTML 代碼。此頁(yè)面包含一個(gè)標(biāo)題和一段文字。
當(dāng)瀏覽器遇到數(shù)據(jù) URI 時(shí)，它將解碼 base64 數(shù)據(jù)，然后將其視為從外部資源加載的數(shù)據(jù)。在這種情況下，瀏覽器將加載 HTML 代碼并將其顯示為網(wǎng)頁(yè)。
數(shù)據(jù) URI 是一種將少量數(shù)據(jù)嵌入網(wǎng)頁(yè)的有用方法。但是，應(yīng)謹(jǐn)慎使用它們，因?yàn)樗鼈儠?huì)增加頁(yè)面的大小并使其加載速度變慢。
以下是使用數(shù)據(jù) URI 時(shí)需要牢記的一些額外事項(xiàng)：
數(shù)據(jù) URI 的最大大小為 32KB。
并非所有瀏覽器都支持?jǐn)?shù)據(jù) URI。
數(shù)據(jù) URI 可用于嵌入惡意代碼。
如果您正在考慮使用數(shù)據(jù) URI，請(qǐng)務(wù)必仔細(xì)權(quán)衡利弊。
妙吧！好活, 就得收藏支持一下。用活瀏覽器，都都玩出花來(lái)，你會(huì)發(fā)現(xiàn)很多好玩有趣的功能，簡(jiǎn)單又實(shí)用！
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
