无前后端,彻底无服务的网页版办公套件-技术圈

来源 | https://www.fly63.com/

这是一个彻底无服务，易于分享的网页软件形式，它所有的内容都集中在Url数据中，所见即所得，不需要网络和注册安装，同时适配全平台，用户还能随时修改逻辑，没有的服务器成本。下面逐一分享给大家(https://github.com/zserge/awfice)，直接将代码复制到浏览器中即可访问。

文本编辑器

一个简单的富文本编辑器。输入任何你想要的，它不会被保存在任何地方，但它可能对快速一次性笔记很方便。您应该能够使用 Ctrl+B 和 Ctrl+I 将文本选择标记为粗体或斜体。撤消/重做也应该有效。您还可以从其他来源复制/粘贴文本和图像。复制并添加到书签或在 URL 栏中打开：

        
          
            data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+

不使用base64，更简约的代码如下：

        
          data:text/html;,<html contenteditable>

双屏对照版：

        
          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>

代码编辑器

一个简单的代码编辑器。您可以输入 HTML、 css 和 Javascript。

复制并添加到书签或在 URL 栏中打开：

        
          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>

计算器

一个简单的计算器，支持基本运算符号计算。

复制并添加到书签或在 URL 栏中打开：

        
          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>

电子表格

带有数学公式的非常基本的电子表格。它有 100 行和 26 列 (A..Z)。如果单元格中的值以“=”开头，则将其计算为公式。

您可以参考其他单元格值，即“=(A10+A11)/A12”。在引擎盖下它使用 eval()，所以要小心。

复制并添加到书签或在 URL 栏中打开：

        
          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>

绘图应用程序

没有什么比用鼠标在空白画布上绘图更简单的了。也适用于触摸屏。为了保存你的结果......好吧，也许做一个截图......

复制并添加到书签或在 URL 栏中打开：

        
          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 张空白幻灯片供您使用（我希望您不需要用更多的幻灯片来让您的观众感到厌烦）。

每张幻灯片都是一个富文本编辑器，但有一些热键可以使样式更好：

Ctrl+Alt+1：页眉
Ctrl+Alt+2：普通样式
Ctrl+Alt+3：左对齐
Ctrl+Alt+4：居中对齐
Ctrl+Alt+5：右对齐
Ctrl+Alt+6：减少缩进
Ctrl+Alt+7：缩进
Ctrl+Alt+8：制作列表

复制并添加到书签或在 URL 栏中打开：

        
          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 !important}}

原理说明

以下是来自 Google Bard 对其工作原理的解释：

浏览器URL中的代码data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+是一个data URI scheme。

它是一种将少量数据（例如文本、图像或 CSS）直接嵌入网页的方法。这对于将小徽标或跟踪像素嵌入页面，或为无法加载外部资源的用户提供后备内容等非常有用。

数据 URI 方案由以下语法定义：

        
          [< media type >][;base64],<data>

<media type> 是一个字符串，用于标识嵌入的数据类型。<data> 是实际数据，以 base64 编码。

在您提供的示例中，<media type> 是 text/html，<data> 是简单页面的 HTML 代码。此页面包含一个标题和一段文字。

当浏览器遇到数据 URI 时，它将解码 base64 数据，然后将其视为从外部资源加载的数据。在这种情况下，浏览器将加载 HTML 代码并将其显示为网页。

数据 URI 是一种将少量数据嵌入网页的有用方法。但是，应谨慎使用它们，因为它们会增加页面的大小并使其加载速度变慢。

以下是使用数据 URI 时需要牢记的一些额外事项：

数据 URI 的最大大小为 32KB。
并非所有浏览器都支持数据 URI。
数据 URI 可用于嵌入恶意代码。
如果您正在考虑使用数据 URI，请务必仔细权衡利弊。

妙吧！好活, 就得收藏支持一下。用活浏览器，都都玩出花来，你会发现很多好玩有趣的功能，简单又实用！

学习更多技能

请点击下方公众号