javascript 随机数
返回一个随机数。
<span style="color: #003366; font-weight: bold;">function</span> RandomNumber<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
<span style="color: #000066; font-weight: bold;">return</span> Math.<span style="color: #006600;">ceil</span><span style="color: #66cc66;">(</span>Math.<span style="color: #006600;">random</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> * <span style="color: #CC0000;">85</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>javascript 示例类
这是一个如何在javascript中定义类的简单示例。<br/>该类没有特殊功能......
<span style="color: #009900; font-style: italic;">// constructor:</span>
<span style="color: #003366; font-weight: bold;">function</span> ExampleClass<span style="color: #66cc66;">(</span>p<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">(</span>!document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span> <span style="color: #000066; font-weight: bold;">return</span>; <span style="color: #66cc66;">}</span>
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">elem</span> = document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">(</span>p<span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>;
ExampleClass.<span style="color: #006600;">prototype</span> = <span style="color: #66cc66;">{</span>
<span style="color: #009900; font-style: italic;">// class variables:</span>
elem: <span style="color: #003366; font-weight: bold;">null</span>,
hoverSize: <span style="color: #3366CC;">'2em'</span>,
active: <span style="color: #003366; font-weight: bold;">false</span>,
<span style="color: #009900; font-style: italic;">// functions:</span>
setActive: <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span>s<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">active</span> = s;
<span style="color: #66cc66;">}</span>,
setHoverSize: <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span>size<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">hoverSize</span> = size;
<span style="color: #66cc66;">}</span>,
getHoverSize: <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span>size<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">hoverSize</span>;
<span style="color: #66cc66;">}</span>,
hover: <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">fontSize</span> = exampleObject.<span style="color: #006600;">getHoverSize</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">fontWeight</span> = <span style="color: #3366CC;">'bold'</span>;
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">color</span> = <span style="color: #3366CC;">'#FFFFFF'</span>;
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">backgroundColor</span> = <span style="color: #3366CC;">'#43A5E7'</span>;
<span style="color: #66cc66;">}</span>,
restore: <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">fontSize</span> = <span style="color: #3366CC;">'1em'</span>;
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">fontWeight</span> = <span style="color: #3366CC;">'normal'</span>;
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">color</span> = <span style="color: #3366CC;">'#000000'</span>; <span style="color: #009900; font-style: italic;">// black</span>
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">style</span>.<span style="color: #006600;">backgroundColor</span> = <span style="color: #3366CC;">'#EFEFEF'</span>;
<span style="color: #66cc66;">}</span>,
init: <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">setActive</span><span style="color: #66cc66;">(</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #66cc66;">)</span>;
<span style="color: #009900; font-style: italic;">// attach events:</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">(</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">active</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">elem</span>.<span style="color: #006600;">onmouseover</span> = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">hover</span>;
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">elem</span>.<span style="color: #006600;">onmouseout</span> = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">restore</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>javascript 字符串原型
演示如何创建String原型
String.<span style="color: #006600;">prototype</span>.<span style="color: #006600;">stripslashes</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">replace</span><span style="color: #66cc66;">(</span><span style="color: #0066FF;">/<.<span style="color: #006600;">*</span>?>/g</span>, <span style="color: #3366CC;">''</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>;
String.<span style="color: #006600;">prototype</span>.<span style="color: #006600;">htmlspecialchars</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
<span style="color: #003366; font-weight: bold;">var</span> str = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">replace</span><span style="color: #66cc66;">(</span><span style="color: #0066FF;">/&/g</span>, <span style="color: #3366CC;">'&amp;'</span><span style="color: #66cc66;">)</span>;
str = str.<span style="color: #006600;">replace</span><span style="color: #66cc66;">(</span><span style="color: #0066FF;">/</g</span>, <span style="color: #3366CC;">'&lt;'</span><span style="color: #66cc66;">)</span>;
str = str.<span style="color: #006600;">replace</span><span style="color: #66cc66;">(</span><span style="color: #0066FF;">/>/g</span>, <span style="color: #3366CC;">'&gt;'</span><span style="color: #66cc66;">)</span>;
str = str.<span style="color: #006600;">replace</span><span style="color: #66cc66;">(</span>/<span style="color: #3366CC;">"/g, '&quot;');
return str;
};</span>javascript DEC2HEX
将十进制值转换为十六进制值。这有助于将RGB颜色转换为HEX。
<span style="color: #003366; font-weight: bold;">function</span> dec2hex<span style="color: #66cc66;">(</span>n<span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
n = parseInt<span style="color: #66cc66;">(</span>n<span style="color: #66cc66;">)</span>; <span style="color: #003366; font-weight: bold;">var</span> c = <span style="color: #3366CC;">'ABCDEF'</span>;
<span style="color: #003366; font-weight: bold;">var</span> b = n <span style="color: #0066FF;">/ <span style="color: #CC0000;">16</span>; <span style="color: #003366; font-weight: bold;">var</span> r = n % <span style="color: #CC0000;">16</span>; b = b-<span style="color: #66cc66;">(</span>r/</span><span style="color: #CC0000;">16</span><span style="color: #66cc66;">)</span>;
b = <span style="color: #66cc66;">(</span><span style="color: #66cc66;">(</span>b>=<span style="color: #CC0000;">0</span><span style="color: #66cc66;">)</span> && <span style="color: #66cc66;">(</span>b<=<span style="color: #CC0000;">9</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span> ? b : c.<span style="color: #006600;">charAt</span><span style="color: #66cc66;">(</span>b<span style="color: #CC0000;">-10</span><span style="color: #66cc66;">)</span>;
<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #66cc66;">(</span><span style="color: #66cc66;">(</span>r>=<span style="color: #CC0000;">0</span><span style="color: #66cc66;">)</span> && <span style="color: #66cc66;">(</span>r<=<span style="color: #CC0000;">9</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span> ? b+<span style="color: #3366CC;">''</span>+r : b+<span style="color: #3366CC;">''</span>+c.<span style="color: #006600;">charAt</span><span style="color: #66cc66;">(</span>r<span style="color: #CC0000;">-10</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #009900; font-style: italic;">/*
Examples:
---------
rgb(255, 0, 0) = red color = FF0000
dec2hex(255) => FF
dec2hex(0) => 00
dec2hex(0) => 00
------------------------------------
rgb(215, 230, 250) = light blue = D7E6FA
dec2hex(255) => D7
dec2hex(0) => E6
dec2hex(0) => FA
*/</span>javascript 随机引用
返回随机引用
<span style="color: #003366; font-weight: bold;">function</span> write_quote<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
<span style="color: #003366; font-weight: bold;">var</span> quotes = <span style="color: #66cc66;">[</span>
<span style="color: #3366CC;">'no animals were harmed while making this page'</span>,
<span style="color: #3366CC;">'made in ulm'</span>,
<span style="color: #3366CC;">'this page was handmade'</span>,
<span style="color: #3366CC;">'Get <a href="http://www.mozilla.org/products/firefox/">FireFox</a> :-)'</span>
<span style="color: #66cc66;">]</span>;
<span style="color: #003366; font-weight: bold;">var</span> r = Math.<span style="color: #006600;">round</span><span style="color: #66cc66;">(</span>Math.<span style="color: #006600;">random</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> * <span style="color: #66cc66;">(</span>quotes.<span style="color: #006600;">length</span><span style="color: #CC0000;">-1</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
<span style="color: #009900; font-style: italic;">// write the quote</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">(</span>quotes<span style="color: #66cc66;">[</span>r<span style="color: #66cc66;">]</span><span style="color: #66cc66;">)</span>;
<span style="color: #009900; font-style: italic;">// or replace an HTML element:</span>
<span style="color: #009900; font-style: italic;">// document.getElementById("quote").innerHTML = quotes[r];</span>
<span style="color: #66cc66;">}</span>javascript 打开窗户
简单的javascript源代码打开弹出窗口
<span style="color: #003366; font-weight: bold;">function</span> open_window<span style="color: #66cc66;">(</span>url<span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
<span style="color: #003366; font-weight: bold;">var</span> wparams = <span style="color: #3366CC;">'toolbar=0,location=0,directories=0,status=0,menubar=0,'</span>;
wparams += <span style="color: #3366CC;">'scrollbars=0,resizable=0,width=280,height=150'</span>;
<span style="color: #003366; font-weight: bold;">var</span> window = window.<span style="color: #000066;">open</span><span style="color: #66cc66;">(</span>url, <span style="color: #3366CC;">'window_name'</span>, wparams<span style="color: #66cc66;">)</span>;
window.<span style="color: #000066;">focus</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #003366; font-weight: bold;">function</span> create_window<span style="color: #66cc66;">(</span>content<span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
<span style="color: #003366; font-weight: bold;">var</span> wparams = <span style="color: #3366CC;">'toolbar=0,location=0,directories=0,status=0,menubar=0,'</span>;
wparams += <span style="color: #3366CC;">'scrollbars=0,resizable=0,width=280,height=150'</span>;
<span style="color: #003366; font-weight: bold;">var</span> window = window.<span style="color: #000066;">open</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">''</span>, <span style="color: #3366CC;">'window_name'</span>, wparams<span style="color: #66cc66;">)</span>;
window.<span style="color: #006600;">document</span>.<span style="color: #000066;">open</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #000066; font-weight: bold;">with</span><span style="color: #66cc66;">(</span>window.<span style="color: #006600;">document</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">(</span>content<span style="color: #66cc66;">)</span>;
<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">"<br/>"</span><span style="color: #66cc66;">)</span>;
<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">"<a href=<span style="color: #000099; font-weight: bold;">\"</span>javascript:self.close();<span style="color: #000099; font-weight: bold;">\"</span>>Close window</a>"</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
window.<span style="color: #006600;">document</span>.<span style="color: #000066;">close</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
window.<span style="color: #000066;">focus</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>javascript Greasemonkey模板
<a href=\"http://greasemonkey.mozdev.org/\"> Greasemonkey </a> <a href=\"http://userscripts.org/people/5058\">脚本</a>的简单模板，准备复制和粘贴:-) <br/>（将文件命名为example.user.js，以便Greasemonkey识别它）
<span style="color: #009900; font-style: italic;">// ==UserScript==</span>
<span style="color: #009900; font-style: italic;">// @name Greasemonkey Script Name</span>
<span style="color: #009900; font-style: italic;">// @author Your name</span>
<span style="color: #009900; font-style: italic;">// @namespace http://www.example.url/to/your-web-site/</span>
<span style="color: #009900; font-style: italic;">// @description Put a good description in here</span>
<span style="color: #009900; font-style: italic;">// @license Creative Commons Attribution License</span>
<span style="color: #009900; font-style: italic;">// @version 0.1</span>
<span style="color: #009900; font-style: italic;">// @include http://www.example.org/*</span>
<span style="color: #009900; font-style: italic;">// @released 2006-04-17</span>
<span style="color: #009900; font-style: italic;">// @updated 2006-04-19</span>
<span style="color: #009900; font-style: italic;">// @compatible Greasemonkey</span>
<span style="color: #009900; font-style: italic;">// ==/UserScript==</span>
<span style="color: #009900; font-style: italic;">/*
* This file is a Greasemonkey user script. To install it, you need
* the Firefox plugin "Greasemonkey" (URL: http://greasemonkey.mozdev.org/)
* After you installed the extension, restart Firefox and revisit
* this script. Now you will see a new menu item "Install User Script"
* in your tools menu.
*
* To uninstall this script, go to your "Tools" menu and select
* "Manage User Scripts", then select this script from the list
* and click uninstall :-)
*
* Creative Commons Attribution License (--> or Public Domain)
* http://creativecommons.org/licenses/by/2.5/
*/</span>
<span style="color: #66cc66;">(</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
<span style="color: #009900; font-style: italic;">//object constructor</span>
<span style="color: #003366; font-weight: bold;">function</span> example<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
<span style="color: #009900; font-style: italic;">// modify the stylesheet</span>
<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">append_stylesheet</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'body,div { border: 1px solid red; }'</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>;
<span style="color: #009900; font-style: italic;">//create a stylesheet</span>
example.<span style="color: #006600;">prototype</span>.<span style="color: #006600;">append_stylesheet</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span>css<span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
<span style="color: #003366; font-weight: bold;">var</span> styletag = document.<span style="color: #006600;">createElement</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">"style"</span><span style="color: #66cc66;">)</span>;
styletag.<span style="color: #006600;">setAttribute</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'type'</span>, <span style="color: #3366CC;">'text/css'</span><span style="color: #66cc66;">)</span>;
styletag.<span style="color: #006600;">setAttribute</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'media'</span>, <span style="color: #3366CC;">'screen'</span><span style="color: #66cc66;">)</span>;
styletag.<span style="color: #006600;">appendChild</span><span style="color: #66cc66;">(</span>document.<span style="color: #006600;">createTextNode</span><span style="color: #66cc66;">(</span>css<span style="color: #66cc66;">)</span><span style="color: #66cc66;">)</span>;
document.<span style="color: #006600;">getElementsByTagName</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'head'</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">[</span><span style="color: #CC0000;">0</span><span style="color: #66cc66;">]</span>.<span style="color: #006600;">appendChild</span><span style="color: #66cc66;">(</span>styletag<span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>;
<span style="color: #009900; font-style: italic;">//instantiate and run </span>
<span style="color: #003366; font-weight: bold;">var</span> example = <span style="color: #003366; font-weight: bold;">new</span> example<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #009900; font-style: italic;">// you can completely copy this template, including</span>
<span style="color: #009900; font-style: italic;">// the install description, have fun! :-)</span>javascript 框架杀手
这个小代码片段将确保您的网站不会显示在框架集中。<br/>您的网站将跳出框架集。
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">(</span>top.<span style="color: #006600;">location</span> != location<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
top.<span style="color: #006600;">location</span>.<span style="color: #006600;">href</span> = document.<span style="color: #006600;">location</span>.<span style="color: #006600;">href</span>;
<span style="color: #66cc66;">}</span>javascript 更改窗口分辨率
演示如何使用JavaScript更改窗口大小。
<span style="color: #003366; font-weight: bold;">function</span> resize_window<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
<span style="color: #009900; font-style: italic;">// move the window to 0,0 (X,Y)</span>
window.<span style="color: #006600;">moveTo</span><span style="color: #66cc66;">(</span><span style="color: #CC0000;">0</span>, <span style="color: #CC0000;">0</span><span style="color: #66cc66;">)</span>;
<span style="color: #009900; font-style: italic;">// resize the window to 800x600</span>
window.<span style="color: #006600;">resizeTo</span><span style="color: #66cc66;">(</span><span style="color: #CC0000;">800</span>, <span style="color: #CC0000;">600</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
resize_window<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;javascript Object.filter
基于谓词过滤掉对象
filter.js
Object.filter = (obj,predicate) => {
var res = {}, key;
for (key in obj) {
if (predicate(obj[key])) res[key] = obj[key];
}
return res;
};