Junstyle's Blog

如要获取2008年8月的天数：

new Date(2008, 8, 0).getDate();

new Date(2008, 8, 0)就是8月31号，这样就可以获取到天数了。

用google maps生成向导生成即时地图。google提供了一个向导来生成google maps的代码片段，你可以把它放入到你的网站页面中。点击此处转到向导页，并按照里面的3个简单的步骤操作。

1、定制地图的长宽、缩放级别、中心位置、中心位置的链接地址、中心位置的地址说明。当点击中心位置的那个箭头时会显示这些信息。

2、输入你网站的网址，以便生成一个API key。

3、点击生成按钮就可以生成代码了。

最后把生成的代码复制到您自己的网页中就可以使用了，以下为生成的代码例子：

  <!-- ++Begin Map Search Control Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->

  <!--
  // The Following div element will end up holding the map search control.
  // You can place this anywhere on your page
  -->
  <div id="mapsearch">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <!-- Maps Api, Ajax Search Api and Stylesheet
  // Note: If you are already using the Maps API then do not include it again
  //       If you are already using the AJAX Search API, then do not include it
  //       or its stylesheet again
  //
  // The Key Embedded in the following script tags is designed to work with
  // the following site:
  // http://www.junstyle.com.cn
  -->
  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAurOz_u21LMSjFODxuxTsbxSWkWNcz8otOi80ukkm5C_9fVjCfhS7lPl_eE2MldQL6fDI9jugOBzLoA"
    type="text/javascript"></script>
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-msw&key=ABQIAAAAurOz_u21LMSjFODxuxTsbxSWkWNcz8otOi80ukkm5C_9fVjCfhS7lPl_eE2MldQL6fDI9jugOBzLoA"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>

  <!-- Map Search Control and Stylesheet -->
  <script type="text/javascript">
    window._uds_msw_donotrepair = true;
  </script>
  <script src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js?mode=new"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css");
  </style>

  <style type="text/css">
    .gsmsc-mapDiv {
      height : 275px;
    }

    .gsmsc-idleMapDiv {
      height : 275px;
    }

    #mapsearch {
      width : 365px;
      margin: 10px;
      padding: 4px;
    }
  </style>
  <script type="text/javascript">
    function LoadMapSearchControl() {

      var options = {
            zoomControl : GSmapSearchControl.ZOOM_CONTROL_ENABLE_ALL,
            title : "Googleplex",
            url : "http://www.google.com/corporate/index.html",
            idleMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM,
            activeMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM
            }

      new GSmapSearchControl(
            document.getElementById("mapsearch"),
            "1600 Amphitheatre Parkway, Mountain View, CA",
            options
            );

    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadMapSearchControl);
  </script>
  <!-- ++End Map Search Control Wizard Generated Code++ -->

把以上的代码放置到你的页面的body之间，不要放在head里面。

本文参考自：http://econym.org.uk/gmap/wizard.htm

JS getYear在firefox下有问题

用了JS的getYear()方法，但是发现生成的代码竟然有108(本应该是2008)，发现这是firefox下的问题。在 Firefox 里面 getYear 返回的是 "当前年份-1900" 的值，而IE里面则：当today的年份小于2000的时候，和firefox一样。当today的年份大于等于2000的时候 在返回的基础上额外加上1900 如：today年份是1999 返回99（同firefox) today年份是2000 返回100+1900=2000 所以最好用 getFullYear或者getUTCFullYear 去获取完整的年份 var year = today.getFullYear();在IE,FireFox都适用。

如：（js代码）

var today = new Date();

var fullyear = today.getFullYear();

var year = today.getYear();

document.write(fullyear + "<br>");

document.write(year + "<br>");

结果：

2010

110

一个求时间差的方法

function DateDiff(sDate1,sDate2){
//sDate1和sDate2是年-月-日格式
var arrDate,objDate1,objDate2,intDays;
arrDate=sDate1.split("-");
objDate1=new Date(arrDate[1]+'-'+arrDate[2]+'-'+arrDate[0]);//转换为月-日-年格式
arrDate=sDate2.split("-");
objDate2=new Date(arrDate[1]+'-'+arrDate[2]+'-'+arrDate[0]);
intDays=parseInt(Math.abs(objDate1-objDate2)/1000/60/60/24); //把相差的毫秒数转换为天数
return intDays;
}
alert(DateDiff("2007-1-1","2008-1-1"));

Javascript里面的new Date("xxxx/xx/xx")这个日期的构造方法有一个妙处，当你传入的是"xxxx/xx/0"（0号）的话，得到的日期是"xx"月的前一个月的最后一天（"xx"月的最大取值是69，题外话），如果传入"1999/13/0"，会得到"1998/12/31"。而且最大的好处是当你传入"xxxx/3/0"，会得到xxxx年2月的最后一天，它会自动判断当年是否是闰年来返回28或29，不用自己判断，太方便了！！所以，我们想得到选择年选择月有多少天的话，只需要

var d=new Date("选择年/选择月+1/0");

alert(d.getDate());

下面是使用Javascript编写的获取某年某月有多少天的getDaysInOneMonth(year, month)方法：

function getDaysInOneMonth(year, month){
month = parseInt(month,10)+1;
var d= new Date(year+"/"+month+"/0");
return d.getDate();
}

在javascript里面，小数只能进行相似计算，例如：5.06+1.30，你得到的结果会是6.359999999999999，但有的小数计算又是正确的，如果计算出现了近似值，你可以用如下的方法计算：

var number1 = 5.06;
var number2 = 1.30;
var sum = (number1 * 100 + number2 * 100) / 100; //sum=6.36，不是一个近似值

这样计算可以得到一个准确的结果。

一、字符串的连接

通常我们进行字符串连接是这样的：

var veryLongMessage =
'This is a long string that due to our strict line length limit of' +
maxCharsPerLine +
' characters per line must be wrapped. ' +
percentWhoDislike +
'% of engineers dislike this rule. The line length limit is for ' +
' style purposes, but we don't want it to have a performance impact.' +
' So the question is how should we do the wrapping?';

可以用如下的数字代替：

var veryLongMessage =
['This is a long string that due to our strict line length limit of',
maxCharsPerLine,
' characters per line must be wrapped. ',
percentWhoDislike,
'% of engineers dislike this rule. The line length limit is for ',
' style purposes, but we don't want it to have a performance impact.',
' So the question is how should we do the wrapping?'
].join();

二、通过助手函数生成字符串

通过把字符串生成器传递到函数中来构造一个长字符串,要避免临时的String结果，例如,假设函数buildMenuItemHtml_ 需要用文字串(literal)和变量来构造String,并在内部使用了String构造器.而不是如下方式使用:
var strBuilder = [];
for (var i = 0, length = menuItems.length; i < length; i++) {
strBuilder.push(this.buildMenuItemHtml_(menuItems[i]));
}
var menuHtml = strBuilder.join();

推荐如下方式:

var strBuilder = [];
for (var i = 0, length = menuItems.length; i < length; i++) {
this.buildMenuItem_(menuItems[i], strBuilder);
}
var menuHtml = strBuilder.join();

三、定义类方法(Defining class methods)

下面的代码是低效率的,每生成一次baz.Bar对象,就会为其生成一个方法和闭包.
baz.Bar = function() {
// 构造函数, constructor body
this.foo = function() {
// 方法,method body
};
}

推荐方式是:
baz.Bar = function() {
// 构造函数,constructor body
};

baz.Bar.prototype.foo = function() {
//方法, method body
};

这种方式,不管有多少个baz.Bar对象生成,仅仅只建立一个方法foo且没有产生闭包.

四、初始化实例变量(Initializing instance variables)

在原型(prototype)上用值类型[value type](而不是引用类型[reference type])声明或初始化实例变量.这避免了在每次调用构造函数时运行不必要的初始化代码.(有些情况下是不能这样做的:实例变量的初始值依赖于构造参数或是在构造时的其它状态的变量(some other state at time of construction))
例子:
foo.Bar = function() {
this.prop1_ = 4;
this.prop2_ = true;
this.prop3_ = [];
this.prop4_ = 'blah';
};

推荐的写法:
foo.Bar = function() {
this.prop3_ = [];
};
foo.Bar.prototype.prop1_ = 4;
foo.Bar.prototype.prop2_ = true;
foo.Bar.prototype.prop4_ = 'blah';

五、避开闭包的陷阱(Avoiding pitfalls with closures)

闭包是JavaScript的一个强大且有用的特色;但是它有几个缺点:
1,它们是常见的内存泄漏源
2,生成闭包明显的比生成不是闭包的内部函数慢,比调用静态函数更慢.例如
function setupAlertTimeout() {
var msg = 'Message to alert';
window.setTimeout(function() { alert(msg); }, 100);
}

上面比下面的写法要慢:(上面的代码产生了闭包)
function setupAlertTimeout() {
window.setTimeout(function() {
var msg = 'Message to alert';
alert(msg);
}, 100);
}

上面比下面的写法要慢:
function alertMsg() {
var msg = 'Message to alert';
alert(msg);
}

function setupAlertTimeout() {
window.setTimeout(alertMsg, 100);
}

3,它们增加了变量的作用域(scope chain)的层次.当浏览器解析属性的时候,将会检查所有层次的作用域.见下面的例子:
var a = 'a';
function createFunctionWithClosure() {
var b = 'b';
return function () {
var c = 'c';
a;
b;
c;
};
}

var f = createFunctionWithClosure();
f();

当执行f方法的时候,引用a比引用b慢,引用b比引用c慢.
IE中闭包更多信息可以查看 IE+JScript Performance Recommendations Part 3: JavaScript Code inefficiencies

六、避免用with(Avoiding with)

在你代码中避免用with.它对性能有负面影响,因为它修改了作用域,在其它作用域查找变量的开销很大.

七、避免浏览器的内存泄露(Avoiding browser memory leaks)

内存泄露是web应用程序普遍存在的问题,它会产生巨大的性能危害(hit).随着浏览器内存使用增加,你的web应用程序,用户系统其它部分操作,将变的慢起来.大部分web应用程序的内存泄露是因为在 JavaScript脚本和Dom之间生成了循环引用(例如:javascript脚本和IE com结构之间,javascript脚本和Firefox xpcom结构之间)
下面是避免内存泄漏一些经验法则：

使用事件系统关联事件处理函数(Use an event system for attaching event handlers)
大部分的循环引用模式[DOM 元素-->事件处理函数(event handler)-->闭包(closure scope)-->DOM元素].为了避免这个问题,可以用经过充分测试事件系统(event system)来关联事件处理函数(event handlers),例如:Google doctype,Dojo,JQuery
另外,在IE中使用用内联事件函数(inline event handlers)会导致另一种的类型的泄露.这不是通常的循环引用类型的泄露,而是由内部临时匿名脚本对象产生的泄露．详细信息,请看文章"DOM insertin Order Leak Model"和例子JavaScript Kit tutorial.

避免扩展(expando)属性
扩展(expando)属性是把任意JavaScript的属性附加的到DOM元素上,这是循环引用产生的根源．你可以不产生内存泄露来扩展 (expando)属性,但是这是很容易产生内存泄露的．泄露模式是［DOM元素-->扩展(via expando)-->中间对象(intermediary object)-->DOM元素］.最好是避免使用用它们．如果你用到它们,仅可使用原始类型(primitive types)作为值．如果不是原始类型,当扩展(expando)属性不在使用的时候,要把它置为空．可以参考文章"Circular References"

Google发布了Google Closure Compiler，javascript脚本压缩工具，google提供了3种可使用的方式：

1、网页在线压缩

地址为：http://closure-compiler.appspot.com/，打开网页即可，粘贴上脚本，即可压缩代码了。以下为界面截图：

代码放在上面图片的红边矩形那里，上面//开头的是设置项，不要删掉了，如果你的脚本用到了另外一个脚本文件，可以在最上面的Add a URL处添加，因为它压缩不仅仅是缩短你的代码，还会重新编写你的代码，所以要确保代码语法正确。点击“Compile”按钮后，将提交到google后台压缩，压缩完成后会在右边显示压缩结果，也会出现一个链接下载压缩后的代码！

2、压缩服务API

使用此API可以直接提交要压缩的代码至google，它会返回结果给你。

<html>
  <body>
    <form action="http://closure-compiler.appspot.com/compile" method="POST">
    <p>Type JavaScript code to optimize here:</p>
    <textarea name="js_code" cols="50" rows="5">
    function hello(name) {
      // Greets the user
      alert('Hello, ' + name);
    }
    hello('New user');
    </textarea>
    <input type="hidden" name="compilation_level" value="WHITESPACE_ONLY">
    <input type="hidden" name="output_format" value="text">
    <input type="hidden" name="output_info" value="compiled_code">
    <br><br>
    <input type="submit" value="Optimize">
    </form>
  </body>
</html>

注意Form的action地址，还有后的hidden里面的参数，都是可以自定义的，更多API的介绍可以看这里：http://code.google.com/closure/compiler/docs/api-ref.html。
以下为上面代码的界面截图：

3、使用Closure Compiler Application

一个java写的命令行程序，通过命令行直接压缩要压缩的文件，经常要压缩javascript脚本的话，这个是最方便的方式了。把程序（javascript脚本压缩工具）下载到本地后，命令行转到程序的文件夹下。假设你有一个javascript脚本文件F:\scripts\test.js，把压缩后的文件放到F:\scripts\test.min.js，命令行代码如下：

java -jar compiler.jar --js "F:\scripts\test.js" --js_output_file "F:\scripts\test.min.js"

更多命令行帮助可以使用以下命令查看：

java -jar compiler.jar --help

wordpress中装上代码高亮插件后，我装的是这个代码高亮插件（SyntaxHighlighter Evolved），其它的代码高亮插件也是一样，大部分都是用的SyntaxHighlighter，包装了一下而已。这个插件有一个比较遗憾的地方，就是没有运行代码的功能，一段html，想很方便的显示代码的效果，还必须把代码copy出来、粘贴才能看到效果。把下面这段代码加入到里的主题文件里面，在html代码片段中，鼠标放在代码片段上的时候就会显示“运行代码”的按钮。主题需引用了jQuery，或者自己加个jQuery的引用也行。

■ 主题中带有jQuery的代码如下：

<!-代码高亮加“运行代码” start-->
<script>
function runcode(code_id){
	var win1=window.open();
	win1.document.open();
	win1.document.write(
		SyntaxHighlighter.utils.unindent(
			SyntaxHighlighter.utils.fixInputString(SyntaxHighlighter.vars.highlighters[code_id].originalCode)
			.replace(/&lt;/g, '<')
			.replace(/&gt;/g, '>')
			.replace(/&amp;/g, '&')
		)
	);
	win1.document.close();
}
jQuery("div[class=syntaxhighlighter  xml]").live("mouseover", function(){
	if(jQuery(".runcode", this).length==0)
		jQuery(".toolbar", this).prepend('<a href="javascript:void(0);" onclick="runcode(jQuery(this).parent().parent().parent().attr(\'id\'))" class="item runcode" style="font-size:12px; width:48px; height:16px; text-indent:0px !important; line-height:16px; margin-top:0px !important;">运行代码</a>');
});
</script>
<!-代码高亮加“运行代码” end-->

■ 主题中不带有jQuery的代码如下：

<!-代码高亮加“运行代码” start-->
<script type="text/javascript" src="修改为你的jquery文件的路径"></script>
<script>
function runcode(code_id){
	var win1=window.open();
	win1.document.open();
	win1.document.write(
		SyntaxHighlighter.utils.unindent(
			SyntaxHighlighter.utils.fixInputString(SyntaxHighlighter.vars.highlighters[code_id].originalCode)
			.replace(/&lt;/g, '<')
			.replace(/&gt;/g, '>')
			.replace(/&amp;/g, '&')
		)
	);
	win1.document.close();
}
jQuery("div[class=syntaxhighlighter  xml]").live("mouseover", function(){
	if(jQuery(".runcode", this).length==0)
		jQuery(".toolbar", this).prepend('<a href="javascript:void(0);" onclick="runcode(jQuery(this).parent().parent().parent().attr(\'id\'))" class="item runcode" style="font-size:12px; width:48px; height:16px; text-indent:0px !important; line-height:16px; margin-top:0px !important;">运行代码</a>');
});
</script>
<!-代码高亮加“运行代码” end-->

用javascript在不同的浏览器中取窗口的可视高度和页面的内容高度是个烦心的事，所用的html标准不同、页面的内容高度是否超过窗口的可视高度都会对取值产生影响，所用到的取值方法也不同。

一、取窗口的可视高度（即浏览器的上面的工具栏到下面的状态栏之间的高度）

1、IE中的取法

document.getElementsByTagName("html")[0].offsetHeight;

2、Firefox、Chrome、Opera中取法

window.innerHeight;

二、取页面内容的高度（所有浏览器中的取法）

Math.max(document.getElementsByTagName("body")[0].scrollHeight, 窗口的可视高度)

三、完整的代码如下：

//窗口的可视高度
var windowHeight=document.all ? document.getElementsByTagName("html")[0].offsetHeight : window.innerHeight;
//页面的内容高度
var pageHeight=Math.max(windowHeight, document.getElementsByTagName("body")[0].scrollHeight);

更新：
2010-02-02 : 修正了有的设置项无效的bug
2009-10-16 : 全面重写代码，设置选项更丰富，可设查询项，可设是否自动启动，可设快捷键（初始快捷键F9）；alexa加入昨日排名、一周平均和三月平均；百度加入首页快照日期、首页在百度中的位置；PR并入Google项；感谢jok的建议！
2009-09-18 : 修正Alexa显示的问题（alexa网站改变了html)，同时加入脚本更新功能，点击右上角的问号即可查看脚本是否有新版本
2009-09-11 : 修正获取PR出现乱码的问题
2009-09-07 : 增加排除sogou页面的指令，以前忘记排除，以至于输入sogou的验证码老是提示错误
2009-09-01 : 优化显示效果，改为圆角矩形
2009-08-28：修改显示的CSS样式，保证在某些网站不变形
2009-08-23：加入PR和Alexa显示

前段时间总是折腾firefox，装上一些插件后，感觉使用起来很不错，装上了GreaseMonkey，就可以随心所欲的折腾当前打开的网页了，可惜没研究过firefox的插件是怎么做的，但用GreaseMonkey写上几个脚本还是很容易的。其实就是javascript脚本，但可以用GM里面内置的几个方法。那个向任何链接发起请求的方法很爽，不会出现跨域问题了，也不用使用代理页面来发起请求了，直接就可以获取任何链接的源码，但也出现了一个编码的问题，gb2312的页面有时候会出现中文乱码的问题，比较头疼。

今天发一个显示每个网站的收录数和外链数、还有PR、Alexa的脚本。安装脚本后会在每个页面的右上角显示这些信息，包括的搜索引擎有百度、谷歌、雅虎、搜狗、搜搜、有道和必应。搜狗的查询次数多了的话会提示输入验证码，这个会有提示的，点击链接进去输入验证码就OK了。脚本已经发布到userscripts.org（一个专门发布GM脚本的网站），脚本链接地址：http://userscripts.org/scripts/show/56095，点击进去后会有安装按钮或者直接点击此处安装，安装后就可以使用了，当然前提是你已经安装了GreaseMonkey，脚本源码地址：http://userscripts.org/scripts/review/56095。欢迎提出建议！以下为显示效果：

(全文 ...)