IT博客网-asfman-文章分类-div css dhtmlhttp://www.cnitblog.com/asfman/category/2195.html有些人注定要生活在彼岸 可以亲近可以爱怜 甚至可以穷尽一生去思念 只是无法触及 有些距离 注定不能跨越 只能俩俩相望 就像有些爱只能养在心里 长在眼中 不要捧在手里 放在身边 注定只能邂逅 无法遭遇zh-cnThu, 10 Jan 2008 01:44:52 GMTThu, 10 Jan 2008 01:44:52 GMT60标准制作网页：用CSS的dl、dd、dt做表单http://www.cnitblog.com/asfman/articles/38661.html汪杰汪杰Wed, 09 Jan 2008 11:51:00 GMThttp://www.cnitblog.com/asfman/articles/38661.htmlhttp://www.cnitblog.com/asfman/comments/38661.htmlhttp://www.cnitblog.com/asfman/articles/38661.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/38661.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/38661.html<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 3</title>
</head>

<body>
<style>
dl{padding-left:14px;}
dt{float:left;font-weight:bold;padding:12px 0 4px;}
dd{ text-align:left;height:auto;padding:8px 0;}
input,select{ vertical-align:middle;color:#333333; background: #ffffff; font:12px Arial, Helvetica, sans-serif;}
textarea{color:#333333; background: #ffffff; font:12px Arial, Helvetica, sans-serif;line-height:150%;overflow: auto}

</style>
<dl>
<dt>公司名称：</dt>
<dd><input name="text" type="text" value="广州骏宝实业有限公司" size="50" /> <span class="red">*</span></dd>
<dt>公司工业类别：</dt>
<dd><select name="select"><option>计算机和消费电子 </option></select>
<select name="select"><option>空气调节器</option></select> <span class="red">*</span></dd>
<dt>公司介绍：</dt>
<dd><textarea name="textarea" cols="100" rows="9">　　广州骏宝实业有限公司创始于1990年，是集科研、制造、销售、服务于一体，拥有研究开发中心、模具设计制造中心、电子和电路控制设计制造中心、注塑加工和产品整机生产基地的规模化经济实体。骏宝公司生产基地约占地 30000平方米，拥有精良的设备，强大的生产能力。公司按照现代化企业的规范组织和管理，坚持诚信、创新、勤奋、进取的企业精神，不断发展壮大。
　　骏宝公司人才荟萃，现有职工326人，拥有研发 ... </textarea> <span class="red">*</span>
</dd>
</dl>
</body>

</html>

明：对于dl、dt、dd的设置建议不要用高度（height）和行高（line-height），在FF会产生错位，由于IE和FF是否自适应造成，建议使用dt、dd的padding属性来定位！

汪杰 2008-01-09 19:51 发表评论
]]>HTML实体http://www.cnitblog.com/asfman/articles/18106.html汪杰汪杰Wed, 18 Oct 2006 16:24:00 GMThttp://www.cnitblog.com/asfman/articles/18106.htmlhttp://www.cnitblog.com/asfman/comments/18106.htmlhttp://www.cnitblog.com/asfman/articles/18106.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/18106.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/18106.html 有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。

想要在HTML中显示一个小于号“<”，需要用到字符实体。


字符实体

在HTML中，有些字符拥有特殊含义，比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。

一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）

想要在HTML文档中显示一个小于号，我们必须这样写：&lt;或者&#60;

使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。

注意：实体名是大小写敏感的。

下面这个例子能够让你针对HTML实体实践一下。




不可拆分的空格

在HTML中，最常见的字符实体就是不可拆分空格。

通常，HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格，其中9个会被去掉。想要在HTML中插入空格，可以使用实体：&nbsp;
最常用的字符实体

 
显示结果描述实体名实体号
 不可拆分的空格&nbsp;&#160;
<小于&lt;&#60;
>大于&gt;&#62;
&and符号&amp;&#38;
"引号&quot;&#34;
'单引号 &#39;



其他一些常用的字符实体

 
显示结果 描述 实体名 实体号
¢分&cent;&#162;
£英镑&pound;&#163;
¥人民币元&yen;&#165;
§章节&sect;&#167;
©版权&copy;&#169;
®注册&reg;&#174;
×乘号&times;&#215;
÷除号&divide;&#247;


汪杰 2006-10-19 00:24 发表评论
]]>图片飘飘http://www.cnitblog.com/asfman/articles/17765.html汪杰汪杰Mon, 09 Oct 2006 07:50:00 GMThttp://www.cnitblog.com/asfman/articles/17765.htmlhttp://www.cnitblog.com/asfman/comments/17765.htmlhttp://www.cnitblog.com/asfman/articles/17765.html#Feedback1http://www.cnitblog.com/asfman/comments/commentRss/17765.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/17765.html

汪杰 2006-10-09 15:50 发表评论
]]> [xhtml/css] floathttp://www.cnitblog.com/asfman/articles/13546.html汪杰汪杰Wed, 12 Jul 2006 06:03:00 GMThttp://www.cnitblog.com/asfman/articles/13546.htmlhttp://www.cnitblog.com/asfman/comments/13546.htmlhttp://www.cnitblog.com/asfman/articles/13546.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/13546.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/13546.html  css :

body {
 margin: 10px 50px;
}
#contener {
 border: 1px solid #000;
 background-color: yellow;
}
#floatRight {
 float: right;
 border: 1px solid red;
 color: red;
 width: 30%;
}
#contenu {
 border: 1px solid blue;
 color: blue;
}
.spacer {
 clear: both;
 border: 1px solid #FF00FF;
 color: #FF00FF;
}

   xhtml :

  

<div id="contener">
 <b>#contener</b>
 <div id="floatRight">
 <b>#floatRight</b> : Float block at the right of the block #contenu
 </div>
 <div id="contenu">
 <b>#contenu</b> : Simple block
 </div>
 <div class='spacer'>
 <b>.spacer</b> : a "spacer" block...
 </div>
</div>

   正确应该显示为:

 

  Internet Explorer 6 显示为 :

  #contener 层的文字和#contenu层不见了! 只有#contener的背景颜色!

  解决办法 :

body {
 margin: 10px 50px;
}
#contener {
 position: relative; /* 增加的 */
 border: 1px solid #000;
 background-color: yellow;
}
#floatRight {
 position: relative; /* 增加的*/
 float: right;
 border: 1px solid red;
 color: red;
 width: 30%;
}

Read More,Comments(0)
 


[xhtml/css]float:right
by banket posted at oioj on 2006-6-29 16:49:59 Weather: 晴

  "float: right" bug 在IE中float-right外围容器的margin-left失效.

  css :

body {
 margin: 0px;
}
#contener {
 border: 1px solid #000;
 margin: 10px 50px;/*左右外补丁margin=50px*/
}
#floatRight {
 float: right;
 border: 1px solid red;
 color: red;
 width: 30%;
}
#contenu {
 border: 1px solid blue;
 color: blue;
}
.spacer {
 clear: both;
 border: 1px solid #FF00FF;
 color: #FF00FF;
}

   xhtml :
  

<div id="contener">
 <b>#contener</b>
 <div id="floatRight">
 <b>#floatRight</b> : Float block at the right of the block #contenu
 </div>
 <div id="contenu">
 <b>#contenu</b> : Simple block
 </div>
 <div class='spacer'>
 <b>.spacer</b> : a "spacer" block...
 </div>
</div>

   正确显示为:

   

  Internet Explorer 6 显示为:

 
 

  IE6.0中#contener的margin-left无效!
  解决办法:

body {
 margin: 10px 50px; /* 给body增加marign */
}
#contener {
 border: 1px solid #000;
 /* margin: 10px 50px; 取消#contener的margin,也就是给他外围增加margin替代自身margin*/
}

[xhtml/css]float:right 
"float: right" bug 在IE中float-right外围容器的margin-left失效.

  css :

 

body {
 margin: 0px;
}
#contener {
 border: 1px solid #000;
 margin: 10px 50px;/*左右外补丁margin=50px*/
}
#floatRight {
 float: right;
 border: 1px solid red;
 color: red;
 width: 30%;
}
#contenu {
 border: 1px solid blue;
 color: blue;
}
.spacer {
 clear: both;
 border: 1px solid #FF00FF;
 color: #FF00FF;
}

   xhtml :
  

<div id="contener">
 <b>#contener</b>
 <div id="floatRight">
 <b>#floatRight</b> : Float block at the right of the block #contenu
 </div>
 <div id="contenu">
 <b>#contenu</b> : Simple block
 </div>
 <div class='spacer'>
 <b>.spacer</b> : a "spacer" block...
 </div>
</div>

   正确显示为:

   

  Internet Explorer 6 显示为:

 
 

  IE6.0中#contener的margin-left无效!
  解决办法:

 

body {
 margin: 10px 50px; /* 给body增加marign */
}
#contener {
 border: 1px solid #000;
 /* margin: 10px 50px; 取消#contener的margin,也就是给他外围增加margin替代自身margin*/
}



汪杰 2006-07-12 14:03 发表评论
]]>[xhtml/css] IE双倍浮动边界Bug http://www.cnitblog.com/asfman/articles/13545.html汪杰汪杰Wed, 12 Jul 2006 06:02:00 GMThttp://www.cnitblog.com/asfman/articles/13545.htmlhttp://www.cnitblog.com/asfman/comments/13545.htmlhttp://www.cnitblog.com/asfman/articles/13545.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/13545.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/13545.htmlThe IE Doubled Float-Margin Bug

  原址：http://www.positioniseverything.net/explorer/doubled-margin.html
  译文：PorkFat

  什么发生故障？

  一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

 情况应该如何？

 下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界，使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止，一直都还不错。

 

 

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}

  陈旧的IE“双倍占据”

  原样的相同代码被在IE/Win中浏览时以些微不同的方式显示，下面的图释展示了IE/Win在布局上所做的。

 

这为什么会发生？别问这种傻问题！这就是IE，记得吗？符合标准只是理想的状况，不指望实现，这个简单的事实正验证了。

  重点

  这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式

  最后，修复办法！

直到现在(04年1月)这个Bug一直被认为是无法修复的，通常用来替代错误的边界的控制方法如：一个不可视浮动元素的左边距，连同一个内嵌的盒子一起，可视的盒子装在不可视浮动元素里；或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了，但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。

Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。

现在如何来做？

研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的”inline”声明已经能够胜任了。

熟悉规则的人知道浮动元素自动设置为”block”元素，而不管他们之前是什么。就如Steve从W3C里指出：

 

9.5.1 Positioning the float: the ‘float’ property

“This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.

right
Same as ‘left’, but content flows on the left side of the box, starting at the top.

none
The box is not floated. ”

这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙，只要把这个修复装入IE独用的Tan Hack里，细节如同IE Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示，第一个照常显示了IE的Bug，下一个对浮动元素使用了”inline”修复。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
 display: inline;
}

  篇外话

你可能注意到这个Bug修复的想法在Steve的演示页底部复制，你看到，在一开始Steve注意到IE的文本缩进Bug并找到了”inline”来修复它。他引起了我(Big John)的注意，因为这是一个冷门的Bug和修复方法，我于是请Steve为PIE详细描述了”Guest Demo”。在准备演示的期间，Steve发现这个办法同样修复了双倍边界Bug，一个更为普遍的难题。Steve是个忙人，他让我写这篇”有深度的”演示页利用这个方法将Bug本身解释得更全面。



汪杰 2006-07-12 14:02 发表评论
]]> [xhtml/css] CSS中的行为——expression http://www.cnitblog.com/asfman/articles/13544.html汪杰汪杰Wed, 12 Jul 2006 06:01:00 GMThttp://www.cnitblog.com/asfman/articles/13544.htmlhttp://www.cnitblog.com/asfman/comments/13544.htmlhttp://www.cnitblog.com/asfman/articles/13544.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/13544.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/13544.htmlCSS中的行为——expression
  虽然是不符合标准的也只有ie才能识别，但是他确实给css的功能扩展了不少。下面是摘自互联网上的文字和例子，因为都被转烂了，没法注明出处。

  IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

  给元素固有属性赋值

  下面是定义container容器的宽度，如果<725就为自己的宽度，否则就等于725，相当于max-width:725px;。
  

<style type="text/css" media="screen">
#container { width: expression((documentElement.clientWidth < 725) ? "725px" : "auto" ); }
</style>

  给元素自定义属性赋值
例如，消除页面上的链接虚线框。 通常的做法是：

<a href="link1.htm" onfocus="this.blur()">link1</a>
<a href="link2.htm" onfocus="this.blur()">link2</a>
<a href="link3.htm" onfocus="this.blur()">link3</a>

  粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？

  采用expression的做法如下：

<style type="text/css">
a {star : expression(onfocus=this.blur);}
</style>
<a href="link1.htm">link1</a>
<a href="link2.htm">link2</a>
<a href="link3.htm">link3</a>

  说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为

 

<style type="text/css">
input {star : expression(onmouseover=this.style.backgroundColor="#F5F5F5";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">

  可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：

 

<style type="text/css">
input {star : expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>
<input type="text">
<input type="text">
<input type="text">

  注意
  不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高。



汪杰 2006-07-12 14:01 发表评论
]]>utf-8在responseBody中得编码方式 http://www.cnitblog.com/asfman/articles/9195.html汪杰汪杰Sat, 15 Apr 2006 07:10:00 GMThttp://www.cnitblog.com/asfman/articles/9195.htmlhttp://www.cnitblog.com/asfman/comments/9195.htmlhttp://www.cnitblog.com/asfman/articles/9195.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/9195.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/9195.html utf-8在responseBody中得编码方式
239|187| 191|233| xxx|xxx| 233|xxx|xxx|233| xxx|xxx| ...
应用示例代码：
<html>
<body>
<div id="mt"></div>
<script language="VBScript" type="text/VBScript">
Function rsCode(vIn,num)
rsCode=AscB(MidB(vIn,num,1))
End Function

Function rsLength(vIn)
rsLength=LenB(vIn)
End Function

Function rsChar(num)
rsChar=Chr(num)
End Function
</script>
<script language="JavaScript" type="text/JavaScript">
//虽然也是参考了很多别人的资料才写出来的，但也花了不少功夫，转载请注明出处
//you can use if freely, but you should keep the words below!
//Copyright shouhaimu(QQ:30836570)
self.onerror=null;
var Http = new ActiveXObject("Microsoft.XMLHTTP");
Http.open("GET","2.htm",false);
//我存了俩个文件，1.htm为utf-8格式，2.htm为gb2312格式，现在用此程序均成功加载并正常显示。
Http.send();
var x=Http.responseBody;
var utf_8=(rsCode(x,1)==239&&rsCode(x,2)==187&&rsCode(x,3)==191)
if(utf_8)mt.innerHTML=Http.responseText;
Http=null;
if(!utf_8)
{
var y=rsLength(x),z,i=1,t="";
while(i<=y)
{
z=rsCode(x,i++);
if(z<128)
{
t+=z;
}
else
{
t+=rsChar(z*256+rsCode(x,i++));
}
}
mt.innerHTML=t;
}
</script>
</body>
</html>
添加评论 | 阅读评论 (2)
13:45:41  |  固定链接 | 引用通告 (0) | 记录它 | 脚本技术
xmlHttp.responseBody的重编码函数

function reCode(b){
//***Author: Hutia
//last modified by shouhaimu(QQ:30836570)
//速度已提高近50倍
var glbEncode=new Array();
var t=rsB(b);
t=escape(t).replace(/%u/g,"").replace(/(.{2})(.{2})/g,"%$2%$1").replace(/%([A-Z].)%(.{2})/g,"@$1$2");
t=t.split("@");
var i=0,j=t.length,k;
while(++i<j)
{
k=t[i].substring(0,4);
if(!glbEncode[k])glbEncode[k]=escape(rsChar(eval("0x"+k))).substring(1,6);
t[i]=glbEncode[k]+t[i].substring(4);
}
return unescape(t.join("%"));
}

调用得VBS函数

Function rsB(vIn)
rsB = MidB(vIn,1)
End Function

Function rsChar(vIn)
rsChar = Chr(vIn)
End Function


汪杰 2006-04-15 15:10 发表评论
]]>处理IE中Bubble Up 事件模型的细节http://www.cnitblog.com/asfman/articles/8956.html汪杰汪杰Mon, 10 Apr 2006 12:49:00 GMThttp://www.cnitblog.com/asfman/articles/8956.htmlhttp://www.cnitblog.com/asfman/comments/8956.htmlhttp://www.cnitblog.com/asfman/articles/8956.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8956.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8956.html
    对于Web元素可侦听的事件来说，大多数的事件都是比较简单的。比如什么onload、onclick、onkeypress、onmousedown、onmouseup等等。但是却有一些是比较麻烦的，比如onmousemove、onmouseover和onmouseout。为什么说这几个比较麻烦呢？因为这几个事件一般会比较频繁的被触发，而且onmouseover和onmouseout还更加特殊，这两个事件还会影响event的toElement和fromElement属性。

    同时onmouseover和onmouseout以及onmousemove还是不确定的事件，什么意思呢？就是说当鼠标从html元素上移动时，不是100%能触发这几个事件。这是因为，浏览器中dhtml的事件触发是在浏览器事件处理进程合理idle的时候，根据用户的和浏览器的交互遍历dhtml树的状态来产生的。当浏览器事件处理进程太忙，或者用户交互过于密集的时候，由于IE没有事件队列，没有被处理的事件就再也不会出发了。这里的事件丢失是完全可以接受的，如果不作丢弃浏览器的交互反而会非常的难用。就常常会出现这种情况，有时当我们的windows太繁忙而不立即响应鼠标事件时，我们却到处点击鼠标想"激活"系统，系统在忙完那个费时的处理后，会来接着处理message queue里的一大堆message，我们就能看到刚才点过的鼠标操作都被windows连续处理了。

    回头继续说我们事件处理中的细节问题。看下面这个示例：

     this is a inner span element.  


    我们在最外面的蓝色span元素中监听事件onmouseover，代码为：

 onmouseover="status=event.srcElement.style.borderColor + ', timestamp: ' + new Date()"

    当我们把鼠标移入蓝色region，我们看到status上显示"blue"。我们继续在蓝色region中移动鼠标时(不要和别的边相交)，我们发现onmouseover在blue时的timestamp不变，说明如果鼠标已进入一个element的区域中，就不再触发onmouseover了(否则就成了onmousemove了)。可是这个时候如果我把鼠标移入绿色或红色的region中，我们发现又有新的onmouseover事件被触发并被蓝色span元素截获。而且不断的在绿色、红色及蓝色regions中移动鼠标，timestamp也在不断地变，说明总有onmouseover事件被触发。

    其实既然都说了IE的事件处理方式是bubble up，那么蓝色span截获绿色和红色regions中的onmouseover似乎是对的。可是对于蓝色span来说，这些被多余触发的onmouseover事件其实是不被期望的。IE没有做这个过滤，不知道是出于什么目的，不过我们可以自己在脚本中过滤掉这样的useless事件，有时这些事件很可能会干扰我们做精确的对蓝色span进行事件控制。假设蓝色span的onmouseover事件handler为isAbsoluteMoveOver，代码如下：

 1function isAbsoluteMoveOver(elmt)
 2{
 3    if ( event )
 4    {
 5        var tagName = elmt.tagName;
 6        var to = FindParentElement(event.toElement, tagName);
 7        var from = FindParentElement(event.fromElement, tagName);
 8        if ( elmt === to && from === to )
 9        {
10            return false;
11        }
12    }
13    return true;
14}

    这时只有在鼠标移入或移出蓝色span时，isAbsoluteMoveOver才返回true!

    注：FindParentElement参看《设计有复杂客户端Script的服务器控件》。



汪杰 2006-04-10 20:49 发表评论
]]>这么小心还是在"08"向8的转换上栽了 http://www.cnitblog.com/asfman/articles/8955.html汪杰汪杰Mon, 10 Apr 2006 12:48:00 GMThttp://www.cnitblog.com/asfman/articles/8955.htmlhttp://www.cnitblog.com/asfman/comments/8955.htmlhttp://www.cnitblog.com/asfman/articles/8955.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8955.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8955.html    关于javascript中的parseInt方法，本来没有什么好说的，它的功能就是把一个字符串从左向右的可识别的数字部分转换成数值，并且它还有个可选的参数radix。这不，问题就出在这个参数上了。

    关于parseInt的解释msdn说得很清楚，抄过来就行了：
    parseInt(numString, [radix]) 
    Arguments
    numString 
         Required. A string to convert into a number. 
    radix 
         Optional. A value between 2 and 36 indicating the base of the number contained in numString. If not supplied, strings with a prefix of '0x' are considered hexadecimal and strings with a prefix of '0' are considered octal. All other strings are considered decimal. 

    对于radix的注意事项，我记得园子里也有人提醒过。google一下，还不止一篇提到：
    javascript中parseInt的问题
    Javascript 日期校验完备全过程

    那还说什么呢？说下这个问题怎么被遇到了，以及以后怎么避免吧，不要栽在同一个坑里才是上策嘛。

    我写了一段处理日期的脚本，功能是把一段literal形式的日期转为日期对象。比如：2005-5-14 18:16:6，要转成一个Date对象。方法ConvertToDate()如下：
 function ConvertToDate(strDate)
 {
     strDate = strDate.replace(/-/ig, ':').replace(' ', ':');
     var dataParts = strDate.split(':');
     return new Date(parseInt(dataParts[0]), parseInt(dataParts[1])-1, parseInt(dataParts[2]),
         parseInt(dataParts[3]), parseInt(dataParts[4]), parseInt(dataParts[5]));
 }


    这个方法运行正常，而且稍微看看，由于日期是紧凑形式，似乎是不会出现05，08这样的东西需要转换。对，如果一直这样也就对了，我也不会载在这个转换上面了。问题是后来服务器端的代码被移到了一个英文版.net framework的服务器上去了，这个时候DateTime结构的ToString()默认返回回来的日期字符串成了"5/14/2005 6:16:6 PM"了，我前面的那个ConvertToDate()不能转换了。为了偷点懒，把DateTime.ToString()的结果格式化一下不就行了吗，于是把.ToString()改成了.ToString("u").Replace("Z", "")。这下的输出结果成了："2005-05-14 18:16:06"，使用ConvetToDate()来转换似乎仍然工作的挺好的。

    后来的事情嘛，就是我遇到了默认八进制格式的问题，就是"0"开头的数字的问题。因为使用日期的等宽输出形式后，0d这种形式就非常常见了。由于当初的ConvertToDate()没有考虑这个问题(当初确实也不会遇到0d这种形式，小于10的数字就是d这种格式)，结果埋下了此祸根。

    修改这个bug也很简单，给parseInt方法加上第二个参数就行了，修改后的ConvertToDate()为：

 function ConvertToDate(strDate)
 {
     strDate = strDate.replace(/-/ig, ':').replace(' ', ':');
     var dataParts = strDate.split(':');
     return new Date(parseInt(dataParts[0], 10), parseInt(dataParts[1], 10)-1,
         parseInt(dataParts[2], 10), parseInt(dataParts[3], 10),
         parseInt(dataParts[4], 10), parseInt(dataParts[5], 10));
 }

    这里得到了一个小小的教训，在使用带有optional参数的方法时，应该格外的小心，由于parseInt在没有radix参数时，但却支持"0x"和"0"这种前缀作为一个radix的隐式说明。所以以后在使用具有默认参数的方法时，应尽量明确给出参数值，以减少后期代码修改而带来不可预见bug。

posted on 2005-05-14 17:55 birdshome 阅读(1391) 评论(1)  编辑 收藏收藏至365Key 所属分类: Jscript&Dhtml开发 、Debug中的滑铁卢

评论

# re: 这么小心还是在"08"向8的转换上栽了  回复  

最佳实践：每次都加上第二个参数


汪杰 2006-04-10 20:48 发表评论
]]>unbeforeunloadhttp://www.cnitblog.com/asfman/articles/8936.html汪杰汪杰Mon, 10 Apr 2006 06:47:00 GMThttp://www.cnitblog.com/asfman/articles/8936.htmlhttp://www.cnitblog.com/asfman/comments/8936.htmlhttp://www.cnitblog.com/asfman/articles/8936.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8936.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8936.html非空字符串，就会出现一个如上图的窗口（代码如下）。
window.onbeforeunload = function ()
{
    // . . .  
    event.returnValue = "You will lose any unsaved content";
    // . . .    
}


汪杰 2006-04-10 14:47 发表评论
]]>应用WEB标准会使ScrollTop属性失效http://www.cnitblog.com/asfman/articles/8736.html汪杰汪杰Mon, 03 Apr 2006 08:02:00 GMThttp://www.cnitblog.com/asfman/articles/8736.htmlhttp://www.cnitblog.com/asfman/comments/8736.htmlhttp://www.cnitblog.com/asfman/articles/8736.html#Feedback2http://www.cnitblog.com/asfman/comments/commentRss/8736.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8736.html
<! 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" >

加上这段后，document.body.scrollTop永远等于0

我在做document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollTop;

显示层的位置的时候发现拉到网页下面,层还在上面,原来此时

alert(document.body.scrollTop);显示为0

 


汪杰 2006-04-03 16:02 发表评论
]]>制作虚线表格的简单样式http://www.cnitblog.com/asfman/articles/8733.html汪杰汪杰Mon, 03 Apr 2006 07:58:00 GMThttp://www.cnitblog.com/asfman/articles/8733.htmlhttp://www.cnitblog.com/asfman/comments/8733.htmlhttp://www.cnitblog.com/asfman/articles/8733.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8733.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8733.html  <tr>
    <td>test</td>
  </tr>
</table>
<script>
var tagstbl=document.all.tags("table")
for (i=0; i<tagstbl.length ;i++ )
{
if(tagstbl[i].border==0){
tagstbl[i].style.border="1px gray dotted"
}
}
</script>

汪杰 2006-04-03 15:58 发表评论
]]>IE功能汇总http://www.cnitblog.com/asfman/articles/8728.html汪杰汪杰Mon, 03 Apr 2006 07:56:00 GMThttp://www.cnitblog.com/asfman/articles/8728.htmlhttp://www.cnitblog.com/asfman/comments/8728.htmlhttp://www.cnitblog.com/asfman/articles/8728.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8728.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8728.html      classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2></OBJECT>
<INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1>
<INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=Button2>
<INPUT onclick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性 name=Button3>
<INPUT onclick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印 name=Button>
<INPUT onclick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置 name=Button4>
<INPUT onclick=window.location.reload() type=button value=刷新 name=refresh>
<INPUT onclick="window.external.ImportExportFavorites(true,'');" type=button value=导入收藏夹 name=Button5>
<INPUT onclick="window.external.ImportExportFavorites(false,'');" type=button value=导出收藏夹 name=Button32>
<INPUT onclick="window.external.AddFavorite(location.href, document.title)" type=button value=加入收藏夹 name=Button22>
 <INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夹 name=Submit2>
<INPUT onclick='window.location="view-source:" + window.location.href' type=button value=查看源文件 name=Button7>
<INPUT onclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=语言设置 name=Button6>
 <INPUT onclick="document.execCommand('Cut')" type=button value=剪切>
 <INPUT onclick="document.execCommand('Copy')" type=button value=拷贝>
 <INPUT onclick="document.execCommand('Paste')" type=button value=粘贴>
<INPUT onclick="document.execCommand('Undo')" type=button value=撤消>
 <INPUT onclick="document.execCommand('Delete')" type=button value=删除>
<INPUT onclick="document.execCommand('Bold')" type=button value=黑体>
 <INPUT onclick="document.execCommand('Italic')" type=button value=斜体>
 <INPUT onclick="document.execCommand('Underline')" type=button value=下划线>
 <INPUT onclick="document.execCommand('stop')" type=button value=停止>
 <INPUT onclick="document.execCommand('SaveAs')" type=button value=保存>
 <INPUT onclick="document.execCommand('Saveas',false,'c:\\test.htm')" type=button value=另存为>
<INPUT onclick="document.execCommand('FontName',false,fn)" type=button value=字体>
<INPUT onclick="document.execCommand('FontSize',false,fs)" type=button value=字体大小>
<INPUT onclick="document.execCommand('refresh',false,0)" type=button value=刷新>
<INPUT onclick=window.location.reload() type=button value=刷新>
 <INPUT onclick=history.go(1) type=button value=前进>
 <INPUT onclick=history.go(-1) type=button value=后退>
 <INPUT onclick=history.forward() type=button value=前进>
 <INPUT onclick=history.back() type=button value=后退>
 <INPUT onclick='window.external.ImportExportFavorites(true,"http://localhost");' type=button value=导入收藏夹>
<INPUT onclick='window.external.ImportExportFavorites(false,"http://localhost");' type=button value=导出收藏夹>
<INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夹>
<INPUT onclick="window.location = 'view-source:'+ window.location.href" type=button value=查看源文件>
<INPUT onclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=语言设置>
<INPUT onclick="window.external.AddFavorite('http://www.cnblogs.com/hbzxf/', 阿好空间)" type=button value=加入收藏夹>
<INPUT onclick="window.external.addChannel('http://www.cnblogs.com/hbzxf/')" type=button value=加入到频道>
<INPUT onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.cnblogs.com/hbzxf/')" type=button value=设成主页>

汪杰 2006-04-03 15:56 发表评论
]]>表格斜线http://www.cnitblog.com/asfman/articles/8725.html汪杰汪杰Mon, 03 Apr 2006 07:54:00 GMThttp://www.cnitblog.com/asfman/articles/8725.htmlhttp://www.cnitblog.com/asfman/comments/8725.htmlhttp://www.cnitblog.com/asfman/articles/8725.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8725.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8725.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

 <script Language="javascript">
function a(x,y,color)
{document.write("<img border='0' style='position: absolute; left: "+(x+20)+"; top: "+(y+20)+";background-color: "+color+"' src='px.gif' width=1 height=1>")}
</script>

<body leftmargin=20 topmargin=20>
<TABLE border=0 bgcolor="000000" cellspacing="1" width=400>
<TR bgcolor="FFFFFF">
    <TD id="td1"> </TD>
    <TD>张三</TD>
    <TD>李四</TD>
    <TD>王五</TD>
</TR>
<TR bgcolor="FFFFFF">
    <TD>数学</TD>
    <TD>55</TD>
    <TD>66</TD>
    <TD>77</TD>
</TR>
<TR bgcolor="FFFFFF">
    <TD>英语</TD>
    <TD>99</TD>
    <TD>68</TD>
    <TD>71</TD>
</TR>
<TR bgcolor="FFFFFF">
    <TD>语文</TD>
    <TD>33</TD>
    <TD>44</TD>
    <TD>55</TD>
</TR>
</TABLE>
<script>
function line(x1,y1,x2,y2,color)
{
    var tmp
    if(x1>=x2)
    {
        tmp=x1;
        x1=x2;
        x2=tmp;
        tmp=y1;
        y1=y2;
        y2=tmp;
    }
    for(var i=x1;i<=x2;i++)
    {
        x = i;
        y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
        a(x,y,color);
    }
}
//line(1,1,100,100,"000000");
line(td1.offsetLeft,td1.offsetTop,td1.offsetLeft+td1.offsetWidth,td1.offsetTop+td1.offsetHeight,'#000000')
</script>
</BODY>
</HTML>



汪杰 2006-04-03 15:54 发表评论
]]>输入日期自动移动到下一位http://www.cnitblog.com/asfman/articles/8700.html汪杰汪杰Mon, 03 Apr 2006 07:43:00 GMThttp://www.cnitblog.com/asfman/articles/8700.htmlhttp://www.cnitblog.com/asfman/comments/8700.htmlhttp://www.cnitblog.com/asfman/articles/8700.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8700.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8700.html<script language=Javascript>
function objFocus(n) //控制光标选中光标后一字符
{
    if (arguments.length == 0) var n=0;
    var e = window.event.srcElement;
    var r = e.createTextRange();
    r.moveStart('character', n);
    r.collapse(true);
    r.select();
    var s = document.selection.createRange().duplicate().duplicate();
    s.moveStart('character', 1);
    s.setEndPoint("EndToEnd", r);
    s.select();
}
function keyPress(e) //手工输入日期
{
    var k       = String.fromCharCode(window.event.keyCode);
    if(!/^\d/.test(k)) return false; //不准输入非法字符

    e.focus();
    var range   = e.createTextRange();
    var select1 = document.selection.createRange().duplicate();
    select1.setEndPoint("StartToStart",range);

    var s1      = select1.text;                 //得到光标左边的字串
    var s2      = e.value.substr(s1.length);    //得到光标右边的字串
    e.value     = s1.substring(0, s1.length-1) + k + s2; //给文本框赋值

    var n       = s1.length;
    if (n==4 || n==7 || n==10 || n==13) n++;
    objFocus(n);

    window.event.keyCode = 0;
    event.returnValue = false;
}
function keyDown(e)  //删除回退按方向键时的处理
{
    var k   = window.event.keyCode;
    if (!(k>=48 && k<=57    //数字0-9
        || k==46            //删除键 Del
        || k==8             //回删链 Backspace
        || k==37            //方向链 ←
        || k==39            //方向键 →
        || k==9             //制表键 Tab
        || k==13            //回车键 Enter
        )) return false;    //屏蔽非上面所列的键
        e.focus();

    var range   = e.createTextRange();
    var select1 = document.selection.createRange().duplicate();
    select1.setEndPoint("StartToStart",range);

    var s1      = select1.text;                 //得到光标左边的字串
    var s2      = e.value.substr(s1.length);    //得到光标右边的字串
    var n       = s1.length;

    switch(k)
    {
        case 8 :
            e.value = s1.substring(0, n-1) + "0" + s2;
            if (n==6 || n==9 || n==12 || n==15) n--;
            objFocus(n-2);
            window.event.keyCode = 0;
            event.returnValue = false;
            break;
        case 46 :
            e.value = s1.substring(0, n-1) + "0" + s2;
            if (n==4 || n==7 || n==10 || n==13) n++;
            objFocus(n);
            window.event.keyCode = 0;
            event.returnValue = false;
            break;
        case 37 :
            if (n==6 || n==9 || n==12 || n==15) n--;
            if (n == e.value.length)
            {
                if (document.selection.createRange().text == "")
                    objFocus(n-1);
                else
                 objFocus(n - 2);
            }
            else
                objFocus(n - 2);
            window.event.keyCode = 0;
            event.returnValue = false;
            break;
        case 39 :
            if (n==4 || n==7 || n==10 || n==13) n++;
            objFocus(n);
            window.event.keyCode = 0;
            event.returnValue = false;
            break;
    }
}
</script>

<form name=form1>
<input
    name        = "txt"
    maxlength   = "16"
    size        = "18"
    value       = "0000-00-00 00:00"
    onfocus     = "objFocus()"
    onkeydown   = "return keyDown(this)"
    onkeypress  = "return keyPress(this)"
    onpaste     = "return false"
    ondragenter = "return false"
    style       = "ime-mode:Disabled"
>
</form>



汪杰 2006-04-03 15:43 发表评论
]]>实现textarea内字符串自动选择查询替换功能http://www.cnitblog.com/asfman/articles/8701.html汪杰汪杰Mon, 03 Apr 2006 07:43:00 GMThttp://www.cnitblog.com/asfman/articles/8701.htmlhttp://www.cnitblog.com/asfman/comments/8701.htmlhttp://www.cnitblog.com/asfman/articles/8701.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8701.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8701.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
var oRange;// save the current textrange
var intCount = 0;// this pos of current textrange in the total count
var intTotalCount = 0;// total count
<!--
//==============================================
//function : fnSearch()
//comment  : Search the text
//param    : none
//return   : none
//author   : Fantiny
//Date     : 10/21/2005
//==============================================
function fnSearch() {

var strBeReplaced;
var strReplace;

strBeReplaced = fm1.txtarea2.value;
strReplace = fm1.txtarea3.value;

fnNext();

fm1.txtarea1.focus();
oRange = fm1.txtarea1.createTextRange();//Create a textRange for the Textarea


// Find the text by findtext method
for (i=1; oRange.findText(strBeReplaced)!=false; i++) {
if(i==intCount){
oRange.select();// select the finded text
oRange.scrollIntoView();// scroll the page and set the text Into View
break;
}
oRange.collapse(false);//
}
}

//==============================================
//function : fnSearch()
//comment  : set the flag to the next textrange
//param    : none
//return   : none
//author   : Fantiny
//Date     : 10/21/2005
//==============================================
function fnNext(){

if (intCount > 0 && intCount < intTotalCount){
intCount = intCount + 1;
}
else{
intCount = 1 ;
}
}

//==============================================
//function : init()
//comment  : initialize at page onload to get the count
//param    : none
//return   : none
//author   : Fantiny
//Date     : 10/21/2005
//==============================================
function init(){

var oRange ;
var strBeRepalced;

oRange = fm1.txtarea1.createTextRange();//Create a textRange for the Textarea
strBeReplaced = fm1.txtarea2.value;

for (i=0; oRange.findText(strBeReplaced)!=false; i++) {
    oRange.collapse(false);// Moves the insertion point to the end of the text range.
}

intTotalCount = i ;

}

//==============================================
//function : fnReplace()
//comment  : replace the text of the selected textrange
//param    : none
//return   : none
//author   : Fantiny
//Date     : 10/21/2005
//==============================================
function fnReplace(){

var strReplace;

strReplace = fm1.txtarea3.value;

// if the textrange is exist, replace the text
if(oRange!= null && typeof(oRange)=="object" && intTotalCount > 0){
oRange.text = strReplace;
intCount = intCount - 1;
intTotalCount = intTotalCount - 1;
oRange = null;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<FORM METHOD=POST name="fm1">
<TEXTAREA NAME="txtarea1" ROWS="20" COLS="50">
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
</TEXTAREA><br>
<TEXTAREA NAME="txtarea2" ROWS="2" COLS="50"> will be </TEXTAREA><br>
<TEXTAREA NAME="txtarea3" ROWS="2" COLS="50"> has been </TEXTAREA>
<input type="button" value="查找" onClick="fnSearch()">
<input type="button" value="替换" onClick="fnReplace()">
</FORM>

</BODY>
</HTML>



汪杰 2006-04-03 15:43 发表评论
]]>TextArea实现光标定位及内容查找例子http://www.cnitblog.com/asfman/articles/8699.html汪杰汪杰Mon, 03 Apr 2006 07:42:00 GMThttp://www.cnitblog.com/asfman/articles/8699.htmlhttp://www.cnitblog.com/asfman/comments/8699.htmlhttp://www.cnitblog.com/asfman/articles/8699.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8699.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8699.html<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>光标位置</title>
<style>
INPUT{border: 1 solid #000000}
BODY,TABLE{font-size: 10pt}
</style>
</head>
<body>

<table border="0" width="700" cellspacing="0" cellpadding="0">
  <tr>
<td width="479" rowspan="7">
点击 TextArea 实现光标定位

<p>
<textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸
为了你我愿意
动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离
如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹
也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里
我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离
</textarea>  
 
<script>
 
function movePoint()
{
 var pn = parseInt(pnum.value);
 
 if(isNaN(pn))
  return;
 
 var rng = box.createTextRange();
  
 rng.moveStart("character",pn);
 
 rng.collapse(true); 
 
 rng.select();
 
 returnCase(rng) 
  
}
 
function tellPoint()
{
 var rng = event.srcElement.createTextRange();
 
 rng.moveToPoint(event.x,event.y); 
 rng.moveStart("character",-event.srcElement.value.length) 
 
 pnum.value = rng.text.length
 
 returnCase(rng)
}
 
 
function returnCase(rng)
{
 bh.innerText = rng.boundingHeight;
 bl.innerText = rng.boundingLeft;
 bt.innerText = rng.boundingTop;
 bw.innerText = rng.boundingWidth;
 ot.innerText = rng.offsetTop;
 ol.innerText = rng.offsetLeft;
 t.innerText  = rng.text;
}
 
 
function selectText(sp,ep)
{
 sp = parseInt(sp)
 ep = parseInt(ep)
 
 if(isNaN(sp)||isNaN(ep))
  return;
  
 var rng = box.createTextRange();
 
 rng.moveEnd("character",-box.value.length)
 rng.moveStart("character",-box.value.length)
 
 rng.collapse(true);
 
 rng.moveEnd("character",ep)
 rng.moveStart("character",sp)
 
 rng.select();
 
 returnCase(rng);
}
var rg = box.createTextRange();
 
function findText(tw)
{
 if(tw=="")
  return;
 
 var sw = 0;
 
 if(document.selection)
 {
  sw = document.selection.createRange().text.length;
 } 
 
 rg.moveEnd("character",box.value.length);
 
 rg.moveStart("character",sw);

 if(rg.findText(tw)) 
 {
  rg.select();
  returnCase(rg);
 }
 
 if(rg.text!=tw)
 {
  alert("已经搜索完了")
  rg = box.createTextRange()
}
  
}
 
</script> 
</p>
<p></p>
光标位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置">
<p></p>  
选择指定范围：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择">
<p></p>
选择查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择">

</td> 
<td width="217">boundingHeight: <span id="bh"></span></td> 
  </tr> 
  <tr> 
<td width="217">boundingWidth: <span id="bw"></span></td> 
  </tr> 
  <tr> 
<td width="217">boundingTop: <span id="bt"></span></td> 
  </tr> 
  <tr> 
<td width="217">boundingLeft: <span id="bl"></span></td> 
  </tr> 
  <tr> 
<td width="217">offsetLeft: <span id="ol"></span> </td> 
  </tr> 
  <tr> 
<td width="217">offsetTop: <span id="ot"></span> </td> 
  </tr> 
  <tr> 
<td width="217">text: <span style="position: absolute; z-index: 10" id="t"></span> </td> 
  </tr> 
</table> 
</body>

</html>



汪杰 2006-04-03 15:42 发表评论
]]>改变iframe的滚动条的颜色、与滚动条的背景颜色http://www.cnitblog.com/asfman/articles/8679.html汪杰汪杰Mon, 03 Apr 2006 07:31:00 GMThttp://www.cnitblog.com/asfman/articles/8679.htmlhttp://www.cnitblog.com/asfman/comments/8679.htmlhttp://www.cnitblog.com/asfman/articles/8679.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8679.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8679.htmlDHTMLET&reg;  属性清单    ¦  相关内容：  SEE  ALSO  ------------------------------------------      NONE    
 
CSS  Scrollbar  Properties        滚动条属性  
 
   
Scrollbar  Properties  
属性  CSS  Version  
版本  Compatibility  
兼容性  Inherit  From  Parent  
继承性  Description  
简介    
scrollbar-3d-light-color  IE专有属性  IE5.5+  有  设置或检索滚动条亮边框颜色    
scrollbar-highlight-color  IE专有属性  IE5.5+  有  设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色    
scrollbar-face-color  IE专有属性  IE5.5+  有  设置或检索滚动条3D表面（ThreedFace）的颜色    
scrollbar-arrow-color  IE专有属性  IE5.5+  有  设置或检索滚动条方向箭头的颜色    
scrollbar-shadow-color  IE专有属性  IE5.5+  有  设置或检索滚动条3D界面的暗边（ThreedShadow）颜色    
scrollbar-dark-shadow-color  IE专有属性  IE5.5+  有  设置或检索滚动条暗边框（ThreedDarkShadow）颜色    
scrollbar-base-color  IE专有属性  IE5.5+  有  设置或检索滚动条基准颜色。其它界面颜色将据此自动调整    
 
   
   
   
说明：这种颜色是CSS2标准属性。这种颜色是IE建议样式表属性。这种颜色是NS私有属性。这种颜色是目前尚无浏览器支持的属性。  
---------------------------------------------------------------  
 
<style  type="text/css">  
BODY  
{  
           scrollbar-face-color:  #DEE3E7;  
           scrollbar-highlight-color:  #FFFFFF;  
           scrollbar-shadow-color:  #DEE3E7;  
           scrollbar-3dlight-color:  #D1D7DC;  
           scrollbar-arrow-color:    #006699;  
           scrollbar-track-color:  #EFEFEF;  
           scrollbar-darkshadow-color:  #98AAB1;              
}  
</style>  
---------------------------------------------------------------  
 
样式要写在被iframe装入的页面中，或用js修改body标记的属性



汪杰 2006-04-03 15:31 发表评论
]]>css控制div居中http://www.cnitblog.com/asfman/articles/8674.html汪杰汪杰Mon, 03 Apr 2006 07:26:00 GMThttp://www.cnitblog.com/asfman/articles/8674.htmlhttp://www.cnitblog.com/asfman/comments/8674.htmlhttp://www.cnitblog.com/asfman/articles/8674.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8674.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8674.html <style type="text/css">
<!--
#center {
position:absolute;
width:300px;
height:60px;
left:50%;
top:50%;
z-index:1;
background-color:#000;
color:fff;
margin-left:-150px;
margin-top:-32px
}      
</style>
</head>
<body>
<div id="center">永远居中</div>
</body>

汪杰 2006-04-03 15:26 发表评论
]]> 清除浮动--使用:afterhttp://www.cnitblog.com/asfman/articles/8023.html汪杰汪杰Thu, 23 Mar 2006 07:57:00 GMThttp://www.cnitblog.com/asfman/articles/8023.htmlhttp://www.cnitblog.com/asfman/comments/8023.htmlhttp://www.cnitblog.com/asfman/articles/8023.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8023.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8023.html:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。

CSS 

#wrapfix:after {
    content: "."; 
    display: block;
    height: 0; 
    clear: both; 
    visibility: hidden;
}


设display:block;应用到:after 元素，因为display的默认值是"inline", 不能收到clear的特性，同时将清除容器的高度设为零，height:&nbsp;0；，可见度为隐藏.
这是没有清除过浮动的．非Ie 浏览器看不到wrap的背景和边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>清除浮动--使用:after--Clearing</title>
 <style type="text/css">
 <!--
 *{
  padding: 0;
  margin: 0;
 }
 
 body{
  font: 85%/140% Arial, Helvetica, sans-serif;
  padding: 10px 0;
  text-align: center;
 }
 
 .wrap {
  border: 1px solid #999999;
  margin: 0 auto;
  width: 762px;
  w\idth: 760px;
  background: #ECECEC;
  text-align: left;
 }
 
 .wrapfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
 }
 #sidel{
  float: left;
  width: 160px;
 }
 
 #sider{
  float: right;
  width: 600px;
  background: #F9F9F9;
 }
 
 p,pre,em{
  padding: 10px;
 }
 -->
 </style>
</head>

<body>
 <div class="wrap">
  <div id="sider">
    <p>清除浮动--使用:after </p>
    <em>这是没有清除过浮动的．非Ie
浏览器看不到wrap的背景和边框．</em>
    <p> 特点：不需要另外加个清除DIV.</p>
    <p>:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie
浏览器支持，所以并不影响到IE/WIN浏览器。</p>
    <p>CSS</p>
    <pre>
#wrap:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
} 

</pre>
<p>设display:block;应用到:after 元素，因为display的默认值是&quot;inline&quot;,
不能收到clear的特性，同时将清除容器的高度设为零，height:&nbsp;0；，可见度为隐藏</p></div>
  <div id="sidel"><p>left</p>
    <p>&nbsp;</p>
  </div>
 </div>
</body>
</html>
这是清除过浮动的．非Ie 浏览器看到wrap的背景和边框．
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>清除浮动--使用:after--Clearing</title>
 <style type="text/css">
 <!--
 *{
  padding: 0;
  margin: 0;
 }
 
 body{
  font: 85%/140% Arial, Helvetica, sans-serif;
  padding: 10px 0;
  text-align: center;
 }
 
 .wrap {
  border: 1px solid #999999;
  margin: 0 auto;
  width: 762px;
  w\idth: 760px;
  background: #ECECEC;
  text-align: left;
 }
 
 .wrapfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
 }
 #sidel{
  float: left;
  width: 160px;
 }
 
 #sider{
  float: right;
  width: 600px;
  background: #F9F9F9;
 }
 
 p,pre{
  padding: 10px;
 }
 -->
 </style>
</head>

<body>
 <div class="wrap wrapfix">
  <div id="sider">
    <p>清除浮动--使用:after </p>
    <p> 特点：不需要另外加个清除DIV.</p>
    <p><em>这是清除过浮动的．非Ie

 
          浏览器看到wrap的背景和边框．</em></p>
    <p>:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie
浏览器支持，所以并不影响到IE/WIN浏览器。</p>
    <p>CSS</p>
    <pre>
#wrap:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
} 

</pre>
<p>设display:block;应用到:after 元素，因为display的默认值是&quot;inline&quot;,
不能收到clear的特性，同时将清除容器的高度设为零，height:&nbsp;0；，可见度为隐藏</p></div>
  <div id="sidel"><p>left</p>
    <p>&nbsp;</p>
  </div>
 </div>

</body>
</html>
请问forestgan大哥，
display的默认值苏小雨的手册里这样写的：

block : CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行

inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行

我怎么区分什么情况下是块对象，什么情况下是内联对象呢？
div p h1 ......肯定是块元素.
内联对象:span
<br />也是吧?

嗯，我上次忘记是在哪里回的贴了。

想知道什么是块级元素，最简单的方式就是随便下载一个dtd，去查看里面的代码，那里面的定义算满清晰的了。而且权威



汪杰 2006-03-23 15:57 发表评论
]]>滑动门menu欣赏http://www.cnitblog.com/asfman/articles/8022.html汪杰汪杰Thu, 23 Mar 2006 07:55:00 GMThttp://www.cnitblog.com/asfman/articles/8022.htmlhttp://www.cnitblog.com/asfman/comments/8022.htmlhttp://www.cnitblog.com/asfman/articles/8022.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/8022.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/8022.html<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
    body {
 margin:0;
 padding:0;
 font: bold 11px/1.5em Verdana;
}

h2 {
 font: bold 14px Verdana, Arial, Helvetica, sans-serif;
 color: #000;
 margin: 0px;
 padding: 0px 0px 0px 15px;
}
 
/*- Menu Tabs--------------------------- */


    #tabs {
      float:left;
      width:100%;
      background:#BBD9EE;
      font-size:93%;
      line-height:normal;
      }
    #tabs ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      background:url("http://www.jluvip.com/i/tableft.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      background:url("http://www.jluvip.com/i/tabright.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FF9834;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }


  
/*- Menu Tabs B--------------------------- */

    #tabsB {
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
      }
    #tabsB ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
      }
    #tabsB li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsB a {
      float:left;
      background:url("http://www.jluvip.com/i/tableftB.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsB a span {
      float:left;
      display:block;
      background:url("http://www.jluvip.com/i/tabrightB.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsB a span {float:none;}
    /* End IE5-Mac hack */
    #tabsB a:hover span {
      color:#000;
      }
    #tabsB a:hover {
      background-position:0% -42px;
      }
    #tabsB a:hover span {
      background-position:100% -42px;
      }
 
 
 
/*- Menu Tabs C--------------------------- */

    #tabsC {
      float:left;
      width:100%;
      background:#EDF7E7;
      font-size:93%;
      line-height:normal;
      }
    #tabsC ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
      }
    #tabsC li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsC a {
      float:left;
      background:url("http://www.jluvip.com/i/tableftC.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsC a span {
      float:left;
      display:block;
      background:url("http://www.jluvip.com/i/tabrightC.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#464E42;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsC a span {float:none;}
    /* End IE5-Mac hack */
    #tabsC a:hover span {
      color:#FFF;
      }
    #tabsC a:hover {
      background-position:0% -42px;
      }
    #tabsC a:hover span {
      background-position:100% -42px;
      } 
 
 
 
/*- Menu Tabs D--------------------------- */

    #tabsD {
      float:left;
      width:100%;
      background:#FCF3F8;
      font-size:93%;
      line-height:normal;
   border-bottom:1px solid #F4B7D6;
      }
    #tabsD ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
      }
    #tabsD li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsD a {
      float:left;
      background:url("http://www.jluvip.com/i/tableftD.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsD a span {
      float:left;
      display:block;
      background:url("http://www.jluvip.com/i/tabrightD.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#C7377D;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsD a span {float:none;}
    /* End IE5-Mac hack */
    #tabsD a:hover span {
      color:#C7377D;
      }
    #tabsD a:hover {
      background-position:0% -42px;
      }
    #tabsD a:hover span {
      background-position:100% -42px;
      } 
 
 
 
/*- Menu Tabs E--------------------------- */

    #tabsE {
      float:left;
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;

      }
    #tabsE ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
      }
    #tabsE li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsE a {
      float:left;
      background:url("http://www.jluvip.com/i/tableftE.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsE a span {
      float:left;
      display:block;
      background:url("http://www.jluvip.com/i/tabrightE.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#FFF;
      }
    #tabsE a:hover {
      background-position:0% -42px;
      }
    #tabsE a:hover span {
      background-position:100% -42px;
      } 
 
 
 
/*- Menu Tabs F--------------------------- */

    #tabsF {
      float:left;
      width:100%;
      background:#efefef;
      font-size:93%;
      line-height:normal;
   border-bottom:1px solid #666;
      }
    #tabsF ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url("http://www.jluvip.com/i/tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url("http://www.jluvip.com/i/tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#FFF;
      }
    #tabsF a:hover {
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      background-position:100% -42px;
      }
 
 
 
/*- Menu Tabs G--------------------------- */

    #tabsG {
      float:left;
      width:100%;
      background:#666;
      font-size:93%;
      line-height:normal;
      }
    #tabsG ul {
 margin:0;
 padding:10px 10px 0 50px;