月度归档:2010年05月

最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)(转载)

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用 xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.

CSS技巧

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

2. margin加倍的问题     设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline;    例如:    <#div id=”imfloat”>    相应的css为    #IamFloat{    float:left;    margin:5px;/*IE下理解为10px*/    display:inline;/*IE下再理解为5px*/}

3.浮动ie产生的双倍距离     #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}    这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);    #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table; 

4 IE与宽度和高度的问题 IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。    比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:    #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 

5.页面的最小宽度     min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类, 然后CSS这样设计:    #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}    第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug    左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.   

#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id=”box”>   <div id=”left”></div>   <div id=”right”></div>   </div>

 

7.IE捉迷藏的问题    当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。    有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

8.float的div闭合;清除浮动;自适应高度; 

① 例如:

<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >

这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)   这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可:

.clear{ clear:both;} 

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的 box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。  

  例如某一个wrapper如下定义:   

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} 

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:   <div id=”page”>   <div id=”left”></div>   <div id=”center”></div>   <div id=”right”></div>    </div>   比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决   

<div id=”page”> 

       <div id=”bg” style=”float:left;width:100%”>  

               <div id=”left”></div>  

              <div id=”center”></div>  

              <div id=”right”></div>  

       </div>  

</div>  

再嵌入一个float left而宽度是100%的DIV解决之

④万能float 闭合(非常重要!)    关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 即可,屡试不爽.   

 /* Clear Fix */   

.clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }   

 .clearfix { display:inline-block; }   

 /* Hide from IE Mac */   

 .clearfix {display:block;}   

/* End hide from IE Mac */   

 /* end of clearfix */   

或者这样设置:

.hackbox{ display:table; //将对象作为块元素级的表格显示}

11.高度不适应    高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。    例:  

#box {background-color:#eee; }    

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }    

<div id=”box”>     <p>p对象中的内容</p>     </div>    

解决方法:在P对象上下各加2个空的div对象CSS代码:

.1{height:0px;overflow:hidden;}

或者为DIV加上 border属性。

12 .IE6下为什么图片下有空隙产生 解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

13.如何对齐文本与文本输入框 加上 vertical-align:middle;

<style type=”text/css”> <!– input {      width:200px;      height:30px;      border:1px solid red;      vertical-align:middle; } –> </style>

14.web标准中定义id与class有什么区别吗 一.web标准中是不容许重复ID的,比如 div id=”aa”   不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

15. LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器

<style type=”text/css”>

<!–

li {      width:200px;      white-space:nowrap;      text-overflow:ellipsis;      -o-text-overflow:ellipsis;      overflow: hidden;      }

 –>

</style>

16.为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd “>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

<style type=”text/css”>

<!–

html {      scrollbar-face-color:#f6f6f6;      scrollbar-highlight-color:#fff;      scrollbar-shadow-color:#eeeeee;      scrollbar-3dlight-color:#eeeeee;      scrollbar-arrow-color:#000;      scrollbar-track-color:#fff;      scrollbar-darkshadow-color:#fff;      }

–>

</style>

17.为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

18.怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明

<param name=”wmode” value=”transparent” />

19.怎样使一个层垂直居中于浏览器中 这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

<style type=”text/css”>

 <!–

div {      position:absolute;      top:50%;      lef:50%;      margin:-100px 0 0 -100px;      width:200px;      height:200px;      border:1px solid red;      }

 –>

</style> 

FF与IE

1. Div居中问题   div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。 

2.链接(a标签)的边框与背景   a 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

3.超链接访问过后hover样式就不出现的问题 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A

Code:

<style type=”text/css”> <!– a:link {} a:visited {} a:hover {} a:active {} –> </style>  

4. 游标手指cursor    cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

5.UL的padding与margin   ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题 

6. FORM标签   这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式

ul,form{margin:0;padding:0;}

给定义死了,所以后面就不会为这个头疼了.

7. BOX模型解释不一致问题   在FF和IE 中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;} 注意这两个 margin的顺序一定不能写反, important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:

div {maring:30px;margin:28px}

重复定义的话按照最后一个来执行,所以不可以只写margin:xx px!important;    

 #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}   

#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)    p[id]{}div[id]{}    这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

9.最狠的手段 – !important;    如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下  

.tabd1{    background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/    background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}  

得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过 

10.IE,FF的默认值问题   或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然后一边写css,一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面,IE并没有我们想象的那么可恶,关键在于IE和FF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FF和 IE的css并不是那么困难,或许对于简单的css,你完全可以不用”!important”这个东西了。    我们都知道,浏览器在显示网页的时候,都会根据网页的 css样式表来决定如何显示,但是我们在样式表中未必会将所有的元素都进行了具体的描述,当然也没有必要那么做,所以对于那些没有描述的属性,浏览器将采用内置默认的方式来进行显示,譬如文字,如果你没有在css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,div或者其他元素的背景,如果在 css中没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。

11.为什么FF下文本无法撑开容器的高度 标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min- height:200px;   这里为了照顾不认识min-height的IE6 可以这样定义:

 { height:auto!important; height:200px; min-height:200px; }

12.FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入&#10;的方法来解决

<style type=”text/css”>
<!–
div {      width:300px;      word-wrap:break-word;      border:1px solid red; }
–>
</style>

<div id=”ff”>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

function toBreakWord(el, intLen)
{     
var ōbj=document.getElementById(el);     
var strContent=obj.innerHTML;     
var strTemp=””;     
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+”&#10;”;

strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=”&#10;”+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById   &&   !document.all)
 toBreakWord(“ff”, 37);
</scrīpt>

13.为什么IE6下容器的宽度和FF解释不同呢

<?xml version=”1.0″ encoding=”gb2312″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd “>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<style type=”text/css”>
<!–
div {      cursor:pointer;      width:200px;      height:200px;      border:10px solid red      }
–>
 </style>
<div ōnclick=”alert(this.offsetWidth)”>让FireFox与IE兼容</div>

问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、 standards mode的相关知识,请参考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true

IE6,IE7,FF   IE7.0 出来了,对CSS的支持又有新问题。浏览器多了,网页兼容性更差了,疲于奔命的还是我们,为解决IE7.0的兼容问题,找来了下面这篇文章:现在我大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!下面是三个浏览器的兼容性收集.

第一种,是CSS HACK的方法   

height:20px; /*For Firefox*/    *height:25px; /*For IE7 & IE6*/    _height:20px; /*For IE6*/   

注意顺序。这样也属于CSS HACK,不过没有上面这样简洁。   

#example { color: #333; } /* Moz */    * html #example { color: #666; } /* IE6 */    *+html #example { color: #999; } /* IE7 */

<!–其他浏览器 –><link rel=”stylesheet” type=”text/css” href=”css.css” />   
<!–[if IE 7]>   
<!– 适合于IE7 –>   
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />  
<![endif]–>   
<!–[if lte IE 6]>   
<!– 适合于IE6及一下 –>   
<link rel=”stylesheet” type=”text/css” href=”ie.css” />   
<![endif]–>

第三种,css filter的办法,以下为经典从国外网站翻译过来的。.    新建一个css样式如下: 

#item {         width: 200px;         height: 200px;         background: red;    }    

新建一个div,并使用前面定义的css的样式:   
<div id=”item”>some text here</div>    
在body表现这里加入lang属性,中文为zh:   
<body lang=”en”>    
现在对div元素再定义一个样式:   
*:lang(en) #item{         background:green !important;    }   
 这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:

#item:empty {         background: green !important    }    

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种,简洁,兼容性比较好。

 

 

CSS十条速记口诀

如果在用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢?

一、IE边框若显若无,须注意,定是高度设置已忘记;

二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;

三、三像素文本慢移不必慌,高度设置帮你忙;

四、兼容各个浏览须注意,默认设置行高可能是杀手;

五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;

六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。

七、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。

八、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。

九、IE浮动双边距,请用display:inline拘。

十、列表横向排版,列表代码须紧靠,空隙自消须铭记。

innerHTML 和 pasteHTML 区别

innerHTML 是一个属性 ,可以取得或者设定该元素内的 HTML 内容,可以是任意能包含 HTML 子节点的元素都使用它

pasteHTML() 是一个方法 ,在指定的文字区域内替换该区域内的文本或者HTML,该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上
例:

<Script Language=”JavaScript”>
       function addLink(){
          var oRange = document.selection.createRange();
          if(oRange.text!=”){
             var oUrl = window.prompt(‘链接网址…’,’https://www.nopost.cn/’);
             var oHtml = ‘<a href=’+oUrl+’ target=_blank>’+oRange.text+'</a>’;
             oRange.pasteHTML(oHtml);
          }else{
             window.alert(‘您没有选择加链接的文字!’);
          }

DOM常用操作

1、获取对象
document.getElementById(ID)
//获得指定ID值的对象
document.getElementsByName(Name)
//获得指定Name值的对象数组,常用获取radio,checkbox

2、坐标
var oRect=obj.getBoundingClientRect();
x=oRect.left
y=oRect.top

3、获取窗口大小,分辨率
Java代码
document.body.clientWidth    
document.body.clientHeight    
  获得窗口大小(包含Border、Scroll等元素)    
  document.body.offsetWidth    
  document.body.offsetHeight  
 
分辨率  
creen.width,creen.height.  
具体解释如下:  
 
scrollWidth是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)   
clientWidth是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。  
offsetWidth是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。  
scrollHeight: 获取对象的滚动高度。  
offsetHeight:获取对象相对于版面或由父坐标    
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  
offsetLeft:获取对象相对于版面或由  
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  
offsetTop 属性指定的父坐标的计算顶端位置  
offsetParent 属性指定的父坐标的高度  
offsetParent 属性指定的父坐标的计算左侧位置  
event.clientX 相对文档的水平座标  
event.clientY 相对文档的垂直座标  
event.offsetX 相对容器的水平坐标  
event.offsetY 相对容器的垂直坐标  
document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量     
以上主要指IE之中,FireFox差异如下:  
IE6.0、FF1.06+:  
clientWidth = width + padding clientHeight = height + padding  
offsetWidth = width + padding + border  
offsetHeight = height + padding + border  
IE5.0/5.5:  
clientWidth = width – border  
clientHeight = height – border  
offsetWidth = width  
offsetHeight = height   
 
例:如页面过长,想让id=”view1″的节点显示出来。  
var currentDom=document.getElementById(“view1”).getBoundingClientRect();  
            if(currentDom.top>window.document.body.clientHeight){  
                window.document.body.scrollTop=currentDom.top;  
            } 

document.body.clientWidth 
document.body.clientHeight 
  获得窗口大小(包含Border、Scroll等元素) 
  document.body.offsetWidth 
  document.body.offsetHeight

分辨率
creen.width,creen.height.
具体解释如下:

scrollWidth是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)
clientWidth是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
offsetWidth是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
scrollHeight: 获取对象的滚动高度。
offsetHeight:获取对象相对于版面或由父坐标 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
offsetLeft:获取对象相对于版面或由
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
offsetTop 属性指定的父坐标的计算顶端位置
offsetParent 属性指定的父坐标的高度
offsetParent 属性指定的父坐标的计算左侧位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量   
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height

例:如页面过长,想让id=”view1″的节点显示出来。
var currentDom=document.getElementById(“view1”).getBoundingClientRect();
    if(currentDom.top>window.document.body.clientHeight){
     window.document.body.scrollTop=currentDom.top;
    }
4、dom加载顺序

1.HTML解析完毕
2.外部脚本和样式表加载完毕
3.脚本在文档内解析并执行
4.HTML DOM完全构造起来
5.图片和外部内容加载
6.网页完成加载
监听DOM加载状态

 

这项技术在不堵塞浏览器加载的情况下尽可能快地检查HTML DOM文档是否已经加载了执行所必须的属性。

document

document.getElementById

document.getElementsByTagName

document.body

检查这几个对象可以获知DOM的加载状态

 

以下代码监听DOM何时加载完毕(来自《精通JavaScript》)

Java代码

Java代码
function domReady(func) {  
    // 假如DOM已经加载,马上执行函数  
    if (domReady.done) return func();  
      
    // 假如我们已经增加了一个函数  
    if (domReady.timer) {  
        // 把它加入到待执行函数清单中  
        domReady.ready.push(func);  
    }  
    else {  
        // 为页面加载完毕绑定一个事件以防止它最先完成。使用addEvent函数  
        // addEvent函数为由Dean Edwards编写的著名函数  
        addEvent(window, “load”, isDOMReady );  
          
        // 初始化待执行函数的数组  
        domReady.ready[ func ];  
          
        // 尽可能快地检查DOM是否已可用  
        domReady.timer = setInterval(isDOMReady, 13);  
    }  
};  
 
//检查DOM是否已可操作  
function isDOMReady() {  
    // 如果我们能判断出DOM已可用,忽略  
    if (domReady.done) return false;  
      
    // 检查若干函数和元素是否可用  
    if (document && document.getElementsByTagName && document.getElementById && document.body) {  
        // 如果可用,我们可以停止检查  
        clearInterval(douReady.timer);  
        domReady.timer = null;  
          
        // 执行所有正等待的函数  
        for (var i = 0; i < domReady.ready.length; i++)  
            domReady.ready[i]();  
              
        // 记录我们在此已经完成  
        domReady.ready = null;  
        domReady.done = true;  
    }  

function domReady(func) {
    // 假如DOM已经加载,马上执行函数
    if (domReady.done) return func();
   
    // 假如我们已经增加了一个函数
    if (domReady.timer) {
        // 把它加入到待执行函数清单中
        domReady.ready.push(func);
    }
    else {
        // 为页面加载完毕绑定一个事件以防止它最先完成。使用addEvent函数
        // addEvent函数为由Dean Edwards编写的著名函数
        addEvent(window, “load”, isDOMReady );
       
        // 初始化待执行函数的数组
        domReady.ready[ func ];
       
        // 尽可能快地检查DOM是否已可用
        domReady.timer = setInterval(isDOMReady, 13);
    }
};

//检查DOM是否已可操作
function isDOMReady() {
    // 如果我们能判断出DOM已可用,忽略
    if (domReady.done) return false;
   
    // 检查若干函数和元素是否可用
    if (document && document.getElementsByTagName && document.getElementById && document.body) {
        // 如果可用,我们可以停止检查
        clearInterval(douReady.timer);
        domReady.timer = null;
       
        // 执行所有正等待的函数
        for (var i = 0; i < domReady.ready.length; i++)
            domReady.ready[i]();
           
        // 记录我们在此已经完成
        domReady.ready = null;
        domReady.done = true;
    }
}
5、增加对象
Java代码
/*创建新层*/ 
var div_view=document.createElement(“div”);  
也可这样创建 document.createElement(“<div></div>”);  
设置样式:div_view.className=””;  
设置ID:div_view.id=”div1″;  
设置div显示内容:div_view.innerHTML=”test”;  
innerHTML即div里的内容。例<div id=”div1″>test1</div>,div1.innerHTML则是”test1″ 
outerHTML则是整个div。例div1.outerHTMl是”<div id=div1>test1</div>”.  
注意,innerHTML和outerHTML均会把”,’去掉。  
/*创建table,插入行,列*/ 
var table=document.createElement(“table”);  
var trow=table.insertRow();插入行到最后。  
var trow=table.insertRow(1);插入到第2行。  
var rowLength=table.rows.length;获取table的总行数  
var tcell=row.insertCell();插入一列  
tcell.innerHTML=”insert row”;设置列内容  
其他的创建方式类似。  
document.body.appendChild(div_view);把层添加到body中,这样才会在页面中显示增加的层。 

/*创建新层*/
var div_view=document.createElement(“div”);
也可这样创建 document.createElement(“<div></div>”);
设置样式:div_view.className=””;
设置ID:div_view.id=”div1″;
设置div显示内容:div_view.innerHTML=”test”;
innerHTML即div里的内容。例<div id=”div1″>test1</div>,div1.innerHTML则是”test1″
outerHTML则是整个div。例div1.outerHTMl是”<div id=div1>test1</div>”.
注意,innerHTML和outerHTML均会把”,’去掉。
/*创建table,插入行,列*/
var table=document.createElement(“table”);
var trow=table.insertRow();插入行到最后。
var trow=table.insertRow(1);插入到第2行。
var rowLength=table.rows.length;获取table的总行数
var tcell=row.insertCell();插入一列
tcell.innerHTML=”insert row”;设置列内容
其他的创建方式类似。
document.body.appendChild(div_view);把层添加到body中,这样才会在页面中显示增加的层。

6、frame
window.frames[“frameName”]获取frame的window对象
7、select
Java代码
当前选中的option:select.options[select.selectedIndex]  
所有options:select.options.返回的是option[]数组  
增加option  
方法1:option1=new Option(text,value);  
      select.add(option1);  
方法2:option2=document.createElement(“option”);  
       option2.value=value;  
       option2.text=text;  
      select.add(option2);  
删除option  
      select.remove(option1);  
删除所有option  
      select.options.length=0;

Javascript常用的一些小技巧

 

1. oncontextmenu=”window.event.returnValue=false” 将彻底屏蔽鼠标右键
    <table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart=”return false”> 取消选取、防止复制

3. onpaste=”return false” 不准粘贴

4. oncopy=”return false;” oncut=”return false;” 防止复制

5. <link rel=”Shortcut Icon” href=”favicon.ico”> IE地址栏前换成自己的图标

6. <link rel=”Bookmark” href=”favicon.ico”> 可以在收藏夹中显示出你的图标
7. <input style=”ime-mode:disabled”> 关闭输入法
8. 永远都会带着框架
 

 程序代码
<script language=”JavaScript”><!–
if (window == top)top.location.href = “frames.htm”; //frames.htm为框架网页
// –></script>
9. 防止被人frame
 

 程序代码
<SCRIPT LANGUAGE=JAVASCRIPT><!–
if (top.location != self.location)top.location=self.location;
// –></SCRIPT>
10. 网页将不能被另存为
<noscript><*** src=”/*.html>”;</***></noscript>
11. <input type=button value=”/查看网页源代码
 

 程序代码
onclick=”window.location = “view-source:”+ http://www.nopost .com”>

12. 删除时确认
 

 程序代码
<a href=””javascript :if(confirm(“确实要删除吗?”))location=”boos.asp?&areyou=删除&page=1″”>删除</a>
13. 取得控件的绝对位置
 

 程序代码
//Javascript
<script language=”Javascript”>
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert(“top=”+t+”/nleft=”+l);
}
</script>
//VBScript
<script language=”VBScript”><!–
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>”BODY”
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox “top=”&t&chr(13)&”left=”&l,64,”得到控件的位置”
end function
–></script>
14. 光标是停在文本框文字的最后
 

 程序代码
<script language=”javascript”>
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart(“character”,e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value=”123″ onfocus=”cc()”>

15. 判断上一页的来源
javascript :
document.referrer
16. 最小化、最大化、关闭窗口
 

 程序代码
<object id=hh1 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″>
<param name=”Command” value=”Minimize”></object>
<object id=hh2 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″>
<param name=”Command” value=”Maximize”></object>
<OBJECT id=hh3 classid=”clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11″>
<PARAM NAME=”Command” value=”/Close”></OBJECT>
<input type=button value=”/最小化 onclick=hh1.Click()>
<input type=button value=”/blog/最大化 onclick=hh2.Click()>
<input type=button value=关闭 onclick=hh3.Click()>
本例适用于IE
17.屏蔽功能键Shift,Alt,Ctrl
 

 程序代码
<script>
function look(){
if(event.shiftKey)
alert(“禁止按Shift键!”); //可以换成ALT CTRL
}
document.onkeydown=look;
</script>

 

18. 网页不会被缓存
 

 程序代码
<META HTTP-EQUIV=”pragma” CONTENT=”no-cache”>
<META HTTP-EQUIV=”Cache-Control” CONTENT=”no-cache, must-revalidate”>
<META HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08:21:57 GMT”>
或者<META HTTP-EQUIV=”expires” CONTENT=”0″>
19.怎样让表单没有凹凸感?
 

 程序代码
<input type=text style=”””border:1 solid #000000″>

<input type=text style=”border-left:none; border-right:none; border-top:none; border-bottom:
1 solid #000000″></textarea>
20.<div><span>&<layer>的区别?
<div>(division)用来定义大段的页面元素,会产生转行
<span>用来定义同一行内的元素,跟<div>的唯一区别是不产生转行
<layer>是ns的标记,ie不支持,相当于<div>
21.让弹出窗口总是在最上面:
<body onblur=”this.focus();”>
22.不要滚动条?
 

 程序代码
让竖条没有:
<body style=”overflow:scroll;overflow-y:hidden”>
</body>
让横条没有:
<body style=”overflow:scroll;overflow-x:hidden”>
</body>
两个都去掉?更简单了
<body scroll=”no”>
</body>

 

23.怎样去掉图片链接点击后,图片周围的虚线?
<a href=”#” onFocus=”this.blur()”><img src=”/logo.jpg” border=0></a>
24.电子邮件处理提交表单
 

 程序代码
<form name=”form1″ method=”post” action=mailto:****@***.com
enctype=”text/plain”>
<input type=submit>
</form>
25.在打开的子窗口刷新父窗口的代码里如何写?
window.opener.location.reload()
26.如何设定打开页面的大小
<body onload=”top.resizeTo(300,200);”>
打开页面的位置<body onload=”top.moveBy(300,200);”>
27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
 

 程序代码
<STYLE>
body
{background-image:url(/logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>
28. 检查一段字符串是否全由数字组成
 

 程序代码
<script language=”Javascript”><!–
function checkNum(str){return str.match(//D/)==null}
alert(checkNum(“1232142141”))
alert(checkNum(“123214214a1”))
// –></script>
29. 获得一个窗口的大小
document.body.clientWidth; document.body.clientHeight
30. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert(“含有汉字”);
else alert(“全是字符”);

后台订单层—

function bind_order_event()
    {
        var order_seq = 0; //设置变量等于0
        //while 在进入循环时先检查条件,下面为true,那就直接进入循环
        while(true)   //整不明白
        {
            //先暂且不论Utils是什么东西, 可以肯定是一个对象
            //第一次进入循环 order_seq= 0
            //那么$(‘order_’+order_seq) = $(‘order_0’) 
            //这样看来可能是找页面上的某个元素对象
            //而这个$(‘order_0’) 又是Utils的一个属性
            
            var order_sn = Utils.$(‘order_’+order_seq); 整不明白

            //也就是说,如果这个存在,也就是找到了$(‘order_0’) 具体你点右键,查看源代码
            //看看是不是有order_0字样的东西
            if (order_sn)   //这里是判断什么的?判断order_sn存在呢,还是判断值呢?
            {
                //e 在函数参数列表内,那么当鼠标移动,会有个事件发生,就是event,
                order_sn.onmouseover = function(e) //设置函数e代表 鼠标移动? 
                {
                    //试图执行clearTimeout,如果失败,系统会转到catch
                    try         //没明白
                    {
                        window.clearTimeout(timer); //清除时间
                    }
                    catch(e)                           //没明白 ——–
                    {
                    }
                    //估计是调用ajax,返回一个什么值
                    var order_id = Utils.request(this.href, ‘order_id’); //没明白
                    //有了order_id,调用下面这个函数,估计是显示产品
                    show_order_goods(e, order_id, show_goods_layer);     //运行这个函数?
                }
                //
                order_sn.onmouseout = function(e)                //设置函数e代表 鼠标离开? 

                {
                    hide_order_goods(show_goods_layer)            //运行这个函数?

                }
                order_seq++;                                变量的值加1
            }
            else                                          //否则
            {
                break;                                     //终止运行
            }
        }

 
 
 
全文如下:
    onload = function()
    {
        // 开始检查订单
        startCheckOrder();
    }
    /**
     * 搜索订单
     */
    function searchOrder()
    {
        listTable.filter[‘order_sn’] = Utils.trim(document.forms[‘searchForm’].elements[‘order_sn’].value);
        listTable.filter[‘consignee’] = Utils.trim(document.forms[‘searchForm’].elements[‘consignee’].value);
        listTable.filter[‘composite_status’] = document.forms[‘searchForm’].elements[‘status’].value;
        listTable.filter[‘page’] = 1;
        listTable.loadList();
    }
    function check()
    {
      var snArray = new Array();
      var eles = document.forms[‘listForm’].elements;
      for (var i=0; i<eles.length; i++)
      {
        if (eles[i].tagName == ‘INPUT’ && eles[i].type == ‘checkbox’ && eles[i].checked && eles[i].value != ‘on’)
        {
          snArray.push(eles[i].value);
        }
      }
      if (snArray.length == 0)
      {
        return false;
      }
      else
      {
        eles[‘order_id’].value = snArray.toString();
        return true;
      }
    }
    /**
     * 显示订单商品及缩图
     */
    var show_goods_layer = ‘order_goods_layer’;
    var goods_hash_table = new Object;
    var timer = new Object;
    /**
     * 绑定订单号事件
     *
     * @return void
     */
    function bind_order_event()
    {
        var order_seq = 0;
        while(true)
        {
            var order_sn = Utils.$(‘order_’+order_seq);
            if (order_sn)
            {
                order_sn.onmouseover = function(e)
                {
                    try
                    {
                        window.clearTimeout(timer);
                    }
                    catch(e)
                    {
                    }
                    var order_id = Utils.request(this.href, ‘order_id’);
                    show_order_goods(e, order_id, show_goods_layer);
                }
                order_sn.onmouseout = function(e)
                {
                    hide_order_goods(show_goods_layer)
                }
                order_seq++;
            }
            else
            {
                break;
            }
        }
    }
    listTable.listCallback = function(result, txt)
    {
        if (result.error > 0)
        {
            alert(result.message);
        }
        else
        {
            try
            {
                document.getElementById(‘listDiv’).innerHTML = result.content;
                bind_order_event();
                if (typeof result.filter == “object”)
                {
                    listTable.filter = result.filter;
                }
                listTable.pageCount = result.page_count;
            }
            catch(e)
            {
                alert(e.message);
            }
        }
    }
    /**
     * 浏览器兼容式绑定Onload事件
     *
     */
    if (Browser.isIE)
    {
        window.attachEvent(“onload”, bind_order_event);
    }
    else
    {
        window.addEventListener(“load”, bind_order_event, false);
    }
    /**
     * 建立订单商品显示层
     *
     * @return void
     */
    function create_goods_layer(id)
    {
        if (!Utils.$(id))
        {
            var n_div = document.createElement(‘DIV’);
            n_div.id = id;
            n_div.className = ‘order-goods’;
            document.body.appendChild(n_div);
            Utils.$(id).onmouseover = function()
            {
                window.clearTimeout(window.timer);
            }
            Utils.$(id).onmouseout = function()
            {
                hide_order_goods(id);
            }
        }
        else
        {
            Utils.$(id).style.display = ”;
        }
    }
    /**
     * 显示订单商品数据
     *
     * @return void
     */
    function show_order_goods(e, order_id, layer_id)
    {
        create_goods_layer(layer_id);
        $layer_id = Utils.$(layer_id);
        $layer_id.style.top = (Utils.y(e) + 12) + ‘px’;
        $layer_id.style.left = (Utils.x(e) + 12) + ‘px’;
        if (typeof(goods_hash_table[order_id]) == ‘object’)
        {
            response_goods_info(goods_hash_table[order_id]);
        }
        else
        {
            $layer_id.innerHTML = loading;
            Ajax.call(‘order.php?is_ajax=1&act=get_goods_info&order_id=’+order_id, ”, response_goods_info , ‘POST’, ‘JSON’);
        }
    }
    /**
     * 隐藏订单商品
     *
     * @return void
     */
    function hide_order_goods(layer_id)
    {
        $layer_id = Utils.$(layer_id);
        window.timer = window.setTimeout(‘$layer_id.style.display = “none”‘, 500);
    }
    /**
     * 处理订单商品的Callback
     *
     * @return void
     */
    function response_goods_info(result)
    {
        if (result.error > 0)
        {
            alert(result.message);
            hide_order_goods(show_goods_layer);
            return;
        }
        if (typeof(goods_hash_table[result.content[0].order_id]) == ‘undefined’)
        {
            goods_hash_table[result.content[0].order_id] = result;
        }
        Utils.$(show_goods_layer).innerHTML = result.content[0].str;
    }

ecshop中ajax.call使用

 ecshop中的ajax非常好用,当自己第一次使用的时候,也非常吃力。当自己用多了的时候,却感觉十分简单,也特别方便。

   首先,建立dwt.里面写个form进去,加个form提交时间的按扭

<img src=”images/tijiaoanniu_07.gif” width=”69″ height=”20″ border=”0″ style=”cursor:pointer”  onclick=”return sub_zixun();” />

   其次,在js中增加函数

    function sub_zixun(){
   var frm      = document.forms[‘zixun_form’];
  
   var msg_title = frm.elements[‘msg_title’].value;
   var msg_phone = frm.elements[‘msg_phone’].value;
   var user_email = frm.elements[‘user_email’].value;
   var msg_content = frm.elements[‘msg_content’].value;
  
  
   var msg = ”;
   if (msg_title.length == 0)
   {
  msg += ‘标题不能为空’ + ‘\n’;
   }
   if (msg_phone.length == 0)
   {
  msg += ‘电话号码不能为空’ + ‘\n’;
   }
 
   if (user_email.length == 0)
   {
  msg += ‘Email不能为空’ + ‘\n’;
   }
    if (msg_content.length == 0)
   {
  msg += ‘评论不能为空’ + ‘\n’;
   }
   if (msg.length > 0)
   {
  alert(msg);
  return false;
   }
   else
   {
  Ajax.call( ‘zixun.php?act=act_sub’, ‘msg_phone=’ + msg_phone+’&user_email=’+user_email+’&msg_content=’+msg_content+’&msg_title=’+msg_title, act_callback , ‘POST’, ‘TEXT’, true, true );
   }
}

 3:增加回调函数act_callback ()

function act_callback(result){
 
 if(result == ‘true’){
  alert(“提交评论成功”);
 }else{
  alert(“提交评论失败”);
 }
}

  处理ajax回调值的结果

  elseif ($act == ‘act_sub’){
  include_once(ROOT_PATH . ‘includes/lib_clips.php’);
 $message = array(
        ‘user_id’     => $_SESSION[‘user_id’],
        ‘user_name’   => $_SESSION[‘user_name’],
        ‘user_email’  => isset($_POST[‘user_email’]) ? htmlspecialchars(trim($_POST[‘user_email’]))     : ”,
        ‘msg_type’    => isset($_POST[‘msg_type’]) ? intval($_POST[‘msg_type’])     : 0,
        ‘msg_title’   => isset($_POST[‘msg_title’]) ? trim($_POST[‘msg_title’])     : ”,
        ‘msg_content’ => isset($_POST[‘msg_content’]) ? trim($_POST[‘msg_content’]) : ”,
        ‘order_id’    => 0,
        ‘msg_area’    => 1,
        ‘msg_phone’   => trim($_POST[‘msg_phone’]),
        ‘upload’      => array()
     );//留言板提交的数据
    
     if (add_message($message)){
      echo ‘true’;
     }else{
      echo ‘false’;
     }
  

}

  这样就完成了一次ecshop中ajax的所有调用步骤。

仿淘宝运费-无错JS修改版

 

good.php页面

 

/*—————————————————— */
//取得全国一级城市信息  for nopost QQ:859898918
/*—————————————————— */
function get_region_name(){
$sql=”SELECT * FROM ecs_region WHERE parent_id =’1′;”;
return $GLOBALS[‘db’]->getAll($sql);
}
/*—————————————————— */
//:取得商品的重量  for nopost QQ:859898918
/*—————————————————— */
function get_goods_weight($goods_id){
$sql=”select goods_weight from ecs_goods where goods_id = ‘$goods_id’;”;
$rs = $GLOBALS[‘db’]->getAll($sql);
return $rs[0][‘goods_weight’];
}
//传给smarty模板
$smarty->assign(‘tc_goods_weight’,get_goods_weight($goods_id));//商品重量
$smarty->assign(‘regionname’,get_region_name()); //全国一级省市

 

 good.dwt页面

 

< script>
/*  运费JS */
function createCityList(elem){
 var e=event || window.event;
 var xx = e.clientX;
 var yy = e.clientY;
 $$(“showList”).style.display=’block’;
 $$(“showList”).style.left=xx+’px’;
 $$(“showList”).style.top=yy+’px’; 
}
function changeCity(cityname,regid){
 var tc_goodsweight = Math.ceil($$(“hiddenprice”).innerText); //取得商品重量
 $$(“flowcity”).innerText=cityname;
 if(tc_goodsweight== 0)
  tc_goodsweight=1;
 else
  tc_goodsweight=tc_goodsweight;
 //北京
 if(regid==2){
  initprice();
 }
 //河北 天津
 else if(regid==27 || regid==10){  
  if(tc_goodsweight==1){
   $$(“tc_flowprice”).innerText= “8”; //首重
  }else{
   $$(“tc_flowprice”).innerText= ((tc_goodsweight – 1)*3 + 8 ); //续3
  } 
 }
 //新疆 西藏
 else if(regid==28 || regid==29){
  if(tc_goodsweight==1){
   $$(“tc_flowprice”).innerText= “20”; //首重
  }else{
   $$(“tc_flowprice”).innerText= ((tc_goodsweight – 1)*10 + 20 );//续10
  }
 }
 //香港
 else if(regid==33){
  if(tc_goodsweight==1){
   $$(“tc_flowprice”).innerText= “25”; //首重
  }else{
   $$(“tc_flowprice”).innerText= ((tc_goodsweight – 1)*10 + 25 );//续10
  }
 }
 //澳门
 else if(regid==34){
  if(tc_goodsweight==1){
   $$(“tc_flowprice”).innerText= “35”; //首重
  }else{
   $$(“tc_flowprice”).innerText= ((tc_goodsweight – 1)*20 + 35 );//续20
  }
 }
 //台湾
 else if(regid==35){
  if(tc_goodsweight==1){
   $$(“tc_flowprice”).innerText= “30”; //首重
  }else{
   $$(“tc_flowprice”).innerText= ((tc_goodsweight – 1)*28 + 30 );//续28
  }
 }
 //其他
 else{
  if(tc_goodsweight==1){
   $$(“tc_flowprice”).innerText= “10”; //首重
  }else{
   $$(“tc_flowprice”).innerText= ((tc_goodsweight – 1)*5 + 10 );//续5
  }
 }
 
 $$(“showList”).style.display=’none’;
}
function hideCityList(){
 $$(“showList”).style.display=’none’;
}
</script>

 

……

 

 

 

 

 
      <li>
       <dd>
       <!– {if $goods.goods_brand neq “” and $cfg.show_brand} 显示商品品牌–>
       <strong>{$lang.goods_brand}</strong><a href=”{$goods.goods_brand_url}” >{$goods.goods_brand}</a>
       <!–{/if}–>
       </dd>
       <dd>     
                     至 <label onmouseover=”createCityList(this);” onmouseout=”hideCityList();”  id=”flowcity”>{$mycity}</label><img src=”images/selectcity.jpg” /> <label id=”tc_flowprice”>平邮:{$p_fee}元  快递:{$s_fee}元  EMS{$e_fee} 元</label> <br />
     
        <div id=”showList” style=”position:absolute;border:2px solid #ccc; display:none;font-size:12px; padding:5px; background:#fff; width:260px; z-index:99999″ onmousemove=”this.style.display=’block'”; onmouseout=”this.style.display=’none'”> 
    <div id=”hiddenprice” style=”display:none;”>{$tc_goods_weight.goods_weight}</div>
    <!–{foreach from=$regionname item=region_names}–>
     <a href=”javascript:” onclick=”changeCity(this.innerText,{$region_names.region_id})”>{$region_names.region_name}</a>
    <!–{/foreach}–>
        </dd>
      </li>
      <li>
       <dd>
       <!– {if $cfg.show_addtime} 上架时间–>
      <strong>{$lang.add_time}</strong>{$goods.add_time}
      <!– {/if} –>
       </dd>
       <dd>
       <!–点击数–>
       <strong>{$lang.goods_click_count}:</strong>{$goods.click_count}
       </dd>
      </li>

 

……

 

<!– {literal} –>
onload = function(){
  changePrice();
  fixpng();
  //initprice(); //tc:初始化运费信息
  try { onload_leftTime(); }
  catch (e) {}
}

 

/**
 * 运费相关
 */
function initprice(){
var tc_goodsweight = Math.ceil($$(“hiddenprice”).innerText);
tc_goodsweight == 0 ? 1 : tc_goodsweight;
if(tc_goodsweight <=5)
  $$(“tc_flowprice”).innerText = ‘5’;
if(tc_goodsweight >=5 && tc_goodsweight<=10)
  $$(“tc_flowprice”).innerText = ’10’;
if(tc_goodsweight >=10 && tc_goodsweight<=15)
  $$(“tc_flowprice”).innerText = ’15’;
if(tc_goodsweight >=15 && tc_goodsweight<=20)
  $$(“tc_flowprice”).innerText = ’20’;
}

 

/**
 * 点选可选属性或改变数量时修改商品价格的函数
 */
function changePrice()
{
  var attr = getSelectedAttributes(document.forms[‘ECS_FORMBUY’]);
  var qty = document.forms[‘ECS_FORMBUY’].elements[‘number’].value;

 

  Ajax.call(‘goods.php’, ‘act=price&id=’ + goodsId + ‘&attr=’ + attr + ‘&number=’ + qty, changePriceResponse, ‘GET’, ‘JSON’);
}

 

/**
 * 接收返回的信息
 */
function changePriceResponse(res)
{
  if (res.err_msg.length > 0)
  {
    alert(res.err_msg);
  }
  else
  {
    document.forms[‘ECS_FORMBUY’].elements[‘number’].value = res.qty;

 

    if (document.getElementById(‘ECS_GOODS_AMOUNT’))
      document.getElementById(‘ECS_GOODS_AMOUNT’).innerHTML = res.result;
  }
}
<!– {/literal} –>
</script>
</html>

 

ecshop二次开发相关资料–ecshop函数列表大全

所有函数功能说明:

lib_time.php
gmtime()
P: 获得当前格林威治时间的时间戳 /$0
server_timezone()
P: 获得服务器的时区 /$0
local_mktime($hour = NULL , $minute= NULL, $second = NULL,  $month = NULL,  $day = NULL,  $year = NULL)
P: 生成一个用户自定义时区日期的GMT时间戳
local_date($format, $time = NULL)
P: 将GMT时间戳格式化为用户自定义时区日期
gmstr2time($str)
P: 转换字符串形式的时间表达式为GMT时间戳
local_strtotime($str)
P: 将一个用户自定义时区的日期转为GMT时间戳
local_gettime($timestamp = NULL)
P:  获得用户所在时区指定的时间戳
local_getdate($timestamp = NULL)
P: 获得用户所在时区指定的日期和时间信息

lib_base.php
sub_str($str, $length = 0, $append = true)
P: 截取UTF-8编码下字符串的函数
real_ip()
P: 获得用户的真实IP地址
str_len($str)
P: 计算字符串的长度(汉字按照两个字符计算)
get_crlf()
P: 获得用户操作系统的换行符
send_mail($name, $email, $subject, $content, $type = 0, $notification=false)
P: 邮件发送
gd_version()
P:  获得服务器上的 GD 版本
file_get_contents($file)
P: 如果系统不存在file_get_contents函数则声明该函数
file_put_contents($file, $data, $flags = ”)
P: 如果系统不存在file_put_contents函数则声明该函数
floatval($n)
P: 如果系统不存在 floatval 函数则声明该函数
file_mode_info($file_path)
P: 文件或目录权限检查函数
log_write($arg, $file = ”, $line = ”)
P: 写入日志内容
make_dir($folder)
P: 检查目标文件夹是否存在,如果不存在则自动创建该目录
gzip_enabled()
P: 获得系统是否启用了 gzip
addslashes_deep($value)
P: 递归方式的对变量中的特殊字符进行转义
addslashes_deep_obj($obj)
P: 将对象成员变量或者数组的特殊字符进行转义
stripslashes_deep($value)
P: 递归方式的对变量中的特殊字符去除转义
make_semiangle($str)
P: 将一个字串中含有全角的数字字符、字母、空格或’%+-()’字符转换为相应半角字符
check_file_type($filename, $realname = ”, $limit_ext_types = ”)
P: 检查文件类型 /文件名/真实文件名/允许的文件类型
mysql_like_quote($str)
P: 对 MYSQL LIKE 的内容进行转义 过滤掉_ %等字符.
real_server_ip()
P: 获取服务器的ip
ecs_header($string, $replace = true, $http_response_code = 0)
P: 自定义 header 函数,用于过滤可能出现的安全隐患
ecs_iconv($source_lang, $target_lang, $source_string = ”)
P: 自定义的编码转换
ecs_geoip($ip)
P: 取得IP的地址,采用IP库
trim_right($str)
P: 去除字符串右侧可能出现的乱码
move_upload_file($file_name, $target_name = ”)
P: 将上传文件转移到指定位置
json_str_iconv($str)
P: 将JSON传递的参数转码
get_file_suffix($file_name, $allow_type = array())
P: 获取文件后缀名,并判断是否合法
read_static_cache($cache_name)
P: 读结果缓存文件
write_static_cache($cache_name, $caches)
P: 写结果缓存文件

lib_common.php (公用函数库)
db_create_in($item_list, $field_name = ”)
P: 创建像这样的查询: “IN(‘a’,’b’)” $item_list为数组
is_email($user_email)
P: 验证输入的邮件地址是否合法
is_time($time)
P: 检查是否为一个合法的时间格式
assign_query_info()
P: 获得查询时间和次数,并赋值给smarty
region_result($parent, $sel_name, $type)
P: 创建地区的返回信息
get_regions($type = 0, $parent = 0)
P: 获得指定国家的所有省份, 函数需要数据库支持.
get_shipping_config($area_id)
P: 获得配送区域中指定的配送方式的配送费用的计算参数 比如快捷公司不同.
init_users()
P: 初始化会员数据整合类
cat_list($cat_id = 0, $selected = 0, $re_type = true, $level = 0, $is_show_all = true)
P: 获得指定分类下的子分类的数组, $re_type控制返回类型
cat_options($spec_cat_id, $arr)
P: 过滤和排序所有分类,返回一个带有缩进级别的数组
load_config()
P: 载入配置信息
get_brand_list()
P: 取得品牌列表
get_brands($cat = 0, $app = ‘brand’)
P: 获得某个分类下的品牌列表
get_promotion_info($goods_id = ”)
P: 所有的促销活动信息
get_children($cat = 0)
P: 获得指定分类下所有底层分类的ID
get_article_children ($cat = 0)
P: 获得指定文章分类下所有底层分类的ID
get_mail_template($tpl_name)
P: 获取邮件模板
order_action($order_sn, $order_status, $shipping_status, $pay_status, $note = ”, $username = null)
P: 记录订单操作记录
price_format($price, $change_price = true)
P: 格式化商品价格
get_virtual_goods($order_id, $shipping = false)
P: 返回订单中的虚拟商品 记录是否发货.
virtual_goods_ship(&$virtual_goods, &$msg, $order_sn, $return_result = false, $process = ‘other’)
P:  虚拟商品发货
virtual_card_shipping ($goods, $order_sn, &$msg, $process = ‘other’)
P: 虚拟卡发货
virtual_card_result($order_sn, $goods)
P: 返回虚拟卡信息
get_snatch_result($id)
P: 获取指定 id snatch 活动的结果
clear_tpl_files($is_cache = true, $ext = ”)
P: 清除指定后缀的模板缓存或编译文件
clear_compiled_files($ext = ”)
P: 清除模版编译文件
clear_cache_files($ext = ”)
P: 清除缓存文件
clear_all_files($ext = ”)
P: 清除模版编译和缓存文件
smarty_insert_scripts($args)
P: 页面上调用的js文件,组合功能.
smarty_create_pages($params)
P: 创建分页的列表
build_uri($app, $params, $append = ”, $page = 0, $size = 0)
P: 重写 URL 地址
formated_weight($weight)
P: 格式化重量
log_account_change($user_id, $user_money = 0, $frozen_money = 0, $rank_points = 0, $pay_points = 0, $change_desc = ”, $change_type = ACT_OTHER)
P: 记录帐户变动
article_cat_list($cat_id = 0, $selected = 0, $re_type = true, $level = 0)
P: 获得指定分类下的子分类的数组/ 向下取数组.
article_cat_options($spec_cat_id, $arr)
P: 过滤和排序所有文章分类,返回一个带有缩进级别的数组
uc_call($func, $params=null)
P: 调用UCenter的函数
exception_handler($errno, $errstr, $errfile, $errline)
P: error_handle回调函数未启用.
get_image_path($goods_id, $image=”, $thumb=false, $call=’goods’, $del=false)
P: 重新获得商品图片与商品相册的地址
user_uc_call($func, $params = null)
P: 调用使用UCenter插件时的函数
get_volume_price_list($goods_id, $price_type = ‘1’)
P: 取得商品优惠价格列表
get_final_price($goods_id, $goods_num = ‘1’, $is_spec_price = false, $spec = array())
P: 取得商品最终使用价格
get_package_info($id)
P: 获取指定id package 的信息
get_package_goods($package_id)
P: 获得指定礼包的商品

lib_main.php (前台公用函数库)
update_user_info()
P: 更新用户SESSION,COOKIE及登录时间、登录次数。
get_user_info($id=0)
P:  获取用户信息数组
assign_ur_here($cat = 0, $str = ”)
P: 取得当前位置和页面标题
get_parent_cats($cat)
P: 获得指定分类的所有上级分类
build_pagetitle($arr, $type = ‘category’)
P: 根据提供的数组编译成页面标题
build_urhere($arr, $type = ‘category’)
P: 根据提供的数组编译成当前位置
assign_dynamic($tmp
P: 获得指定页面的动态内容
assign_articles($id, $num)
P: 分配文章列表给smarty
get_shop_help()
P: 分配帮助信息
assign_pager($app, $cat, $record_count, $size, $sort, $order, $page = 1,$keywords = ”, $brand = 0, $price_min = 0, $price_max = 0, $display_type = ‘list’, $filter_attr=”, $url_format=”, $sch_array=”)
P: 创建分页信息.分页函数.
get_pager($url, $param, $record_count, $page = 1, $size = 10)
P: 生成给pager.lbi赋值的数组
get_vote($id = ”)
P: 调用调查内容
get_user_browser()
P: 获得浏览器名称和版本
is_spider($record = true)
P: 判断是否为搜索引擎蜘蛛
get_os()
P: 获得客户端的操作系统
visit_stats()
P: 统计访问信息
save_searchengine_keyword($domain, $path)
P: 保存搜索引擎关键字
get_tags($goods_id = 0, $user_id = 0)
P: 获得指定用户、商品的所有标记
get_dyna_libs($theme, $tmp)
P:  获取指定主题某个模板的主题的动态模块
dyna_libs_replace($matches)
P: 换动态模块
upload_file($upload, $type)
P: 处理上传文件,并返回上传图片名(上传失败时返回图片名为空)
show_message($content, $links = ”, $hrefs = ”, $type = ‘info’, $auto_redirect = true)
P: 显示一个提示信息
parse_rate_value($str, &$operate)
P: 将一个形如+10, 10, -10, 10%的字串转换为相应数字,并返回操作符号
recalculate_price()
P: 重新计算购物车中的商品价格:目的是当用户登录时享受会员价格,当用户退出登录时不享受会员价格

assign_comment($id, $type, $page = 1)
P: 查询评论内容
assign_template($ctype = ”, $catlist = array())
P: 默认的smarty赋值
time2gmt($time)
P: 将一个本地时间戳转成GMT时间戳
get_user_bonus($user_id = 0)
P: 查询会员的红包金额
set_affiliate()
P: 保存推荐uid
get_affiliate()
P: 获取推荐uid
article_categories_tree($cat_id = 0)
P: 获得指定分类同级的所有分类以及该分类下的子分类
get_article_parent_cats($cat)
P: 获得指定文章分类的所有上级分类
get_library_number($library, $template = null)
P: 取得某模板某库设置的数量
get_navigator($ctype = ”, $catlist = array())
P: 取得自定义导航栏列表
license_info()
P: 授权信息内容

lib_insert.php (动态内容函数库)
insert_query_info()
P: 获得查询次数以及查询时间
insert_history()
P: 调用浏览历史
insert_cart_info()
P: 调用购物车信息
insert_ads($arr)
P: 调用指定的广告位的广告
insert_member_info()
P: 调用会员信息
insert_comments($arr)
P: 调用评论信息
insert_vote()
P: 调用在线调查信息

lib_goods.php (商品相关函数库)
goods_sort($goods_a, $goods_b)
P: 商品推荐usort用自定义排序行数
get_categories_tree($cat_id = 0)
P: 获得指定分类同级的所有分类以及该分类下的子分类
get_child_tree($tree_id = 0)
P: 取和指定分类ID下的分类树
get_top10($cats = ”)
P: 调用当前分类的销售排行榜
get_recommend_goods($type = ”, $cats = ”)
P: 获得推荐商品
get_promote_goods($cats = ”)
P: 获得促销商品
get_category_recommend_goods($type = ”, $cats = ”, $brand = 0, $min =0,  $max = 0, $ext=”)
P: 获得指定分类下的推荐商品
get_goods_info($goods_id)
P: 获得商品的详细信息
get_goods_properties($goods_id)
P: 获得商品的属性和规格
get_same_attribute_goods($attr)
P:  获得属性相同的商品
get_goods_gallery($goods_id)
P: 获得指定商品的相册
assign_cat_goods($cat_id, $num = 0, $from = ‘web’)
P: 获得指定分类下的商品
assign_brand_goods($brand_id, $num = 0, $cat_id = 0)
P: 获得指定的品牌下的商品
get_extension_goods($cats)
P: 获得所有扩展分类属于指定分类的所有商品ID
bargain_price($price, $start, $end)
P: 判断某个商品是否正在特价促销期
spec_price($spec)
P: 获得指定的规格的价格
group_buy_info($group_buy_id, $current_num = 0)
P: 取得团购活动信息
group_buy_stat($group_buy_id, $deposit)
P: 取得某团购活动统计信息
group_buy_status($group_buy)
P: 获得团购的状态
auction_info($act_id, $config = false)
P: 取得拍卖活动信息
auction_log($act_id)
P: 取得拍卖活动出价记录
auction_status($auction)
P: 计算拍卖活动状态(注意参数一定是原始信息)
goods_info($goods_id)
P: 取得商品信息
favourable_info($act_id)
P: 取得优惠活动信息
wholesale_info($act_id)
P: 批发信息
add_style($goods_name, $style)
P:  添加商品名样式
get_goods_attr($goods_id)
P: 取得商品属性
get_goods_fittings($goods_list = array())
P: 获得购物车中商品的配件

lib_article.php (文章及文章分类相关函数库)
get_cat_articles($cat_id, $page = 1, $size = 20 ,$requirement=”)
P: 获得文章分类下的文章列表
get_article_count($cat_id ,$requirement=”)
P: 获得指定分类下的文章总数

私密内容~ASP查询用户和密码源代码

 

查询部分:

<!–#include virtual=”/config/config.asp”–>
<!–#include virtual=”/config/top.asp”–>

<%
conn.open constr
sql=”select * from UserDetail”
rs.open sql,conn,3,3
if not RS.EOF then
while not RS.EOF
%>
用户名:<%=rs(“u_name”)%>
密码:<%=rs(“u_password”)%>
邮箱:<%=rs(“u_email”)%> <br>
<%
RS.movenext
wend
RS.close
end if
set rs=nothing
%>

修改部分:

<!–#include virtual=”/config/config.asp”–>
<!–#include virtual=”/config/top.asp”–>

<%

conn.open constr
sql=”update UserDetail set u_email=’用户邮箱’ where u_name=’用户名’ ”
rs.open sql,conn,3,3
set rs=nothing
%>

输出部分:

message =”感谢您使用本服务! 新的密码u_passwordstring已经发送到您的信箱,请注意查收!”