JavaScript代码片段

发表于 | 分类于

编辑器

在html5中新多了一个特性，叫做contenteditable,这个特性可以让html里的一个元素变成可编辑状态。因此，我们可以通过这个属性来构造一个简单的文本编辑器。
在浏览器里新建一个标签页输入网址
data:text/html,<html contenteditable>
你会发现你的浏览界面变成了一个简单的文本编辑器。

montas 的改造：You can use textarea and make it “invisible” if you want autofocus.

1
data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />

bgrins 的改造：编辑内容时，自动变换背景颜色；停止后变换白色。

1
data:text/html, <html><head><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;">

fvsch 的改造：

1
data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

Ruby 代码高亮的编辑器

This bookmarklet gives you a code editor in your browser with a single click.

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>

如果把上面的 ace/mode/ruby 改成 ace/mode/python，那么就得到了一个 Python 版的编辑器咯。其他语言依此类推。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
改造成支持其他语言语法高亮的，可把 ace/mode/ruby 替换为：
 https://gist.github.com/4670615

For other language: Instead of ace/mode/ruby, Use

Markdown -> ace/mode/markdown
Python -> ace/mode/python
C/C++ -> ace/mode/c_cpp
Javscript -> ace/mode/javascript
Java -> ace/mode/java
Scala- -> ace/mode/scala
CoffeeScript -> ace/mode/coffee
and
css, html, php, latex, tex, sh, sql, lua, clojure, dart, typescript, go, groovy, json, jsp, less, lisp,
lucene, perl, powershell, scss, textile, xml, yaml, xquery, liquid, diff
and many more...

For other theme: Instead of ace/theme/monokai, Use

Eclipse -> ace/theme/eclipse
TextMate -> ace/theme/textmate
and
xcode, vibrant_ink, solarized_dark, solarized_light, tomorrow, tomorrow_night, tomorrow_night_blue, twilight, tomorrow_night_eighties, pastel_on_dark
and some more....

修改网页

打开chrome的console控制台,输入
document.body.contentEditable='true';

将网页进行反转

只需要在css文件里增加如下代码：

1
2
3
4
5
6
7
8
9
html{
 	filter:fliph;
 	}/*ie fliph(水平翻转滤镜)，还有flipv垂直翻转滤镜*/
 	body{
 	-webkit-transform: rotateY(180deg);
 	transform: rotateY(180deg);
 	-moz-transform: skew(0deg, 180deg) scale(-1, 1);
 	-o-transform: skew(0deg, 180deg) scale(-1, 1);
 	}

如果想让网页只旋转10度，则可以这样写：

1
2
3
4
5
6
7

body {
	transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	}

书签栏代码

SyncUI – 跨设备同步测试

https://syncui.com/

1
javascript:(function (w, d, nmsp, st) { w[nmsp] = w[nmsp] || function() {(w[nmsp].q = w[nmsp].q || []).push(arguments); }; var s = d.createElement(st), fst =d.getElementsByTagName('head')[0]; s.async = 1; s.src = "//syncui.com/hub?v=" + (new Date()).getTime(); fst.appendChild(s); })(window, document, "syncui", "script");syncui("//your id");

For instapaper

1
javascript:function iprl5(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location;try{if(!b)throw(0);d.title='(Saving...) '+d.title;z.setAttribute('src',l.protocol+'//www.instapaper.com/j/iOpUfQYWDESe?u='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(z);}catch(e){alert('Please wait until the page has loaded.');}}iprl5();void(0)

For evernote

1
2
javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var%20x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new%20Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,’script’):F[i](‘script’);E[r](‘id’,b);E[r](‘src’,I+g+T);E[r](b,u);(F[e](‘head’)[0]||F[e](‘body’)[0]).appendChild(E);E=new%20Image;E[r](‘src’,I+L);})(document,’createElement’,'setAttribute’,'getElementsByTagName’,'FirebugLite’,’4′,’firebug-lite.js’,'releases/lite/latest/skin/xp/sprite.png’,'https://getfirebug.com/’,'#startOpened’);

Google翻译

1
javascript:(function(){var%20s%20=%20document.createElement('script');%20s.type%20=%20'text/javascript';%20s.src%20=%20'http://labs.microsofttranslator.com/bookmarklet/default.aspx?f=js&to=zh-chs';%20document.body.insertBefore(s,%20document.body.firstChild);})()

Remarkerbe

Remarkerbe

1
javascript:(function(){var%20createElement=function(tag,attrs){var%20elem=document.createElement(tag);for(var%20key%20in%20attrs){elem.setAttribute(key,attrs[key]);};return%20elem;};var%20loadJS=function(src,success){var%20domScript=createElement('script',{'src':src,'type':'text/javascript'});success=success||function(){};domScript.onload=domScript.onreadystatechange=function(){if(!this.readyState||'loaded'===this.readyState||'complete'===this.readyState){success();this.onload=this.onreadystatechange=null;this.parentNode.removeChild(this);};};document.body.appendChild(domScript);};loadJS('http://code.jquery.com/jquery-1.8.1.min.js',function(){loadJS('http://remarker.be/js/markalbe.js');});}());

让图片飞起来

1
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; var DI= document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5+"px"; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5+"px"}R++}tag=setInterval('A()',5 );document.onmousedown=function(){clearInterval(tag);for(i=0; i<DIL; i++){DI[i].style.position="static";}}; void(0)

让网页可编辑

1
javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);

网页射击游戏

这个游戏可以在任何网页里面玩，把下面代码粘贴到地址栏回车，按空格键进行射击，W键可前进，A、D键或者方向键可改变射击方向。

1
javascript:var%20s%20=%20document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://erkie.github.com/asteroids.min.js';void(0);