极客无极限 一行HTML5代码引发的创意大爆炸
生活随笔
收集整理的這篇文章主要介紹了
极客无极限 一行HTML5代码引发的创意大爆炸
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
摘要：一行HTML5代碼能做什么？國(guó)外開(kāi)發(fā)者Jose Jesus Perez Aguinaga寫了一行HTML5代碼的文本編輯器。這件事在分享到Code Wall、Hacker News之后，引起了眾多開(kāi)發(fā)者的注意，紛紛發(fā)表了自己的創(chuàng)意。
但是功能十分有限，甚至沒(méi)有保存功能，樣式也非常簡(jiǎn)陋。
但bgrins依舊覺(jué)得不夠好看，繼續(xù)修改代碼，這段代碼會(huì)在你打字的時(shí)候改變“編輯器”的背景顏色，非常絢麗：
這是最初的HTML5代碼，它可以運(yùn)行在最新的Chrome和Firefox中，只需在瀏覽器地址欄輸入如下代碼：
| 1 | data:text/html, <html contenteditable> |
于是，網(wǎng)友Montas修改了他的代碼，使用textarea標(biāo)簽代替html標(biāo)簽，可以添加自己喜歡的樣式：
| 1 | data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus /> |
| 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;"> |
網(wǎng)友jecxjo希望能有存儲(chǔ)功能：
| 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> |
但上面的代碼是以文件形式存儲(chǔ)，samsonjs覺(jué)得不夠方便，而且需要點(diǎn)擊按鈕，于是添加了自動(dòng)保存功能：
| 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> |
現(xiàn)在可是云時(shí)代！僅僅這樣怎能讓開(kāi)發(fā)者止步？minikomi使用了第三方API打造了一個(gè) 在線編輯器：
| 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> |
沒(méi)有代碼高亮功能的編輯器終究不適合程序員，Rails開(kāi)發(fā)者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> |
效果如下圖：
實(shí)際上，如果minikomi的代碼已經(jīng)支持多種語(yǔ)言高亮，如Python，只需要把“markdown”換成“python”，效果如下：
你以為到此為止了？中國(guó)開(kāi)發(fā)者assassindesign覺(jué)得只是文本編輯器就太無(wú)聊了，又提供了涂鴉版本：
| 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> |
效果如下：
極客的創(chuàng)意的無(wú)窮的，各位讀者，你們是否有更好的創(chuàng)意，歡迎跟帖！
總結(jié)
以上是生活随笔為你收集整理的极客无极限 一行HTML5代码引发的创意大爆炸的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 花钱消除信用卡不良记录？信了你就上当了
- 下一篇： html 表格点击塌陷,HTML解决高度