摘要：一行HTML5代码能做什么？国外开发者Jose Jesus Perez Aguinaga写了一行HTML5代码的文本编辑器。这件事在分享到Code Wall、Hacker News之后，引起了众多开发者的注意，纷纷发表了自己的创意。

这是最初的HTML5代码，它可以运行在最新的Chrome和Firefox中，只需在浏览器地址栏输入如下代码：

data:text/html, <html contenteditable>

但是功能十分有限，甚至没有保存功能，样式也非常简陋。

于是，网友Montas修改了他的代码，使用textarea标签代替html标签，可以添加自己喜欢的样式：

data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />

但bgrins依旧觉得不够好看，继续修改代码，这段代码会在你打字的时候改变“编辑器”的背景颜色，非常绚丽：

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans'

    rel='stylesheet' type='text/css'><style type="text/css"> html

    { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var

    e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var

    n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var

    n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body

    contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0

    auto;padding:4rem;">

网友jecxjo希望能有存储功能：

data:text/html,<button onClick="SaveTextArea()">Save</button> <script language="javascript" type="text/javascript"> function SaveTextArea() { window.location = "data:application/octet-stream," + escape(txtBody.value); } </script> <textarea id="txtBody" style="font-size: 1.5em; width: 100%; height: 100%; boarder: none; outline: none" autofocus> </textarea>

但上面的代码是以文件形式存储，samsonjs觉得不够方便，而且需要点击按钮，于是添加了自动保存功能：

data:text/html,<html lang="en"><head><style> html,body { height: 100% } #note { width: 100%; height: 100% } </style> <script> var note, html, timeout; window.addEventListener('load', function() { note = document.getElementById('note'); html = document.getElementsByTagName('html')[0]; html.addEventListener('keyup', function(ev) { if (timeout) clearTimeout(timeout); timeout = setTimeout(saveNote, 100); }); restoreNote(); note.focus(); }); function saveNote() { localStorage.note = note.innerText; timeout = null; } function restoreNote() { note.innerText = localStorage.note || ''; } </script> </head><body><h1>Notepad (type below, notes persist)</h1> <p id="note" contenteditable=""></p> </body></html>

现在可是云时代！仅仅这样怎能让开发者止步？minikomi使用了第三方API打造了一个 在线编辑器：

data:text/html,

<style type="text/css">

#e {

  position:absolute;

  top:0;

  right:0;

  bottom:0;

  left:0;

  font-size:16px;

}

</style>

<div id="e"></div>

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

<script>

var myKey="SecretKeyz";

$(document).ready(function(){

    var e;

    var url = "http://api.openkeyval.org/"+myKey;

    $.ajax({

      url: url,

      dataType: "jsonp",

      success: function(data){

       e = ace.edit("e");

       e.setTheme("ace/theme/tomorrow_night_eighties");

       e.getSession().setMode("ace/mode/markdown");

       e.setValue(data);

      }

    });

    $("#e").on("keydown", function (b) {

      if (b.ctrlKey && 83 == b.which) {

        b.preventDefault();

        var data = myKey+"="+encodeURIComponent(e.getValue());

        $.ajax({

          data: data,

          url: "http://api.openkeyval.org/store/",

          dataType: "jsonp",

          success: function(data){

            alert("Saved.");

          }

        });

      }

    });

});

</script>

没有代码高亮功能的编辑器终究不适合程序员，Rails开发者jakeonrails又定制了Ruby代码高亮功能：

data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>

效果如下图：

实际上，如果minikomi的代码已经支持多种语言高亮，如Python，只需要把“markdown”换成“python”，效果如下：

你以为到此为止了？中国开发者assassindesign觉得只是文本编辑器就太无聊了，又提供了涂鸦版本：

data:text/html, <body><canvas id="dyDraw">你的浏览器不支持HTML5 Canvas</canvas></body><script>function $(id){return document.getElementById(id);} $('dyDraw').width=document.body.clientWidth;$('dyDraw').height=document.body.clientHeight;if(window.addEventListener){window.addEventListener('load',function(){var canvas,canvastext;var hua=false;function dyDrawing(){canvas=$('dyDraw');canvastext=canvas.getContext('2d');canvas.addEventListener('mousedown',canvasMouse,false);canvas.addEventListener('mousemove',canvasMouse,false);window.addEventListener('mouseup',canvasMouse,false);} function canvasMouse(dy){var x,y;if(dy.layerX||dy.layerX==0){x=dy.layerX;y=dy.layerY;}else if(dy.offsetX||dy.offsetX==0){x=dy.offsetX;y=dy.offsetY;} x-=dyDraw.offsetLeft;y-=dyDraw.offsetTop;if(dy.type=='mousedown'){hua=false;canvastext.beginPath();canvastext.moveTo(x,y);hua=true;}else if(dy.type=='mousemove'){if(hua){canvastext.strokeStyle="rgb(255,0,0)";canvastext.lineWidth=9;canvastext.lineTo(x,y);canvastext.stroke();}}else if(dy.type=='mouseup'){hua=false;}} dyDrawing();},false);}</script>

效果如下：

极客的创意的无穷的，各位读者，你们是否有更好的创意，欢迎跟帖！

极客无极限 一行HTML5代码引发的创意大爆炸的更多相关文章

  1. [WCF]缺少一行代码引发的血案

    这是今天作项目支持的发现的一个关于WCF的问题,虽然最终我只是添加了一行代码就解决了这个问题,但是整个纠错过程是痛苦的,甚至最终发现这个问题都具有偶然性.具体来说,这是一个关于如何自动为服务接口(契约 ...

  2. 一个技术人，最重要的是：极客精神（好奇心 + 探索欲）（新de代码）

    一个技术人,最重要的是:极客精神(好奇心 + 探索欲) 初到社会,面对众多的IT企业,我们是陌生与好奇的,认为所有企业都是管理一流并且高大上等的.然而工作多年以后你会发现,国内的IT企业环境良莠不齐, ...

  3. Python18行代码做出来这样有点浪漫，又有点极客的“内涵”图

    今天就来教大家这个套路: 如何使用 Python 来做出来这样有点浪漫,又有点极客的“内涵”图. 当然,能不能靠它得到心仪对象的青睐,就要靠你(命)了.(๑•́₃ •̀๑) 那么要怎么做呢? 我们先找 ...

  4. 极客验证官方demo构建使用及代码分析

    #什么是极客验证? 官方定义:极验验证是一种在计算机领域用于区分自然人和机器人的,通过简单集成的方式,为开发者提供安全.便捷的云端验证服务. #使用命令从github上获取: git clone ht ...

  5. [web建站] 极客WEB大前端专家级开发工程师培训视频教程

    极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...

  6. 基于requests实现极客学院课程爬虫

    背景 本文主要是为了完成极客学院课程<Python 单线程爬虫>中讲师布置的实战作业. 开发环境 操作系统:windows 10 Python :Python 2.7 IDE:PyChar ...

  7. PHP极客水平测试——给创业公司用的远程面试题

    出了份面试题<PHP极客水平测试>,创业公司可以用这个远程笔试啦,先答题,看答案合适了再邀请面试.希望对创业公司有所帮助,欢迎围观提建议哦^_^ 题目会持续更新. 答题地址:http:// ...

  8. eoe移动开发社区创始人兼CEO靳岩：开发者缺极客精神

    (国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/)       [媒体专稿]移动互联网在中国的深入发展已经有5.6个年头,从当初苹果推出iPh ...

  9. APICloud提供适用于命令行的开发工具，开发更具极客精神！

    APICloud近期大动作不断,上周刚刚支持Atom编辑器,并推出核心开发工具库.本周又为开发者提供了一款超轻便的新开发工具--CLI工具! 操作系统: Mac/Windows/Linux nodej ...

随机推荐

  1. LOJ 3089: 洛谷 P5319: 「BJOI2019」奥术神杖

    题目传送门:LOJ #3089. 题意简述: 有一个长度为 \(n\) 的母串,其中某些位置已固定,另一些位置可以任意填. 同时给定 \(m\) 个小串,第 \(i\) 个为 \(S_i\),所有位置 ...

  2. Linux下clock计时函数学习

    平时在Linux和Winows下都有编码的时候,移植代码的时候免不了发现一些问题.1. 你到底准不准?关于clock()计时函数首先是一段简单的测试代码,功能为测试从文本文件读取数据并赋值给向量最后打 ...

  3. VS C# xamarin 开发android 调试正常 发布分发后运行闪退出错

    我强烈推荐大家如果不是很有必要就不要引用一些.NET STD的库,比如json库newtonsoft.JSON,直接引用官方的system.Json就足够了,否则会导致体积变得巨大 好了废话不多说,这 ...

  4. 转载：Java高并发，如何解决，什么方式解决

    原文:https://www.cnblogs.com/lr393993507/p/5909804.html 对于我们开发的网站,如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了.而并 ...

  5. Expm 1_2 实现快速排序的算法,并尝试采用不同的方法实现线性的划分过程.

    package org.xiu68.exp.exp1; public class Exp1_2 { //实现快速排序算法,采用不同的方法实现线性划分的过程 public static void mai ...

  6. GitHub提交代码后不显示用户名只显示邮箱

    提交完代码如图: 解决方案: 右键git bash here 输入命令如下: git config --global user.name "username" git config ...

  7. 容器平台选型的十大模式：Docker、DC/OS、K8S 谁与当先？【转】

    网易企业服务2017-10-13 无论是在社区,还是在同客户交流的过程中,总会被问到到底什么时候该用 Docker?什么时候用虚拟机?如果使用容器,应该使用哪个容器平台? 显而易见,我不会直接给大家一 ...

  8. npm下载速度过慢的解决办法

    第一种方式: 在cmd 输入指令:npm config set registry https://registry.npm.taobao.org 不建议使用cnpm! 设置完后,注意检查:输入指令:n ...

  9. Oracle 相关概念

    注:本文来源于 <腾科OCP培训课堂>.非准许商业活动. 标题:Oracle  相关概念 --->数据库名.实例名.数据库域名.全局数据名.服务名 一:数据库名 1:什么是数据库名 ...

  10. 【mysql】一个很小但很影响速度的地方

    如果要插入一大批数据,千万不要一条一条的execute, commit.而应该是先全部execute,最后统一commit!!! 千万注意,时间差距还是很大的!! 正确示范:快 ): sql = &q ...