摘要:一行HTML5代码能做什么?国外开发者Jose Jesus Perez Aguinaga写了一行HTML5代码的文本编辑器。这件事在分享到Code Wall、Hacker News之后,引起了众多开发者的注意,纷纷发表了自己的创意。
这是最初的HTML5代码,它可以运行在最新的Chrome和Firefox中,只需在浏览器地址栏输入如下代码:
1
|
data:text/html, < html
contenteditable>
|
但是功能十分有限,甚至没有保存功能,样式也非常简陋。
于是,网友Montas修改了他的代码,使用textarea标签代替html标签,可以添加自己喜欢的样式:
1
|
data:text/html, < textarea
style = "font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none"
autofocus />
|
但bgrins依旧觉得不够好看,继续修改代码,这段代码会在你打字的时候改变“编辑器”的背景颜色,非常绚丽:
1
2
3
4
5
6
7
8
|
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希望能有存储功能:
1
|
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觉得不够方便,而且需要点击按钮,于是添加了自动保存功能:
1
|
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打造了一个
在线编辑器:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
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 >
var myKey="SecretKeyz";
$(document).ready(function(){
var e;
$.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,
dataType: "jsonp",
success: function(data){
alert("Saved.");
}
});
}
});
});
</ script >
|
没有代码高亮功能的编辑器终究不适合程序员,Rails开发者jakeonrails又定制了Ruby代码高亮功能:
1
|
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觉得只是文本编辑器就太无聊了,又提供了涂鸦版本:
1
|
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 >
|
效果如下:
极客的创意的无穷的,各位读者,你们是否有更好的创意,欢迎跟帖!
分享到:
相关推荐
小程序源码 极客学院 (代码+截图)小程序源码 极客学院 (代码+截图)小程序源码 极客学院 (代码+截图)小程序源码 极客学院 (代码+截图)小程序源码 极客学院 (代码+截图)小程序源码 极客学院 (代码+截图)小程序源码 ...
7. **实例分析**:在极客学院的课件中,可能会通过一个具体的编程示例来解释模板模式,例如创建一个报告生成器,抽象类定义了生成报告的步骤(如收集数据、处理数据、生成文件),而具体类可以根据不同的报告类型...
HTML5开发视频教程 极客学院新版HTML5视频培训
[源代码]Python极客编程_用代码探索世界,包含16个有趣的编程项目,从一个明确的项目目标开始,引导思考解决问题的方法并完成任务;介绍用贝叶斯法则确定事件概率,用自然语言处理技术分析语料库,用collections和...
极客学院是一个知名的在线学习平台,专注于提供编程和技术领域的课程,包括Python爬虫技术。"极客学院爬虫代码"这个标题暗示了压缩包中可能包含了一些与爬虫相关的编程代码示例,可能是由极客学院的讲师或学员分享的...
R的极客理想[工具篇]的代码
本套课程是极客学院 - HTML5开发工程师方向的视频教程,请注意,是视频教程mp4格式的,全套。没有ppt等文档,有意者可以下。
迭代器模式是软件设计模式中的行为模式之一,它提供了一种方法来顺序访问聚合对象的元素,而又不暴露其底层表示。在Java编程语言中,迭代器模式的应用尤为广泛,尤其是在处理集合类如ArrayList、LinkedList等时。这...
在"备忘录模式-极客学院-java-课件代码"这个压缩包中,我们可以期待找到相关的Java代码示例,这些示例可能包括发起人、备忘录和管理者类的实现,以及如何在实际场景中运用备忘录模式的示例。通过学习这些代码,...
极客时间基础篇&生态篇代码geektime-vue-1极客时间基础篇&生态篇代码源码使用指南进入相应文件夹(有package.json的那个)后执行以下步骤安装依赖npm install启动环境npm run serve
这个极客学院的项目提供了完整的客户端代码,帮助开发者深入学习Android应用的网络通信、数据解析以及用户界面构建等核心知识。以下是这个项目中涉及的关键技术点: 1. **网络请求库**:在Android中,通常使用第三...
PHPCMS仿极客网模板_自适应响应式HTML5,看见有人放出了这个模板,结果没得下载 后来我就自己下载了极客网的css来配置到phpcms v9上面,结果首页的功能基本上都能实现(加载更多), 我都在怀疑是不是极客网也是用...
5. **多语言支持**:极客卸载支持多种语言,包括中文,使得不同地区的用户都能无障碍地使用。 6. **实时更新**:软件会定期更新,以保持对最新软件版本的兼容性,并不断优化卸载效果。 7. **轻量级**:极客卸载的...
在本书中,你会看到14个令人兴奋的项目,旨在鼓励你探索Python编程的世界。这些项目涉及广泛的主题,如绘制类似万花尺的花纹、生成ASCII码艺术图、3D渲染,以及根据音乐同步投射激光图像。除了本身很有趣之外,这些...
极客时间 极客时间个人代码
命令模式是一种行为设计模式,它将请求封装为一个对象,从而使你可用不同的请求对客户进行参数化,对请求排队或记录请求日志,以及支持可撤销的操作。在极客学院的课程中,这个主题深入讲解了如何使用命令模式来提高...
极客学院最新前端教学视频及源码,html5+css+js.极客学院最新前端教学视频及源码,html5+css+js.
这个项目是一个个人实践,目的是通过模仿极客学院的静态首页来锻炼和提升前端布局技能。以下是对这些知识点的详细阐述: 1. HTML(HyperText Markup Language):HTML是网页的基础,用于构建网页的结构。在这个项目...
【标题】"极客必备20题" 涉及的知识点主要集中在极客文化、信息安全和网络技术应用上。极客,又称Geek,通常指的是对计算机和新技术有深厚兴趣并热衷于探索的人。这20道题可能涵盖编程、黑客技术、网络安全、系统...