极客无极限 一行HTML5代码引发的创意大爆炸
摘要：一行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代码引发的创意大爆炸的更多相关文章
- [WCF]缺少一行代码引发的血案
这是今天作项目支持的发现的一个关于WCF的问题,虽然最终我只是添加了一行代码就解决了这个问题,但是整个纠错过程是痛苦的,甚至最终发现这个问题都具有偶然性.具体来说,这是一个关于如何自动为服务接口(契约 ...
- 一个技术人，最重要的是：极客精神（好奇心 + 探索欲）（新de代码）
一个技术人,最重要的是:极客精神(好奇心 + 探索欲) 初到社会,面对众多的IT企业,我们是陌生与好奇的,认为所有企业都是管理一流并且高大上等的.然而工作多年以后你会发现,国内的IT企业环境良莠不齐, ...
- Python18行代码做出来这样有点浪漫，又有点极客的“内涵”图
今天就来教大家这个套路: 如何使用 Python 来做出来这样有点浪漫,又有点极客的“内涵”图. 当然,能不能靠它得到心仪对象的青睐,就要靠你(命)了.(๑•́₃ •̀๑) 那么要怎么做呢? 我们先找 ...
- 极客验证官方demo构建使用及代码分析
#什么是极客验证? 官方定义:极验验证是一种在计算机领域用于区分自然人和机器人的,通过简单集成的方式,为开发者提供安全.便捷的云端验证服务. #使用命令从github上获取: git clone ht ...
- [web建站] 极客WEB大前端专家级开发工程师培训视频教程
极客WEB大前端专家级开发工程师培训视频教程 教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...
- 基于requests实现极客学院课程爬虫
背景 本文主要是为了完成极客学院课程<Python 单线程爬虫>中讲师布置的实战作业. 开发环境 操作系统:windows 10 Python :Python 2.7 IDE:PyChar ...
- PHP极客水平测试——给创业公司用的远程面试题
出了份面试题<PHP极客水平测试>,创业公司可以用这个远程笔试啦,先答题,看答案合适了再邀请面试.希望对创业公司有所帮助,欢迎围观提建议哦^_^ 题目会持续更新. 答题地址:http:// ...
- eoe移动开发社区创始人兼CEO靳岩：开发者缺极客精神
(国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/) [媒体专稿]移动互联网在中国的深入发展已经有5.6个年头,从当初苹果推出iPh ...
- APICloud提供适用于命令行的开发工具，开发更具极客精神！
APICloud近期大动作不断,上周刚刚支持Atom编辑器,并推出核心开发工具库.本周又为开发者提供了一款超轻便的新开发工具--CLI工具! 操作系统: Mac/Windows/Linux nodej ...
随机推荐
- PHP - CentOS下开发运行环境搭建（Apache+PHP+MySQL+FTP）
本文介绍如何在 Linux下搭建一个 PHP 环境.其中 Linux 系统使用是 CentOS 7.3,部署在阿里云服务器上. 1,连接登录服务器 拿到服务器的 ip.初始密码以后.我们先通过远程 ...
- WiFi基本知识【转】
转自:http://blog.csdn.net/myarrow/article/details/7930131 1. IE802.11简介 标准号 IEEE 802.11b IEEE 802.11a ...
- 分布式系列 - dubbo服务telnet命令【转】
dubbo服务发布之后,我们可以利用telnet命令进行调试.管理.Dubbo2.0.5以上版本服务提供端口支持telnet命令,下面我以通过实例抛砖引玉一下: 1.连接服务 测试对应IP和端口下的d ...
- jdk8系列三、jdk8之stream原理及流创建、排序、转换等处理
一.为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX ...
- windows环境变量PATH顺序的重要性
PATH是路径的意思,PATH环境变量中存放的值,就是一连串的路径.不同的路径之间,用英文的分号间隔开.系统在执行用户命令时,若用户未给出绝对路径,则首先在当前目录下寻找相应的可执行文件.批处理文件等 ...
- Android数据存储：File
Android数据存储之File Files:它通过FileInputStream和FileOuputStream对文件进行操作.但是在Android中,文件是一个应用程序私有的,一个应用程序无法读写 ...
- Java基础：整型数组（int[]、Integer[]）排序
Windows 10家庭中文版,java version "1.8.0_152",Eclipse Oxygen.1a Release (4.7.1a), 参考链接:http://w ...
- 测试开发之前端——No4.HTML5中的事件属性
HTML5的事件属性. 属性 值 描述 onafterprint script 在打印文档之后运行脚本 onbeforeprint script 在文档打印之前运行脚本 onbeforeonload ...
- Python 正则表达式模块 (re) 简介
Python 的 re 模块(Regular Expression 正则表达式)提供各种正则表达式的匹配操作,和 Perl 脚本的正则表达式功能类似,使用这一内嵌于 Python 的语言工具,尽管不能 ...
- linux压缩与解压
1.tar -zcvf /home/aaa.tar.gz /xahot tar -zcvf 打包后生成的文件名全路径 要打包的目录 解压 #tar -zxvf /usr/local/test.tar. ...