颜色拾取器

07:53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>颜色选择器</title>
<style type="text/css">
body{
  text-align:center;
}
</style>
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
<!--
var ColorHex = Array('00','33','66','99','CC','FF')
var SpColorHex = new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current = null;
var select_opener = '';
function initcolor(evt) {
  var colorTable=''
  for (i=0;i<2;i++) {
    for (j=0;j<6;j++) {
      colorTable=colorTable+'<tr height=15>'
      colorTable=colorTable+'<td width=15 style="background-color:#000000">'
      if (i==0){
        colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'}
      else{
        colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+SpColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'}
      colorTable=colorTable+'<td width=15 style="background-color:#000000">'
      for (k=0;k<3;k++) {
        for (l=0;l<6;l++) {
          colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'
        }
      }
    }
  }
  colorTable='<table border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:337px;" bordercolor="000000">'
  +'<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">'
  +'<span style="float:left;color:#999999;"></span>'
  +'<span style="float:right;padding-right:3px;cursor:pointer;" onclick="colorclose()">×关闭</span>'
  +'</td></table>'
  +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">'
  +colorTable+'</table>';
  document.getElementById("colorpane").innerHTML=colorTable;
  var current_x = document.getElementById(select_opener).offsetLeft;
  var current_y = document.getElementById(select_opener).offsetTop;

  document.getElementById("colorpane").style.left = current_x + "px";
  document.getElementById("colorpane").style.top = current_y + "px";
}
function doclick(obj){
  document.getElementById(select_opener).value = rgb2hex(obj);
  colorclose();
}
function colorclose(){
  document.getElementById("colorpane").style.display = "none";
}
function coloropen(event, opener){
  document.getElementById("colorpane").style.display = "";
  select_opener = opener;
}

//转到固定长度的十六进制字符串,不够则补0
function zero_fill_hex(num, digits) {
  var s = num.toString(16);
  while (s.length < digits)
    s = "0" + s;
  return s;
}

function rgb2hex(rgb) {

  if (rgb.charAt(0) == '#')
    return rgb;
  var n = Number(rgb);
  var ds = rgb.split(/\D+/);
  var decimal = Number(ds[1]) * 65536 + Number(ds[2]) * 256 + Number(ds[3]);
  return "#" + zero_fill_hex(decimal, 6);
}
window.onload = initcolor;
</script>
</p>
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="text" value="颜色选择" onclick="coloropen(event, 'inputcolor')" id="inputcolor" />
</p>
<p> </p>
<div id="colorpane" style="position:absolute;z-index:999;display:none;"></div>
</body>
</html>

hoverIntent 鼠标事件插件

02:57

hoverIntent jQuery Plugin

Mouse Event

02:46

鼠标事件,总是难以处理。mouseover, mouseout在 FF 下跑还比较正常,在 IE 下就像是患了抽搐症,根本就无法控制。

看了如下的文章,终其原因是 Javascript 的冒泡事件。
还是摘抄了过来~

TopExampleMousedown, mouseup, clickDblclickMousemoveMouseover and mouseoutrelatedTarget, fromElement, toElementCross–browser scriptsMousing out of a layerMouseenter and mouseleaveEnd

We’ll go through all mouse events: mousedown, mouseup and click, dblclick, mousemove and finally mouseover and mouseout. Then I explain the relatedTarget, fromElement and toElement event properties. Finally the Microsoft proprietary mouseenter and mouseleave events.

For browser compatibility, see the Event Compatibility Tables page.

Example

Here’s a small example. Try it to better understand the explanations below.
Mousedown, mouseup, click and dblclick are registered to the link. You’ll see the events that take place in the textarea, or in an alert, if you so choose.

The event handlers are registered on this link.
Clear textarea.

Show alert instead of writing to textarea

Mousedown, mouseup, click

If the user clicks on an element no less than three mouse events fire, in this order:

   1. mousedown, user depresses the mouse button on this element
   2. mouseup, user releases the mouse button on this element
   3. click, one mousedown and one mouseup detected on this element

In general mousedown and mouseup are more useful than click. Some browsers don’t allow you to read out mouse button information onclick. Furthermore, sometimes the user does something with his mouse but no click event follows.

Suppose the user depresses the mouse button on a link, then moves his mouse off the link and then releases the mouse button. Now the link only registers a mousedown event. Similarly, if the user depresses the mouse button, then moves the mouse over a link and then releases the mouse button, the link only registers a mouseup. In neither case does a click event fire.

Whether or not this is a problem depends on the user interaction you want. But you should generally register your script onmousedown/up, unless you’re completely sure you want the click event and nothing else.

If you use alerts in handling these events, the browser may lose track of which event took place on which element and how many times it took place, messing up your scripts. So it’s best not to use alerts.

Dblclick

The dblclick event is rarely used. Even when you use it, you should be sure never to register both an onclick and an ondblclick event handler on the same HTML element. Finding out what the user has actually done is nearly impossible if you register both.

After all, when the user double–clicks on an element one click event takes place before the dblclick. Besides, in Netscape the second click event is also separately handled before the dblclick. Finally, alerts are dangerous here, too.

So keep your clicks and dblclicks well separated to avoid complications.

Mousemove

The mousemove event works fine, but you should be aware that it may take quite some system time to process all mousemove events. If the user moves the mouse one pixel, the mousemove event fires. Even when nothing actually happens, long and complicated functions take time and this may affect the usability of the site: everything goes very slowly, especially on old computers.

Therefore it’s best to register an onmousemove event handler only when you need it and to remove it as soon as it’s not needed any more:

element.onmousemove = doSomething;
// later
element.onmousemove = null;
Mouseover and mouseout

Take another look at the example, switch the mouseovers on and try them. The example adds an onmouseover event handler to ev3 only. However, you’ll notice that a mouseover event takes place not only when the mouse enters ev3′s area, but also when it enters the area of ev4 or the span. In Mozilla before 1.3, the event even fires when the mouse enters the area of a text!

The reason for this is of course event bubbling. The user causes a mouseover event on ev4. There is no onmouseover event handler on this element, but there is one on ev3. As soon as the event has bubbled up to this element, the event handler is executed.

Now this setup, though completely correct, gives us some problems. Our first problem is targeting. Suppose the mouse enters ev4:

-----------------------------------------
| This is div id="ev3"                  |
|   -----------------------------       |
|   | This is div id="ev4"      |       |
|   | --------              <--------   |
|   | | span |                  |       |
|   | |      |                  |       |
|   | --------                  |       |
|   -----------------------------       |
-----------------------------------------

<--------: mouse movement

Now the target/srcElement of this event is ev4: it’s the element the event took place on, since the user mouses over it. But when this happens:

-----------------------------------------
| This is div id="ev3"                  |
|   -----------------------------       |
|   | This is div id="ev4"      |       |
|   | --------                  |       |
|   | | span |                  |       |
|   | |    -------->            |       |
|   | --------                  |       |
|   -----------------------------       |
-----------------------------------------

-------->: mouse movement

the event has exactly the same target/srcElement. Here, too, the mouse enters ev4. Nonetheless you might want do one thing when the mouse comes from ev3 and another thing when it comes from the SPAN. So we need to know where the mouse comes from.

relatedTarget, fromElement, toElement

W3C added the relatedTarget property to mouseover and mouseout events. This contains the element the mouse came from in case of mouseover, or the element it goes to in case of mouseout.

Microsoft created two properties to contain this information:

  • fromElement refers to the element the mouse comes from. This is interesting to know in case of mouseover.
  • toElement refers to the element the mouse goes to. This is interesting to know in case of mouseout.

In our first example, relatedTarget/fromElement contains a reference to ev3, in our second example to the SPAN. Now you know where the mouse came from.

Cross–browser scripts

So if you want to know where the mouse comes from in case of mouseover, do:

function doSomething(e) {
	if (!e) var e = window.event;
	var relTarg = e.relatedTarget || e.fromElement;
}

If you want to know where the mouse goes to in case of mouseout, do:

function doSomething(e) {
	if (!e) var e = window.event;
	var relTarg = e.relatedTarget || e.toElement;
}
Mousing out of a layer

In a layer-based navigation you may need to know when the mouse leaves a layer so that it can be closed. Therefore you register an onmouseout event handler to the layer. However, event bubbling causes this event handler to fire when the mouse leaves any element inside the layer, too.

--------------
| Layer      |.onmouseout = doSomething;
| --------   |
| | Link | ----> We want to know about this mouseout
| |      |   |
| --------   |
| --------   |
| | Link |   |
| |    ----> | but not about this one
| --------   |
--------------
---->: mouse movement

Another show stopper is that when you move the mouse into the layer, and then onto a link, browsers register a mouseout event on the layer! It doesn't make much sense to me (the mouse is still in the layer), but all browsers agree on this one.

So how do we reject any mouseout that does not take place when the mouse actually leaves the layer?

function doSomething(e) {
	if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;
	// Mouseout took place when mouse actually left layer
	// Handle event
}

First get the event target, ie. the element the mouse moved out of. If the target is not the DIV (layer), end the function immediately, since the mouse has certainly not left the layer.

If the target is the layer, we're still not sure if the mouse left the layer or entered a link within the layer. Therefore we're going to check the relatedTarget/toElement of the event, ie. the element the mouse moved to.

We read out this element, and then we're going to move upwards through the DOM tree until we either encounter the target of the event (ie. the DIV), or the body element.

If we encounter the target the mouse moves towards a child element of the layer, so the mouse has not actually left the layer. We stop the function.

When the function has survived all these checks we're certain that the mouse has actually left the layer and we can take appropriate action (usually making the layer invisible).
Mouseenter and mouseleave

Microsoft has another solution. It has created two new events mouseenter and mouseleave. They are almost the same as mouseover and mouseout except that they don’t react to event bubbling. Therefore they see the entire HTML element they’re registered to as one solid block and don’t react to mouseovers and –outs taking place inside the block.

So using these events solves our problem too: they react only to mouseovers/outs on the element they’re registered to.

At the moment these events are only supported by Explorer 5.5 on Windows and higher. Maybe the other browser vendors will copy these events.

看完,用上上面所说的。结果还是不令人满意。
后面,还是找了jQuery 的一个插件,才算是基本解决问题。

有趣的浏览器地址栏Javascript代码

03:08

FROM: http://www.kenengba.com/post/483.html/trackback

1 编辑网页

在地址栏输入下面的代码按 enter, 网页上所有元素都能变成可编辑状态, 你可以移动, 调整元素大小. 如果你只是讨厌某个网站想发泄一下, 我建议你使用 NetDisater.

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

2 无敌风火轮

在地址栏运行下面的代码可使页面上所有图片元素一个接一个地转圈.

这种效果最好的实现地方就是图片搜索了, 改变代码里的 img 成任何网页上有的字符, 可以使这些字符做无敌风火轮运动.

    javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; 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++}setInterval('A()',5); void(0);

3 晃来晃去

不但是你, 浏览器也不是那么喜欢这个 Javascript. 在地址栏运行这个代码后, 浏览器会迅速地晃来晃去.


    javascript:function flood(n) {if (self.moveBy) {for (i = 200; i &gt; 0;i--){for (j = n; j &gt; 0; j--) {self.moveBy(1,i); self.moveBy(i,0);self.moveBy(0,-i); self.moveBy(-i,0); } } }}flood(6);{ var inp = "D-X !msagro na dah tsuj resworb rouY"; var outp = ""; for (i = 0; i &lt;= inp.length; i++) {outp =inp.charAt (i) + outp ; } alert(outp) ;}; reverse

4 计算器

在地址栏输入下面的代码, 可以实现简单的四则运算:

     javascript: alert(34343+3434-222);

5 防钓鱼验证

某些钓鱼网站提供的 URL 和网页本身的 URL 是不一致的, 可以用下面的代码进行验证, 当两个 URL 相差太大的时候, 就要稍加小心了:

    javascript:alert("The actual URL is:tt" + location.protocol + "//" + location.hostname + "/" + "nThe address URL is:tt" + location.href + "n" + "nIf the server names do not match, this may be a spoof.");

颜色渐变插件

02:54

FROM: Source Code

   /*
 * jQuery Color Animations
 * Copyright 2007 John Resig
 * Released under the MIT and GPL licenses.
 */

(function(jQuery){

	// We override the animation for all of these color styles
	jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
		jQuery.fx.step[attr] = function(fx){
			if ( fx.state == 0 ) {
				fx.start = getColor( fx.elem, attr );
				fx.end = getRGB( fx.end );
			}

			fx.elem.style[attr] = "rgb(" + [
				Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
				Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
				Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
			].join(",") + ")";
		}
	});

	// Color Conversion functions from highlightFade
	// By Blair Mitchelmore
	// http://jquery.offput.ca/highlightFade/

	// Parse strings looking for color tuples [255,255,255]
	function getRGB(color) {
		var result;

		// Check if we're already dealing with an array of colors
		if ( color && color.constructor == Array && color.length == 3 )
			return color;

		// Look for rgb(num,num,num)
		if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
			return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];

		// Look for rgb(num%,num%,num%)
		if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
			return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];

		// Look for #a0b1c2
		if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
			return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];

		// Look for #fff
		if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
			return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];

		// Otherwise, we're most likely dealing with a named color
		return colors[jQuery.trim(color).toLowerCase()];
	}

	function getColor(elem, attr) {
		var color;

		do {
			color = jQuery.curCSS(elem, attr);

			// Keep going until we find an element that has color, or we hit the body
			if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
				break; 

			attr = "backgroundColor";
		} while ( elem = elem.parentNode );

		return getRGB(color);
	};

	// Some named colors to work with
	// From Interface by Stefan Petre
	// http://interface.eyecon.ro/

	var colors = {
		aqua:[0,255,255],
		azure:[240,255,255],
		beige:[245,245,220],
		black:[0,0,0],
		blue:[0,0,255],
		brown:[165,42,42],
		cyan:[0,255,255],
		darkblue:[0,0,139],
		darkcyan:[0,139,139],
		darkgrey:[169,169,169],
		darkgreen:[0,100,0],
		darkkhaki:[189,183,107],
		darkmagenta:[139,0,139],
		darkolivegreen:[85,107,47],
		darkorange:[255,140,0],
		darkorchid:[153,50,204],
		darkred:[139,0,0],
		darksalmon:[233,150,122],
		darkviolet:[148,0,211],
		fuchsia:[255,0,255],
		gold:[255,215,0],
		green:[0,128,0],
		indigo:[75,0,130],
		khaki:[240,230,140],
		lightblue:[173,216,230],
		lightcyan:[224,255,255],
		lightgreen:[144,238,144],
		lightgrey:[211,211,211],
		lightpink:[255,182,193],
		lightyellow:[255,255,224],
		lime:[0,255,0],
		magenta:[255,0,255],
		maroon:[128,0,0],
		navy:[0,0,128],
		olive:[128,128,0],
		orange:[255,165,0],
		pink:[255,192,203],
		purple:[128,0,128],
		violet:[128,0,128],
		red:[255,0,0],
		silver:[192,192,192],
		white:[255,255,255],
		yellow:[255,255,0]
	};

})(jQuery);

复制到剪切板

02:47

web 开发中常常要实现 “复制到剪切板” 功能。这个功能很实用,但是由于安全问题,浏览器的限制越来越严,实现的方法也越来越有限了。Firefox 默认下不能直接通过 Javascript 操作剪切板,必须开启相关的设置才行。想只通过 Javascript 技术实现跨浏览器 的剪切板是行不通的。现在常用的方法是利用 JavaScript+Flash实现,普遍流传的办法是 _clipboard.swf,这是国外最早实现的(著名的 Clipboard Copy 解决方案: http://www.jeffothy.com/weblog/clipboard-copy/)。但是很可惜,_clipboard.swf 在新出来的 flash10 中无效,因为 Flash10 中规定了只有在 swf 上进行了实际的操作(比如鼠标点击)才能启动剪切板。而 _clipboard.swf 方法的 swf 是隐藏的,通过 JavaScript 来操作 flash 的剪切板,显然没有对 swf 进行实际的用户操作。

function copy(v_str , tip_obj) {
	copy_clip(v_str);
}

function copy_clip(text2copy) {
	if (window.clipboardData) {
		window.clipboardData.setData("Text", text2copy);
	} else {
		var flashcopier = 'flashcopier';
		if(!document.getElementById(flashcopier)) {
			var divholder = document.createElement('div');
			divholder.id = flashcopier;
			document.body.appendChild(divholder);
		}
		document.getElementById(flashcopier).innerHTML = '';
		var divinfo = '<embed src="/img/_clipboard.swf" FlashVars="clipboard='+escape(text2copy)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
		document.getElementById(flashcopier).innerHTML = divinfo;
	}
	return true;
}

function copyToClipboard(txt) {
	if (window.clipboardData) {
		window.clipboardData.clearData();
		window.clipboardData.setData("Text", txt);
	}	else if (navigator.userAgent.indexOf("Opera") != -1) {
		window.location = txt;
	}	else if (window.netscape)	{
		try {
			netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
		}	catch (e)	{
			alert("您的firefox安全限制限制您进行剪贴板操作,请打开'about:config'将signed.applets.codebase_principal_support'设置为true'之后重试");
			return false;
		}
		var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
		if (!clip)
			return false;
		var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
		if (!trans)
			return false;
		trans.addDataFlavor('text/unicode');
		var str = new Object();
		var len = new Object();
		var str = Components.classes['@mozilla.org/supports-string;1'].createInstance(Components.interfaces.nsISupportsString);
		var copytext = txt;
		str.data = copytext;
		trans.setTransferData("text/unicode",str,copytext.length*2);
		var clipid = Components.interfaces.nsIClipboard;
		if (!clip)
			return false;
		clip.setData(trans,null,clipid.kGlobalClipboard);
	}
	return true;
}

最近国外出现了一种新的方法,而且专门做了一个 JavaScript 库 Zero Clipboard ,它包含一个 flash 影片和一个 JavaScript 接口,这个 flash 是透明的(不是隐藏),用户不会察觉到它的存在。这个 flash 覆盖在一个 DOM元素上,比如 button,div之类,当点击这个 DOM 时,你实际点击的是这个 flash,这个作用在 flash 上的动作能够开启 flash 的剪切板。这实际上就是一种 clickjacking。

DEMO页面 : http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

Zero Clipboard项目主页: http://code.google.com/p/zeroclipboard/

万年历

09:30
var lunarInfo=new Array(
0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,
0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,
0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,
0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,
0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,
0x06ca0,0x0b550,0x15355,0x04da0,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0,
0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,
0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,
0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,
0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,
0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,
0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,
0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,
0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,
0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0)
var solarMonth=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var Gan=new Array("甲","乙","丙","丁","戊","己","庚","辛","壬","癸");
var Zhi=new Array("子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥");
var Animals=new Array("鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪");
var solarTerm = new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至");
var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,
195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,
440795,462224,483532,504758);
var nStr1 = new Array('日','一','二','三','四','五','六','七','八','九','十');
var nStr2 = new Array('初','十','廿','卅',' ');
//var monthName = new Array("JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC");
var monthName = new Array("1","2","3","4","5","6","7","8","9","10","11","12");

var sFtv = new Array(
  "0101*元旦",
  "0115 成人节",
  "0214 情人节",
  "0303 女孩节",
  "0308 妇女节",
  "0312 植树节",
  "0308 妇女节",
  "0312 植树节",
  "0315 消费者日",
  "0401 愚人节",
  "0407 卫生日",
  "0413 宋干节",
  "0417 食品节",
  "0501 劳动节",
  "0504 青年节",
  "0505 男孩节",
  "0512 护士节",
  "0513 无烟日",
  "0601 儿童节",
  "0605 环境日",
  "0701 香港回归",
  "0801 建军节",
  "0804 筷子节",
  "0808 父亲节",
  "0910 教师节",
  "0915 敬老节",
  "0928 孔子诞辰",
  "1001*国庆节",
  "1006 老人节",
  "1010 啤酒节",
  "1016 粮食日",
  "1024 联合国日",
  "1031 万圣节",
  "1111 光棍节",
  "1220 澳门回归",
  "1224 平安夜",
  "1225 圣诞节",
  "1226 节礼日"
);

var lFtv = new Array(
  "0101*春节",
  "0115 元宵节",
  "0505 端午节",
  "0707 七夕",
  "0715 中元节",
  "0815 中秋节",
  "0909 重阳节",
  "1208 腊八节",
  "1224 小年",
  "0100*除夕"
);

var wFtv = new Array(
  "0520 母亲节",
  "0630 父亲节",
  "0716 合作节",
  "1144 感恩节"
);

var cM = new Array(
  "正",  "二",  "三",  "四",  "五",  "六",  "七",  "八",  "九",  "十",  "十一",  "十二");

function lYearDays(y) {
  var i, sum = 348
  for(i=0x8000; i>0x8; i>>=1) sum += (lunarInfo[y-1900] & i)? 1: 0
  return(sum+leapDays(y))
}

function leapDays(y) {
  if(leapMonth(y))  return((lunarInfo[y-1900] & 0x10000)? 30: 29)
  else return(0)
}

function leapMonth(y) {
  return(lunarInfo[y-1900] & 0xf)
}

function monthDays(y,m) {
  return( (lunarInfo[y-1900] & (0x10000>>m))? 30: 29 )
}

function Lunar(objDate) {
  var i, leap=0, temp=0;
  var baseDate = new Date(1900, 0, 31);
  var offset   = (objDate - baseDate)/86400000;

  this.dayCyl = offset + 40;
  this.monCyl = 14;

  for(i = 1900; i<2050 && offset>0; i++) {
    temp = lYearDays(i)
    offset -= temp
    this.monCyl += 12
  }

  if(offset<0) {
    offset += temp;
    i--;
    this.monCyl -= 12
  }

  this.year = i
  this.yearCyl = i-1864

  leap = leapMonth(i)
  this.isLeap = false

  for(i=1; i<13 && offset>0; i++) {

    if(leap>0 && i==(leap+1) && this.isLeap==false) {
      --i; this.isLeap = true; temp = leapDays(this.year);
    } else {
      temp = monthDays(this.year, i);
    }

    if(this.isLeap==true && i==(leap+1)) this.isLeap = false

    offset -= temp
    if(this.isLeap == false) this.monCyl++
  }

  if(offset==0 && leap>0 && i==leap+1)
    if(this.isLeap) {
      this.isLeap = false;
    } else {
      this.isLeap = true; --i; --this.monCyl;
    }

  if(offset<0) { offset += temp; --i; --this.monCyl; }

  this.month = i;
  this.day = offset + 1;
}

function solarDays(y,m) {
  if(m==1)
    return(((y%4 == 0) && (y%100 != 0) || (y%400 == 0))? 29: 28);
  else
    return(solarMonth[m]);
}

function cyclical(num) {
  return(Gan[num%10]+Zhi[num%12])
}

function calElement(sYear,sMonth,sDay,week,lYear,lMonth,lDay,isLeap,cYear,cMonth,cDay) {

  this.isToday    = false;
  this.sYear      = sYear;
  this.sMonth     = sMonth;
  this.sDay       = sDay;
  this.week       = week;
  this.lYear      = lYear;
  this.lMonth     = lMonth;
  this.lDay       = lDay;
  this.isLeap     = isLeap;
  this.cYear      = cYear;
  this.cMonth     = cMonth;
  this.cDay       = cDay;

  this.color      = '';

  this.lunarFestival = ''; //农历节日
  this.solarFestival = ''; //国历节日
  this.solarTerms    = ''; //节气

}

function sTerm(y,n) {
  var offDate = new Date( ( 31556925974.7*(y-1900) + sTermInfo[n]*60000  ) + Date.UTC(1900,0,6,2,5) )
  return(offDate.getUTCDate())
}

function calendar(y,m) {
  var sDObj, lDObj, lY, lM, lD=1, lL, lX=0, tmp1, tmp2;
  var lDPOS = new Array(3);
  var n = 0;
  var firstLM = 0;

  sDObj = new Date(y, m, 1);  //当月一日日期
  this.length = solarDays(y, m);    //国历当月天数

  this.firstWeek = sDObj.getDay();    //国历当月1日星期几

  for(var i = 0;i < this.length; i++) {
    if(lD > lX) {
      sDObj = new Date(y, m, i + 1)    //当月一日日期

      lDObj = new Lunar(sDObj)     //农历
      lY    = lDObj.year           //农历年
      lM    = lDObj.month          //农历月
      lD    = lDObj.day            //农历日
      lL    = lDObj.isLeap         //农历是否闰月
      lX    = lL? leapDays(lY): monthDays(lY,lM) //农历当月最後一天

      if(n==0) firstLM = lM;
      lDPOS[n++] = i-lD + 1
    }

    //sYear,sMonth,sDay,week,
    //lYear,lMonth,lDay,isLeap,
    //cYear,cMonth,cDay
    this[i] = new calElement(y, m+1, i+1, nStr1[(i+this.firstWeek)%7],
                             lY, lM, lD++, lL,
                             cyclical(lDObj.yearCyl) ,cyclical(lDObj.monCyl), cyclical(lDObj.dayCyl++) )

    if((i+this.firstWeek)%7==0)   this[i].color = 'red'  //周日颜色
    if((i+this.firstWeek)%14==13) this[i].color = 'red'  //周休二日颜色
  }

  tmp1=sTerm(y,m*2 )-1;
  tmp2=sTerm(y,m*2+1)-1;
  if (typeof(solarTerm[m * 2]) != 'undefined') {
    this[tmp1].solarTerms = solarTerm[m*2];
  }

  if (typeof(solarTerm[m * 2 + 1]) != 'undefined') {
    this[tmp2].solarTerms = solarTerm[m*2+1];
  }

   if(m==3) this[tmp1].color = 'red' //清明颜色

   for(i in sFtv)
      if(sFtv[i].match(/^(\d{2})(\d{2})([\s\*])(.+)$/))
        if(Number(RegExp.$1)==(m+1)) {
          this[Number(RegExp.$2)-1].solarFestival += RegExp.$4 + ' '
          if(RegExp.$3=='*') this[Number(RegExp.$2)-1].color = 'red'
        }

  for(i in wFtv)
    if(wFtv[i].match(/^(\d{2})(\d)(\d)([\s\*])(.+)$/))
      if(Number(RegExp.$1)==(m+1)) {
       tmp1=Number(RegExp.$2)
       tmp2=Number(RegExp.$3)
       this[((this.firstWeek>tmp2)?7:0) + 7*(tmp1-1) + tmp2 - this.firstWeek].solarFestival += RegExp.$5 + ' '
      }

    //农历节日
    for(i in lFtv)
      if(lFtv[i].match(/^(\d{2})(.{2})([\s\*])(.+)$/)) {
         tmp1=Number(RegExp.$1)-firstLM
        if(tmp1==-11) tmp1=1
          if(tmp1 >=0 && tmp1<n) {
             tmp2 = lDPOS[tmp1] + Number(RegExp.$2) -1
             if( tmp2 >= 0 && tmp2<this.length) {
                this[tmp2].lunarFestival += RegExp.$4 + ' '
                if(RegExp.$3=='*') this[tmp2].color = 'red'
             }
          }
      }

    //黑色星期五
    if((this.firstWeek+12)%7==5)
      this[12].solarFestival += '黑色星期五 '

   //今日
  if(y==tY && m==tM && typeof(this[tD - 1]) != 'undefined') this[tD-1].isToday = true;

}

//====================== 中文日期
function cDay(d){
  var s;
  switch (d) {
     case 10:
       s = '初十'; break;
     case 20:
       s = '二十'; break;
       break;
     case 30:
       s = '三十'; break;
       break;
     default :
       s = nStr2[Math.floor(d/10)];
       s += nStr1[d%10];
  }
  return(s);
}

var cld;
function drawCld(SY,SM) {
  var i,sD,s,size;
  cld = new calendar(SY,SM);

  if(SY>1874 && SY<1909) yDisplay = '光绪' + (((SY-1874)==1)?'元':SY-1874)
  if(SY>1908 && SY<1912) yDisplay = '宣统' + (((SY-1908)==1)?'元':SY-1908)
  if(SY>1911 && SY<1950) yDisplay = '民国' + (((SY-1911)==1)?'元':SY-1911)
  //   if(SY>1949) yDisplay = '共和国' + (((SY-1949)==1)?'元':SY-1949)

  // GZ.innerHTML = yDisplay +'年 农历' + cyclical(SY-1900+36) + '年('+Animals[(SY-4)%12]+')';

  if (SY>1949) yDisplay = ''

  GZ.innerHTML = yDisplay +' 农历' + cyclical(SY-1900+36) + '年('+Animals[(SY-4)%12]+')';

  YMBG.innerHTML = SY + "年" + monthName[SM] + "月";
  for(i=0;i<42;i++) {
     sObj=eval('SD'+ i);
     lObj=eval('LD'+ i);
     sObj.className = '';
     sD = i - cld.firstWeek;
    if(sD>-1 && sD<cld.length) {
      sObj.innerHTML = sD+1;
      if(cld[sD].isToday) sObj.className = 'todyaColor';
      sObj.style.color = cld[sD].color;
      if(cld[sD].lDay==1)
        lObj.innerHTML = '<b>'+(cld[sD].isLeap?'闰':'') + cMonth(cld[sD].lMonth)+ '月' + (monthDays(cld[sD].lYear,cld[sD].lMonth)==29?'小':'大')+'</b>';
      else
        lObj.innerHTML = cDay(cld[sD].lDay);

      s=cld[sD].lunarFestival;

      if(s.length>0) {
        if(s.length>6) s = s.substr(0, 4)+'…';
        s = s.fontcolor('red');
      }  else { //国历节日
        s=cld[sD].solarFestival;
        if(s.length>0) {
          size = (s.charCodeAt(0)>0 && s.charCodeAt(0)<128)?8:4;
          if(s.length>size+2) s = s.substr(0, size)+'…';
          s = s.fontcolor('blue');
        }  else { //廿四节气
          s=cld[sD].solarTerms;
          if(s.length>0) s = s.fontcolor('limegreen');
        }
      }
      if(s.length>0) lObj.innerHTML = s;

    } else { //非日期
      sObj.innerHTML = '';
      lObj.innerHTML = '';
    }
  }
}

function cMonth(m) {
  if (typeof(cM[parseInt(m) -1]) != 'undefined') {
    return cM[parseInt(m) - 1];
  } else {
    return m;
  }
}

var Today = new Date();
var tY = Today.getFullYear();
var tM = Today.getMonth();
var tD = Today.getDate();

tY = 2009;
tM = 4;

cld = new calendar(tY, tM);
$.each(cld, function(i,n ) {
  if (i == 9) {
    str = '';
    $.each(n, function( j, k) {
      str = str + j + ' ' + k + "\n";
    });
    alert(str);
  }

});

工作需要
时间紧张
只好到网上找了个
在此基础上做修改
很感谢写这万年历的原创者

Javascript 事件兼容说明

06:26

http://www.quirksmode.org/dom/events/index.

密码强度

05:41

FROM: blueidea

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>密码强度</title>
<style type="text/css">
body{
 font-size:12px;
 font-family: arial, helvetica, sans-serif;
 margin:0;
}
form{
 margin:2em;
}
#chkresult{margin-left:53px;height:15px;}
</style>
</head>

<body>
<form name="form1">
 <label for="pwd">用户密码</label>
 <input type="password" name="pwd" onblur="chkpwd(this)" />
 <div id="chkresult"></div>
 <label for="pwd2">重复密码</label>
 <input type="password" name="pwd2" />
</form>
<script type="text/javascript">
 function chkpwd(obj){
  var t = obj.value;
  var id = getresult(t);

  //定义对应的消息提示
  var msg = new Array(4);
  msg[0]="密码过短。";
  msg[1]="密码强度差。";
  msg[2]="密码强度良好。";
  msg[3]="密码强度高。";

  var sty = new Array(4);
  sty[0]=-45;
  sty[1]=-30;
  sty[2]=-15;
  sty[3]=0;

  var col = new Array(4);
  col[0]="gray";
  col[1]="red";
  col[2]="#ff6600";
  col[3]="green";

  //设置显示效果
  var bimg="http://bbs.blueidea.com/attachments/2011/12/03/pwdlen_dsipeegqwxfo.gif";//一张显示用的图片
  var swidth=300;
  var sheight=15;
  var bobj = document.getElementById("chkresult");
  bobj.style.fontsize="12px";
  bobj.style.color=col[id];
  bobj.style.width=swidth + "px";
  bobj.style.height=sheight + "px";
  bobj.style.lineheight=sheight + "px";
  bobj.style.background="url(" + bimg + ") no-repeat left " + sty[id] + "px";
  bobj.style.textIndent = "20px";
  bobj.innerHTML = "检测提示:" + msg[id];
 }

 //定义检测函数,返回0/1/2/3分别代表无效/差/一般/强
 function getresult(s){
  if(s.length < 4){
   return 0;
  }
  var ls = 0;
  if (s.match(/[a-z]/ig)){
   ls++;
  }
  if (s.match(/[0-9]/ig)){
   ls++;
  }
   if (s.match(/(.[^a-z0-9])/ig)){
   ls++;
  }
  if (s.length < 6 && ls > 0){
   ls--;
  }
  return ls
 }
</script>
</body>

</html>

判断浏览器函数

05:26
function justify_browser() {
    var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var s;
    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
    (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
    (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
    (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
    (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

    if (Sys.ie) return 1;
    if (Sys.firefox) return 2;
    if (Sys.chrome) return 3;
    if (Sys.opera) return 4;
    if (Sys.safari) return 5;
}
« Previous PageNext Page »