10
09/2014
data text/html
在 chrome 或者 firefox 地址栏粘贴下面代码：
data:text/html, <html contenteditable>
数据类型:html 内容可编辑
data:text/html, <textarea style=”font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none” autofocus />
autofocus 而不用 js focus
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;”>
webfont;-webkit-transition: all linear 1s;颜色算法;rem 取代 em
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>
data:application/octet-stream 改流文件，保存；escape 转义
下一个原代码有错误。思路有意思，setTimeout 保存到 localStorage，等于“永久”保存。可惜啊，chrome 现在不允许 data: 协议操作 localStorage 了似乎。SecurityError: DOM Exception 18
下一个，ajax 保存。js 写在 cloudfront
下一个 canvas 基本语法
via HTML5代码引发的创意大爆炸