极客无极限 一行HTML5代码引发的创意大爆炸

摘要:一行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
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希望能有存储功能:

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 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代码高亮功能:

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>

效果如下:


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/449660.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DOCKER windows 7 详细安装教程

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 DOCKER windows安装 DOCKER windows安装 1.下载程序包2. 设置环境变量3. 启动DOCKERT4. 分析start.sh5. 利用SSH工具管理6. 下载镜像 6.1…

芝麻信用免押金成趋势 报告称租赁经济有望突破10万亿元

中新网1月16日电 “很多物品都是租来的&#xff0c;但生活不是。”如今&#xff0c;越来越多的年轻人选择了“租”生活&#xff0c;从房子到车子&#xff0c;从服饰到电脑&#xff0c;甚至玩具、婴儿车&#xff0c;全都可以租用&#xff0c;租赁已成为当下年轻人追求品质生活的…

开发者成功学:扔掉你那些很sexy的想法

摘要&#xff1a;在开发者的世界里&#xff0c;开发iPhone应用并不像表面那么光鲜&#xff0c;收支不成正比是常有之事&#xff0c;劳心劳力开发的应用无人问津更是屡见不鲜。走出了开发的一小步却难以迈出销售推广上的一大步&#xff0c;究竟如何才能将应用卖出去并获取利润&a…

html-body相关标签

一 字体标签 字体标签包含&#xff1a;h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub> 标题 标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题&#xff0c;<h6>定义最小的标题。具有align属性&a…

CentOS上安装Docker (图解)

更简单的办法&#xff1a;三分钟装好 Docker ( 图解&#xff09; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 // 用上面那个办法吧&#xff0c;简单多了&#xff0c;下面这个方法看看…

Uber提出有创造力的POET:自行开发更困难环境和解决方案

近日&#xff0c;Uber 发文介绍了一种开放式方法 POET&#xff08;Paired Open-Ended Trailblazer&#xff09;&#xff0c;可自行开发难度递增的环境及其解决方案&#xff0c;还可以实现不同环境中的智能体迁移&#xff0c;促进进化。Uber AI 实验室注重开放性&#xff08;ope…

C语言编译过程总结详解

源文&#xff1a;http://bbs.dzsc.com/space/viewspacepost.aspx?postid76976 C语言的编译链接过程要把我们编写的一个c程序&#xff08;源代码&#xff09;转换成可以在硬件上运行的程序&#xff08;可执行代码&#xff09;&#xff0c;需要进行编译和链接。编译就是把文本形…

promise之我见

在我们平时的方法中有很多方法是promise封装的&#xff0c; 有些函数后边跟的then和catch 就是promise的方法&#xff0c;先看一下pormise的特点 &#xff08;1&#xff09;对象的状态不受外界影响。Promise对象代表一个异步操作&#xff0c;有三种状态&#xff1a;pending&…

CPP虚析构函数

#include<iostream> using namespace std;class base {public:base(){};virtual ~base(){}; };// 在类声明中声明纯虚析构函数 //base::~base() {}class father: public base {public:~father(){cout << "father" << endl;} };int main() {base* a…

idea 新建springboot 的 web 项目

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 IDAE中新建web项目见&#xff1a;IntelliJ IDEA中新建JAVA WEB项目、maven项目 默认已有一个 maven 的 web 项目&#xff1a;gentle --…

从全栈式解决方案到情感化,揭秘问众智能切入车载语音市场的最佳姿势...

*问众智能CEO张亚 如果说语音交互是车载场景的最佳方式&#xff0c;未来谁掌握车内语音交互“话语权”&#xff0c;谁就将主宰车辆智能网联的新时代。 经过多年的渐进式发展&#xff0c;语音交互的价值正逐步走出单纯“控制方式”的狭隘理解&#xff0c;向业内人眼中的“智能…

阿里云日志添加要查询字段

第一步&#xff1a;在API基控制器&#xff08;base文件下&#xff09;下面 $arr 就是我要接受的所有参数值&#xff0c;而 msg_id就是我以后要在阿里云日志中查询的字段&#xff0c;以此字段统计某些数据 $arr 是前台API接口传过来的数据 &#xff0c;这里我需要使用 $arr[id] …

总理整节从事量化交易员所做工作与代码

数据获取&#xff08;期权数据&#xff09; 本人从事领域为量化期权领域&#xff08;皇冠上的明珠&#xff0c;真好听&#xff0c;可是做起来&#xff0c;难度真是&#xff08;滴-------------&#xff09;&#xff09;。从最开始的手动从三大所复制粘贴期权数据&#xff0c;到…

Docker 上安装、启动 MySQL (图解)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 在docker仓库中搜索mysql的镜像&#xff1a; docker search mysql 下载镜像&#xff1a; docker pull mysql 2. 查看本地镜…

关于 std::set/std::map 的几个为什么

2013-01-20 std::set/std::map &#xff08;以下用 std::map 代表&#xff09; 是常用的关联式容器&#xff0c;也是 ADT&#xff08;抽象数据类型&#xff09;。也就是说&#xff0c;其接口&#xff08;不是 OO 意义下的 interface&#xff09;不仅规定了操作的功能&#xff…

HDU 3572 Task Schedule

传送门 作业调度&#xff0c;这道题还真没想到能用网络流。。。。乍一看跟背包问题差不多。 有N个作业&#xff0c;M个机器&#xff0c;每个作业给你一个耗费时间&#xff08;时间段&#xff09;以及最早开始时间和最晚完成时间&#xff08;这两个是时间点&#xff09;&#xf…

MariaDB安装1,2

2019独角兽企业重金招聘Python工程师标准>>> 4.22 MariaDB安装 MariaDB是MySQL的一个分支。MySQL——>sun——>Oracle&#xff0c;维基百科&#xff1a;https://en.wikipedia.org/wiki/MariaDB 官网&#xff1a;https://mariadb.org MariaDB 10.3.11Linux64位…

CentOS 7 上 Docker 安装

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Docker支持以下的CentOS版本&#xff1a; CentOS 7 (64-bit)CentOS 6.5 (64-bit) 或更高的版本前提条件 目前&#xff0c;CentOS 仅发…

C/C++拾遗录--关于一个C语言小程序的分析

虽然编了几年程序&#xff0c;但是对于程序到底是什么规则变成汇编代码的&#xff0c;在这里搞了一个小程序。用VC查看了一下汇编代码。在此之前先介绍一下关于函数运行是堆栈变化的细节。 在高级语言编写程序时&#xff0c;函数的调用是很常见的事情&#xff0c;但是在函数调…

重命名 docker 容器名

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 docker 容器&#xff08;服务&#xff09;重命名只要一个命令就可以&#xff1a;docker rename 原容器名 新容器名 如&#xff1a;