饰品网站建设规划书,搭建微信网站,网页设计软件免费下载,个人网站模板怎么用摘要#xff1a;一行HTML5代码能做什么#xff1f;国外开发者Jose Jesus Perez Aguinaga写了一行HTML5代码的文本编辑器。这件事在分享到Code Wall、Hacker News之后#xff0c;引起了众多开发者的注意#xff0c;纷纷发表了自己的创意。 这是最初的HTML5代码#xff0c;它…摘要一行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 stylefont-size: 1.5em; width: 100%; height: 100%; border: none; outline: none autofocus / 但bgrins依旧觉得不够好看继续修改代码这段代码会在你打字的时候改变“编辑器”的背景颜色非常绚丽 1 2 3 4 5 6 7 8 data:text/html, htmlheadlink hrefhttp://fonts.googleapis.com/css?familyOpenSans relstylesheet typetext/cssstyle typetext/css html { font-family: Open Sans } * { -webkit-transition: all linear 1s; }/stylescriptwindow.onloadfunction(){var efalse;var t0;setInterval(function(){if(!e){tMath.round(Math.max(0,t-Math.max(t/3,1)))}var n(255-t*2).toString(16);document.body.style.backgroundColor#ffnn},1e3);var nnull;document.onkeydownfunction(){tMath.min(128,t2);etrue;clearTimeout(n);nsetTimeout(function(){efalse},1500)}}/script/headbody contenteditable stylefont-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem; 网友jecxjo希望能有存储功能 1 data:text/html,button onClickSaveTextArea()Save/button script languagejavascript typetext/javascript function SaveTextArea() { window.location data:application/octet-stream, escape(txtBody.value); } /script textarea idtxtBody stylefont-size: 1.5em; width: 100%; height: 100%; boarder: none; outline: none autofocus /textarea 但上面的代码是以文件形式存储samsonjs觉得不够方便而且需要点击按钮于是添加了自动保存功能 1 data:text/html,html langenheadstyle 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 /headbodyh1Notepad (type below, notes persist)/h1 p idnote 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 typetext/css #e { position:absolute; top:0; right:0; bottom:0; left:0; font-size:16px; } /style div ide/div script srchttp://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js/script script srchttp://code.jquery.com/jquery-1.9.0.min.js/script script var myKeySecretKeyz; $(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 myKeyencodeURIComponent(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 typetext/css#e{position:absolute;top:0;right:0;bottom:0;left:0;}/stylediv ide/divscript srchttp://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js typetext/javascript charsetutf-8/scriptscriptvar eace.edit(e);e.setTheme(ace/theme/monokai);e.getSession().setMode(ace/mode/ruby);/script 效果如下图 实际上如果minikomi的代码已经支持多种语言高亮如Python只需要把“markdown”换成“python”效果如下 你以为到此为止了中国开发者assassindesign觉得只是文本编辑器就太无聊了又提供了涂鸦版本 1 data:text/html, bodycanvas iddyDraw你的浏览器不支持HTML5 Canvas/canvas/bodyscriptfunction $(id){return document.getElementById(id);} $(dyDraw).widthdocument.body.clientWidth;$(dyDraw).heightdocument.body.clientHeight;if(window.addEventListener){window.addEventListener(load,function(){var canvas,canvastext;var huafalse;function dyDrawing(){canvas$(dyDraw);canvastextcanvas.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.layerX0){xdy.layerX;ydy.layerY;}else if(dy.offsetX||dy.offsetX0){xdy.offsetX;ydy.offsetY;} x-dyDraw.offsetLeft;y-dyDraw.offsetTop;if(dy.typemousedown){huafalse;canvastext.beginPath();canvastext.moveTo(x,y);huatrue;}else if(dy.typemousemove){if(hua){canvastext.strokeStylergb(255,0,0);canvastext.lineWidth9;canvastext.lineTo(x,y);canvastext.stroke();}}else if(dy.typemouseup){huafalse;}} dyDrawing();},false);}/script 效果如下 极客的创意的无穷的各位读者你们是否有更好的创意欢迎跟帖
