大海Online的博客

Looking for Interest

inline元素上支持的css属性

今天在测试时,意外发现inline元素是可以设置background与border的, 之前有所误解, 故对其它的css属性重新回顾了下

随手写了一个demo:

<h3>inline测试</h3>
<div style="width:110px">&nbsp;
<a href="#" style="
    background: #ccc;
    padding: 11px;
    margin-left: 80px;
    line-height: 70px;
    border: 1px solid blue;
">display</a>

<i href="#" style="
    background: #ccc;
    padding: 11px;
    margin-left: 80px;
    line-height: 70px;
    border: 1px solid blue;
    min-width: 10px;
    min-height: 10px;
    overflow: hidden;
    max-width: 10px;
    max-height: 10px;.;
    resize: both;
">inline</i>
</div>

经测试

  1. inline元素, 有效的: background, margin-left, margin-right, padding, border
  2. inline元素, 无效的: width, height, margin-top, margin-bottom
  3. 因width, height无效, 因此下列属性也无效: text-align, text-indent, min max-width height, overflow
  4. 原文字相关的依然有效, 如word-spacing, word-wrap, white-space, letter-spacing
  5. 下面两个有效, line-height, vertical-align, box-shadow
  6. float,position及与之相关top,left, 不考虑, 已经不是inline了

其中 border, line-height, 这两个可以多多利用

思考:

  1. inline元素的宽高是不能定义, 即宽高度是由inline元素inline内容的元素决定的,(ie6,ie7下高度会受inline-block元素的影响)
  2. 即宽高完全是自适应而得出的, 因此也不存在overflow的问题, min max-width height也没有影响
  3. margin四个属性, left right 与 top bottom 有不同的待遇
  4. margin-top, margin-bottom, 可以用line-height模拟, 但有很大不同, 与inline-block也不兼容, 另 margin:0 auto的居中效果, 也没有作用

*其次: *

  1. div元素, 使用 display:inline 以上几条也成立
  2. button元素, 使用display:inline, 样式没有变化, 等于于inline-block

*最后: * mdn中说: 默认 inline-level 的元素 (inline + inline-block)

  • b, big, i, small, tt
  • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  • a, bdo, br, img, map, object, q, script, span, sub, sup
  • button, input, label, select, textarea

其中img, button, input, label, select, textarea 并没有以上的特征, 测试了一下, 设置inline与inline-block, 效果是一样的, 没有变化, 都等同于设置了inline-block

利用bat反编译jar包生成源码jar包

之前曾发表在 csdn(blog.csdn.net/seavers) 上, 不过, csdn的代码乱掉了, 今天重新整理了一下

反编译所使用的工具是jad.exe,笔者的测试版本是1.5.8e,压缩与解压缩使用的是WinRAR

jad.exe 可反编译一个class文件为java文件,笔者的BAT可通过此工具将一个jar包反编译成一个完整的源码jar包,同时生成的目录也可以在eclipse中使用

jad.exe 官方网站 : http://www.kpdus.com/jad.html (已失效, 从这里或者附件下载)

BAT脚本见后

安装方法如下:

    复制粘贴后面的文本为一个BAT,然后与jad.exe放在同一个目录即可(WinRAR需正确安装)

使用方法如下: (有3种使用方法, 使用其中任意一种均可,结果是相同的)

 1. 双击BAT,提示输入需反编译的jar包,请输入完整的jar路径
 2. 直接将 jar 包拖放在bat上
 3.右键点击jar包,选择打开方式,然后选择使用该BAT来执行

运行后的结果如下:

  在jar包的同一目录下, 将会生成一个目录,一个jar,目录下有两个子目录,一个目录存放解压缩后的所有class,一个目录存放反编译后的java文件,jar包是用源码压缩生成的

几点说明:

1. 工具中使用的WinRAR是自动识别安装路径的,请正确安装WinRAR
2. 工具使用的jad.exe,须与BAT放在同一目录,或者放在PATH可搜索到的位置
3.  jar包中非class文件,也会完整拷贝在源码目录下,方便生成源码工程
4. 生成的目录名与原 jar 包同名, 生成的源码 jar 包的文件名是在原名称中加入-src而生成, 如原 jar 包为 jdbc.jar, 则生成的目录名为 jdbc, 而生成的源码jar 包名则为 jdbc-src.jar
5. eclipse使用方法1, 将BAT生成的目录放在workspace中,然后创建同名工程
6. eclipse使用方法2,在 eclipse 中创建同名工程,使用src为源文件目录,bin为class文件目录,然后将BAT生成的目录拷贝在eclipse的workspace中 

该BAT为 blog.csdn.net/seavers 原创, BAT源码仅供个人学习,使用,研究,未经本人同意,不可用于商业用途


我通常的使用方式是: 将 bat 与 jad.exe 解压在windows根目录, .jar右键用bat打开发后, 第二次及以后使用就方便多了

BAT更新了一下

BAT源码如下: (请直接拷贝在BAT文件中)

::功能:     利用bat反编译jar包生成源码jar包
::作者:     seavers
::博客:     http://seavers.iteye.com/
::版本:     1.7


::打开/关闭命令行显示
REM @echo OFF

::::::::::::::::::::::::::::解析并设置变量::::::::::::::::::


::查找jad文件的路径, 这里取的jad.exe, 表示从PATH中查找,如果想手工指定,需在这里修改
set JAD_PATH=jad.exe

::设置解压出的class文件存放的位置(相对路径)
set CLASS_PATH=bin

::设置反编译后的java文件存放的位置(相对路径)
set JAVA_PATH=src

::检查JAD文件是否存在bat所在目录下,
if exist "%~dp0jad.exe" set JAD_PATH=%~dp0jad.exe

::判断参数个数,如果没有文件参数,则报错,这里也可以使用%~f1,也可以用%1,没有关系,之后要去掉引号
if ""%1""=="""" (set /P JAR_PATH=请输入要反编译的JAR包的路径...) else (set JAR_PATH=%~f1)
if '%JAR_PATH:~0,1%%JAR_PATH:~0,1%'=='""' set JAR_PATH=%JAR_PATH:~1,-1%

::获取源代码存放的路径,这里取JAR包所在路径,然后去掉".jar"作为文件夹路径, 这里的LOCATION不能带引号,因为下面还要追加字符)
if ""%2""=="""" (set LOCATION=%JAR_PATH:~0,-4%) else (set LOCATION=%~f2)

::::::::::::::::::::开始执行程序:::::::::::::::::::::::::::::::

::获取WinRAR.exe的路径,设置在临时变量rarpath中
for /f "usebackq delims=" %%i in (`ftype WinRAR`) do set RARPATH=%%i

::对rarpath进行解析,去掉前面7个节符,去掉后面5个字符,得到WinRAR执行路径
::路径大致是这样的形式  Winrar="C:\Program Files\WinRAR\WinRAR.exe" "%1"
set RAREXE=%RARPATH:~7,-5%

::调用WinRAR命令,解压文件到指定目录的bin目录下
%RAREXE% x "%JAR_PATH%" "%LOCATION%\%CLASS_PATH%\"

::遍历整个bin目录,取所有class文件,调用jad.exe反编译出源码,非class的拷贝到src目录下
::打开变量延迟功能
setlocal EnableDelayedExpansion
for /r "%LOCATION%\bin" %%i in (*.*) do if '%%~xi'=='.class' ("%JAD_PATH%"  -o -r -sjava -ff -b -nonlb -space -t -8 -d"%LOCATION%\%JAVA_PATH%" "%%~si") else (set TEMP_PATH=%%i & echo f|xcopy "%%i" "!TEMP_PATH:%LOCATION%\bin=%LOCATION%\src!")
endlocal EnableDelayedExpansion

::将产生的java文件压缩成源码文件
%RAREXE% a -ep1 -r "%LOCATION%-src.zip" "%LOCATION%\%JAVA_PATH%\*.*"


::::::::::::::::::程序结束, 显示运行结果::::::::::::::::::::::
echo *********************************************
echo 程序运行结束
echo 解析的JAR包的路径为 %JAR_PATH%
echo 解压缩工具WinRAR.exe的路径为 %RAREXE%
echo 反编译工具JAD.exe的路径为 %JAD_PATH%
echo 解析后的文件的根路径为 %LOCATION%
echo 解析后的class文件存放在 %LOCATION%\%CLASS_PATH%
echo 解析后的java文件存放在 %LOCATION%\%JAVA_PATH%
echo 压缩后的java文件存放在 %LOCATION%-src.zip
echo *********************************************
pause


sync.js

自己写了一个小工具, 做个备份

支持addTask任务, 每个任务将会同步执行

sync.js

/*** 
 *   Sync 框架
 *
 *   支持 addTask,  addCirle,  addListener,  finish 等功能
 *
 */
(function() {

	var MAX_TOTAL = Math.pow(2, 31);

	function Sync(delay) {
		this.delay = delay;
		this.queue = [];			//执行队列
		this.listeners = [];			//listeners
		this.timer = 0;
		this.count = 0;				//总的计数
	}

	Sync.prototype.setDelay = function(delay) {
		this.delay = delay;
		return this;
	}

	Sync.prototype.addListener = function(func) {
		this.listeners.push(func);
		return this;
	}

	Sync.prototype.removeListener = function(func) {
		var pos = this.listeners.indexOf(func)
		if (pos != -1) {
			this.listeners.splice(pos);
		}
		return this;
	}

	Sync.prototype.addTask = function(func, callback) {
		this.addCircle(1, func, callback);
		return this;
	}

	Sync.prototype.addParallelTask = function(/** func1, func2, func3...  **/) {
		this.addCircle(1, function(index) {
			for(var i = 0; i < arguments.length; i++) {
				var func = arguments[i];
				func(index);
			}
		});
		return this;
	}

	Sync.prototype.addCircle = function(total, func, callback) {
		if (typeof(total) == 'function') {
			func = total;
			total = MAX_TOTAL;
		}
		this.queue.push({
			func : func, 
			total : total,
			index : 0,
			callback : callback
		});
		this.checkStart();
		return this;
	}

	Sync.prototype.checkStart = function(total, func) {
		if (this.timer) {
			return;
		}
		var that = this;
		this.timer = setTimeout(function() {
			var task = that.queue[0];
			if (!task) {
				that.timer = 0;
				return ;
			}
			var ret = that._execute(task, task.index);
			if (ret === true || ++task.index >= task.total) {
				that.queue.shift();
				that._callback(task);
			}
			that.timer = setTimeout(arguments.callee, that.delay);			
		}, this.delay);
	}

	Sync.prototype._execute = function(task, index) {
		var ret = task.func(index);
		for(var i = 0; i < this.listeners.length; i++) {
			this.listeners[i](this.count++);
		}
	}

	Sync.prototype._callback = function(task) {
		task.callback && task.callback(index);
	}

	Sync.prototype.finish = function(bool) {
		if (this.timer) {
			clearTimeout(this.timer);
			this.timer = 0;
		}
		if (bool === undefined || bool === true) {
			for(var i = 0; i < this.queue.length; i++) {
				var task = this.queue[i];
				for(var j = task.index; j < task.total; j++) {
					var ret = this._execute(task, j);
					if (ret === true) {
						break;
					}
				}
				
			}
		}
		this.queue = [];
	}


	window.Sync = Sync;


})();

index.htm:

<script src="sync.js"></script>
<script>

	var a = new Sync(1000);
	a.addListener(function(n){console.log('notify .' + n)});
	a.addCircle(2, function(n) {console.log('execute 2 -- ' + n)});
	a.addCircle(4, function(n) {console.log('execute 4 -- ' + n)});
	a.addCircle(8, function(n) {console.log('execute 8 -- ' + n)});
	setTimeout(function() {
		a.addCircle(function(n) {console.log('execute n -- ' + n)});
		setTimeout(function() {
			a.finish();
		}, 3000);
	}, 3000);

</script>



with语句的本质

通过测试及debug后, 得出结论, 仅代表个人意见:

with的本质, 就是构造一个作用域, 将with的对象的所有key, 声明为局部变量


var inner = '123';
var outer = {inner : 'hello world', another: 'hello with'};
window.obj = {outer: outer};

with(outer) {
	alert(inner);
	alert(another);
	alert(outer.inner);
	alert(window.obj.outer.inner);
	show();
}


function show() {
	alert(inner);

}

等同于以下代码


var inner = '123';
var outer = {inner : 'hello world', another: 'hello with'};
window.obj = {outer: outer};

(function(inner, another) {
	alert(inner);
	alert(another);
	alert(outer.inner);
	alert(window.obj.outer.inner);
	show();
})(outer.inner, outer.another);


function show() {
	alert(inner);

}

再看看下面这个常见的问题, 一目了然

var root = { 
    branch: { 
        node: 1 
    } 
}; 

with(root.branch) { 
    root.branch = { 
        node: 0 
    }; 
    // 显示 1, 错误! 
    alert(node); 
} 
// 显示 0, 正确! 
alert(root.branch.node); 

display, position, float 之间的关系

从 css2.1 规范中翻译而来 出处见: http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

Ps: 原文中的box未翻译, 可理解为盒模型, 或盒子

影响 产生box及布局的三个属性 - display, position, float 之间的关系如下:

  • 如果 display 的值为none, 则忽略position与float, 这种情况下, 元素不产生box
  • 如果 position 的值为 absolute 或者 fixed, 则box绝对定位, float的值设定为 none , display 的值按照下面的表格来设定. box 的定位将决定于 top, right, bottom, left 属性及box的容器
  • 如果 float 的值不是 none, 则 box 是浮动的且 display 按照下面的表格来设定
  • 如果元素是根元素, display 按下面的表格来设定, 有一个例外: 当指定的值为list-item时,将变成计算后的 block 还是 list-item, 这点没有在CSS2.1中定义 (这句话不会翻译了)
  • 剩余的 display 按照指定的方式来显示

[table] |specified value| computed value | |inline-table | table | |inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block| block | |others|same as specified | [/table]

手机游戏 cat physics 分数记录

 

记录一下分数

 

 

 

关数 我的分数 二星分数 三星分数 几星
1 752 750 750 3
2 690 600 690 3
3 496 490 500 2
4 508 500 520 2
5 604 590 600 3
6 581 550 570 3
7 614 450 570 3
8 671 660 670 3
9 574 540 570 3
10 801 750 800 3
11 573 560 600 2
12 458 440 500 2
13 464 500 515 1
14 511 530 610 1
15 673 650 690 2
16 738 700 730 3
17 542 500 560 2
18 611 550 630 2
19 734 690 730 3
20 711 650 710 3
21 483 320 500 2
22 372 310 350 3
23 464 450 540 2
24 621 450 610 3
25 603 570 600 3
26 659 600 640 3
28 417 335 450 2
29 507 450 520 2
30 491 460 470 3
31 473 420 470 3
32 539 510 540 2
33 601 590 600 3
34 355 320 340 3
35 484 450 465 3
36 488 350 450 3
37 589 500 580 3
38 700 450 700 3
39 424 150 250 3
40 698 670 680 3
41 421 350 420 3
42 546 450 540 3
43 525 500 520 3
44 496 350 450 3
45 559 550 600 2
46 512 500 675 2
47 566 550 600 2
48 505 500 505 3
49 452 450 490 2
50 498 400 460 3
51 472 520 465 1
52 610 630 642 1
53 745 650 745 3
54 608 580 610 2
55 410 360 400 3
56 744 680 750 2
57 564 400 500 3
58 562 50 555 3
59 306 320 330 1
60 648 570 660 2
61 473 400 520 2
62 681 640 680 3
63 647 580 640 3
64 647 600 645 3
65 763 590 780 2
66 410 540 545 1
67 581 530 575 3
68 702 700 780 2
69 577 390 425 3
70 722 650 730 2
71 526 481 513 3
72 602 580 604 2
73 681 585 619 3
74 571 520 561 3
75 749 690 730 3
76 732 627 690 3
77 638 540 600 3
78 591 540 580 3
79 566 520 565 3
80 610 500 595 3
81 596 550 580 3
82 407 400 470 2
83 538 525 550 2
84 600 530 565 3
85 534 600 630 1
86 379 300 320 3
87 530 500 530 3
88 652 600 650 3
89 607 595 605 3
90 632 610 630 3

 

 

 

javascript模拟html5新增特性 - placeholder属性

placeholder属性是html5的新增属性,当输入框为空时, 可以提示一些信息, 非常不错的功能

  1. placeholder支持情况: a) 已经支持: ie 9+ firefox 4.0+ chrome等 b) 需要模拟 : ie6 ie7 ie8 firefox3.6

  2. placeholder a) 内容为空时, 内容显示为placeholder内容, 样式为color:#999 , 且垂直居中显示 b) 内容不为空, 无特殊变化, 原有placeholder样式, 需清除

  3. 模拟placeholder, 要求满足( 只考虑 input) a) 当页面显示后, 如果数据为空, 则显示为placeholder状态 b) 当点击input后, 清除placeholder,样式恢复文本样式 c) 当input离开焦点后, 根据内容来显示placeholder状态 d) 当placeholder状态时,刷新页面后, 也应该是placeholder状态 e) 当有js执行脚本后, 且变更input值后, 重置placeholder状态 f) 当表单reset后, 也需要重置placeholder状态 g) 当表单提交后, 当为placeholder状态时,提交的参数应该为空

  4. 注意点 a) firefox 3.6 ,需考虑 3.d)点, 需监停 window.onunload b) ie下, 第3.e)点,需监控 onpropertychange事件,比较复杂 c) firefox , 需监控 oninput 事件, 也比较复杂 d) form.reset事件, onreset是在修改input值前调用的, 也比较难重置状态

  5. 判断浏览器是否原生支持placeholder : “placeholder” in document.createElement(“input”)
  6. 简单实现, 可以监停focus/blur(focusin/focusout), submit/unload事件
  7. 本文发表在http://seavers.iteye.com/ 本文未经同意,谢绝转载

例:

KISSY 实现:

input.placeholder {color:#999}
<script src="http://a.tbcdn.cn/s/kissy/1.1.6/kissy-min.js"></script>
<script>
//本代码发布在 http://seavers.iteye.com/ , 未经同意,谢绝转载
//模拟了placeholder 80%的功能
(function() {
	var S=KISSY, Dom = S.DOM, Event = S.Event;

	S.namespace("HTML5");
	S.HTML5.placeholder = {
		support  : "placeholder" in document.createElement("input"), 
		activate : (function() {
			function _showPlaceholder(el, className, value) {
				if (!Dom.hasClass(el, className) && !el.value) {
					el.value = value;
					Dom.addClass(el, className);
				}
			}
			
			function _hidePlaceholder(el, className, value) {
				if (Dom.hasClass(el, className)) {
					el.value = value;
					Dom.removeClass(el, className);
				}
			}
			
			function _activatePlaceholder(selector) {
				var ATTR = "placeholder", CLASS = "placeholder";
				
				S.each(S.query(selector), function(el){
					var TIP = el.getAttribute(ATTR);
					if (!TIP) return ;
					
					Event.on(el.form, 'submit', function(ev) {
						_hidePlaceholder(el, CLASS, "");
					});
					Event.on(window, 'unload', function(ev) {	//解决firefox3.6刷新问题
						_hidePlaceholder(el, CLASS, "");
					});
					Event.on(el, 'focusin', function(ev){
						_hidePlaceholder(el, CLASS, "");
					});
					Event.on(el, 'focusout', function(ev){
						_showPlaceholder(el, CLASS, TIP);
					});
					_showPlaceholder(el, CLASS, TIP);
				});
			}
			
			return _activatePlaceholder;
		})()
	};
	
	//如果有原生的placeholder,使用原生,否则使用模拟的
	if (!S.HTML5.placeholder.support) {
		S.HTML5.placeholder.activate('INPUT');
	}
})();

</script>

version compare

[img]http://dl.iteye.com/upload/attachment/412672/dda5fd96-afce-3f8c-bdf3-bf20b8228fe7.jpg[/img]

Apache log4j™ 1.3 development has been abandoned and no future releases or development is anticipated. Users of Apache log4j 1.3 are encouraged to migrate to Apache log4j 1.2 or to monitor and contribute to the Apache log4j 2.0 development effort. The companions for Apache log4j 1.2 provide many of the features that were developed during the Apache log4j 1.3 development effort.

php 学习笔记 (1)

与java.String对比 [table] ||id|java.String|php.String| ||0| equals | strcmp | ||1| substring(start,end)| substr(string,start,length) | ||2| indexOf(str, fromIndex)| strpos stripos , strstr stristr strrpos| ||3| concat(str) (+)| (.)| ||4| startsWith || ||5| endsWith || ||6| getBytes | | ||7| matches | | ||8| replace | str_replace(find, replace, str, count) , str_ireplace| ||9| replaceAll || ||10| split | | ||11| toLowerCase | strtolower() | ||12| toUpperCase | strtoupper()| ||13| trim() | trim() ltrim() rtrim()| ||14| length | strlen | ||15| | md5| ||16| format|fprintf| [/table]

php join md5

linux进阶命令

linux版本:uname -ar cpu信息: cat /proc/cpuinfo mem信息: cat /proc/meminfo

apache日志,过滤IP,并按照IP的次数倒排序 cat 2011-01-05-access.log | awk ‘{print $1}’ | sort | uniq -c | sort -k1,1nr

同理,有于 url, referer, status.code