php与javascript交互
2016-07-05 14:48:39   来源:   评论:0 点击:

PHP与JavaScript交互
一、了解javascript
Javascript是脚本编程语言,支持WEB应用程序的客户端和服务器端构件的开发,在WEB系统中得到了非常广泛的应用。
1、 什么是javascript
Javascript是由netscape communication corporation (网景公司)开发的,是一种基本对象和事件驱动并具有安全性能的解释型脚本语言。
它不但可用于编写客户端脚本程序,由WEB浏览器解释执行;而且还可以编写在服务器端执行的脚本程序,在服务器端处理用户提交的信息并动态地向浏览器返回处理结果。
2、 Javascript的功能
Javascript是比较流行的一种制作网页特效的脚本语言,它由客户端浏览器解释执行,可以应用在PHP、ASP、JSP和ASP.NET网站中。同时目前比较热门的ajax就是以javascript为基础,
由此可见,熟练掌握并应用javascript对于网站开发人员非常重要。
主要应用于以下几个方面:
(1)、在 ,便于网站与用户间的沟通,及时响应用户的操作,对提交的表单做即时检查,如验证表单元素是否为空,验证表单元素是否是数值型、检测表单元素是否输入错误等。
(2)、应用js脚本制作网站特效,如动态的菜单、浮动的广告等,为页面增添绚丽的动态效果,使用网页内容更加丰富、活泼。
(3)、应用JS脚本,建立复杂的网页内容,如打开新窗口载入网页。
(4)、应用JS脚本,可以对用户的不同事件产生不同的响应。
(5)、应用JS脚本,制作各种各样的图片、文字、鼠标、动画和页面的效果。
(6)、应用JS脚本,制作一些小游戏。
二、avascript语言基础
JS脚本语言与其他语言一样,有其自身的基本数据类型、表达式和运算符以及程序的基本框架结构。
1、JS的数据类型
主要有6种数据类型:
字符串型:使用单引号或双引号括起来的一个或多个字符。     如”php”等。
数值型:包括整数或浮点数(包含小数点的数或科学记数法的数)  如-128、12.9、6.98e6等
布尔型:布尔型常量只有两种状态,即true或false               如event.return value=false
对象型:用于指定JS程序中用到的对象。                    如网页表单元素
NULL值:可以通过给一个变量赋null值来清除变量的内容。   如a=null
Undefined:表示该变量尚未被赋值。                        如var a
1、JS的变量
变量是指程序中一个已经命名的存储单元,它的主要作用就是为数据操作提供存放信息的容器。在使用变量前,必须明确变量的命名规则、变量的声明方法及变量的作用域。
   (1)、变量的命名规则
必须以字母或下划线开头,中间可以是数字、字母或下划线。
变量名不能包含空格或加号、减号等符号。
JS的变量名是严格区分大小写的。
不能使用JS中的关键字。JS的关键字如下表:Abstract,continue,finally,instanceof,private,this,boolean,default,float,int,public,throw,break,do,for,interface,
return,typeof,byte,double,function,long,short,true,case,else,goto,native,static,var,catch,extends,implements,new,super,void,char,false,import,null,
switch,while,class,final,in,package,synchronized,with
注意:虽然JS的变量可以任意命名,但为了在编程时使用代码更加规范,最好使用便于记忆、且有意义的变量名称,以增加程序的可读性。
   (2)、变量的声明与赋值
在JS中,一般使用变量前需要先声明变量,但有时变量可以不必先声明,在使用时根据变量的实际作用来确定其所属的数据类型。所有的JS变量都由关键字var声明。
语法如下:
   Varexample;
在声明变量的同时也可以对变量进行赋值:
   Varexample=100;
建议读者在使用变量前就对其声明,因为声明变量最大好处就是能及时发现代码中的错误。由于JS是采用动态编译的,
而动态编译是不易于发现代码中的错误的,特别是变量命   名方面的错误。
声明变量时所遵循的规则如下:
    可以使用一个关键字var同时声明多个变量,例如:
Var I,j;
   可以在声明变量的同时对其进行赋值,即为初始化:例如:
Var i=1;j=100;
    如果只是声明了变量,并未对其赋值,则其值默认为undefined.
在JS中,可以使用分号代表一个语句的结束,如果每个语句都在不同的行中,那么分号可以省略,如果多个语句在同一行中,
那么分号就不能省略。建议大家,不省略分号,以养成良好的编程习惯。
例:
Var i=100;
Var str=”有一条路,走过总会想起。”;
Var content=true;
在程序开发过程中,可以使用var语句多次声明同一个变量,如果重复声明的变量已经有一个初始值,那么此时的声明变就相当于对变量重新赋值。
2、JS的注释
在JS中,采用的注释方法有2种:
   (1)、单行注释
单行注释使用  //  进行标识。// 符号后面的文字都不能被程序解释执行。
   (2)、多行注释
多行注释使用“/*  */”进行标识。“/* …… */”符号中间的文字不被程序解释执行。
多行注释中可以嵌套单行注释,但不能嵌套多行注释。因为第一个 /* 会与其后面第一个 */ 相匹配,从而使后面的注释不起作用,甚至引起程序出错。
另外,JS还能识别HTML注释的开始部分  <!--  JS会将其看作为单行注释结束,如使用 //  一样。但JS不能识别HTML注释的结束部分  -->.
这种现象存在的主要原因是:在JS中,如果第一行以 <!--  开始,最后一行以 --> 结束,那么其间的程序就包含在一个完整的HTML注释中,
会被不支持JS的浏览器忽略掉,不能被显示。如果第一行以 <!--  开始, 最后一行以  //-->结束,JS会将两行都忽略掉,而不会忽略这两行之间的部分。用这种方式可以针对那些无法理解JS的浏览器而隐藏代码,而对那些可以理解JS的浏览器则不必隐藏。
 
三、自定义函数
自定义函数就是由用户自己命名并且书写的能实现特定功能的程序单元。用户使用的自定义函数必须事先声明,不能直接使用没有声明过的自定义函数.
JS用function来定义函数,语法如下:
  Function 函数名(参数){
     Return var;
}
自定义函数的调用方法是:
函数名();
其中的括号一定不能省略。
例:
  <scriptlanguage="javascript">
        function chengji(a,b){
            return a*b;
            }
       document.write("输出的结果是:"+chengji(15,3));
</script>
执行后的结果是:
输出的结果是:45
在同一个页面不能定义名称相同的函数,另外,当用户自定义函数后,需要对该函数进行引用,否则自定义函数将失去意义。
四、Javascript流程控制语句
所谓流程控制语句就是对语句中不同条件的值进行判断,从而根据不同的条件执行不同的语句。在JS中,流程控制语句可以分为条件语句、循环语句和跳转语句。
1、 条件语句
在条件控制语句中主要包括两种:一种是IF条件语句,另一种是Switch多分支语句。
2、 循环语句
3、 跳转语句
五、Javascript事件
JS是基于对象的语言。它的一个最基本的特证就是采用事件驱动。事件是某此动作发生时产生的信号,这些事件随时都可能发生。引起事件发生的动作称之为触发事件。
鼠标键盘事件  Onclick                       鼠标单击时触发此事件
          Ondblclick                                 鼠标双击时触发此事件
                  Onmousedown                               按下鼠标时触发此事件
         Onmouseup                                    鼠标按下后松开鼠标时触发此事件
               Onumoseover                                 鼠标移动到某对象范围上方时触发
                  Onumosemove                               鼠标移动时触发此事件
                  Onmoseout                             鼠标离开某个对象范围时触发此事件
                  Onkeypress                             当键盘上的某个按键被按下并且释放时触发
                  Onkeydown                                   当键盘上的某个按键被按下时触发此事件
                  Onkeyup                                 当键盘上的某个按键被按下后松开时触发
页面相关事件  onabort                                 图片在下载时被用户中断时触发此事件
                       Onload                                 页面内容完成时触发此事件(页面加载事件)
                       Onresize                                 当浏览器的窗口大小被改变时触发此事件
                       Onumload                               当前页面将被改变时触发此事件
表单相关事件  onblur                                          当前元素失去焦点时触发此事件
                       Onchange                                当前元素失去焦点且无素的内容发生改变时
                       Onfocus                                  当前元素获得焦点时触发此事件
                       Onreset                                   当表单中reset的属性被激活时触发些事件
                       Onsubmit                                一个表单被递交时触发此事件
滚动字幕事件  onbounce                               在marquee内的内容移动到marquee显示范围之外时触发此事件
                       Onfinish                                 当marquee元素完成需要显示的内容后触发
                       Onstart                                          当marquee元素开始显示内容时触发此事件
在PHP中应用js脚本中的事件调用自定义函数是程序开发过程中经常使用的方法。
 
六、调用javascript脚本
1、 在HTML中嵌入JS脚本
JS作为一种脚本语言,可以嵌入到HTML文件中。在HTML中嵌入JS脚本的方法是使用<script></script>.
语法结构:
   <script language="javascript"> </script>
如果在该标记中没有使用language属性,IE和Netscape浏览器将默认使用JS脚本语言。
例:
   <html>
   <head>
           <title>
                  在HTML中嵌入js脚本
              </title>
       </head>
       <body>
           <scriptlanguage="javascript">
                  alert("我很想学习PHP编程,请问如何才能学好这门语言?");
           </script>
       </body>
</html>
在<script></script>之间调用js脚本语言window对象的alert方法,向客户端浏览器弹出一个提示对话框。这里需要注意的是,
jS脚本通常写在<head></head>标记和<body></body>标记之间。写在head标记中间一般是函数和事件处理函数。定在body标记中间的是网页内容或调用函数的程序块。
<html>
   <head>
           <title>
                  在HTML中嵌入js脚本
              </title>
       </head>
       <body>
           <form action=""method="post" name="form1">
                 <input type="submit"name="submit" value="单击这里"onclick="javascript:alert('您单击了这个按钮!')"/>
           </form>
       </body>
</html>
2、应用JS事件调用自定义函数
刚讲过,在这里不在重复。
3、在PHP动态网页中引用JS文件
在网页中,除了在<script></script>标记之间编写JS脚本代码,还可以通过<script>中的src属性指定外部的js文件(即JS文件,以 .js 为扩展名)的路径,从而引用对应的JS文件。
语法:
     <scriptsrc=url language=”javascript”></script>
使用外部JS文件的优点如下:
使用JS文件可以将JS脚本代码从网页中独立出来,便于代码的阅读。
一个外部JS,可以同时被多个页面调用。当共用的JS脚本代码需要修改时,只需要修改一个JS文件中的代码即可,便于代码的维护。
通过<script>标记中的src属性不但可以调用同一个服务器上的JS文件,还可以通过指定路径来调用其他服务器上的JS文件。
例:
<html>
    <head>
       </head>
       <body>
       <script src="script.js"language="javascript"></script>
       </body>
</html>
或:
<html>
    <head>
       <scriptsrc="script.js" language="javascript"></script>
       </head>
       <body>
       </body>
</html>
或:
<html>
    <head>
       </head>
       <script src="script.js"language="javascript"></script>
       <body>
       </body>
</html>
例:
<html>
   <head>
           <title>
                  在HTML中嵌入js脚本
              </title>
              <scriptsrc="js/w3.js" language="javascript"type="text/javascript"></script>
       </head>
       <body>
           <form action=""method="post" name="form1">
                 <input type="submit"name="submit" value="单击这里"onclick="check();" />
              </form>
       </body>
</html>
W3.js文件的代码如下:
function check(){
  alert("您单击了这个按钮!");
}
注意事项:
在JS文件中,只能包含JS脚本代码,不能包含<script>标记和HTML代码。
在引用JS文件的<script></script>标记之间不应存在其他的JS代码,即使存在JS代码,浏览器也会忽略此脚本代码,而只执行JS文件中的JS脚本代码。
例:
<html>
   <head>
        <title>
           在HTML中嵌入js脚本
        </title>
<style></style>
<scriptsrc="js/w3.js" language="javascript"type="text/javascript">
function check(){
alert("dfadfadf");
}
</script>
    </head>
   <body>
  <form action=""method="post" name="form1">
<input type="submit"name="submit" value="单击这里"onclick="check();" />
</form>
   </body>
</html>
W3.js的代码如下:
function check(){
  alert("您单击了这个按钮!");
}
那么最终我们点击后是会弹出“您单击了这个按钮!”这句话。
4、解决浏览器不支持JS的问题
虽然大多数浏览器都支持JS脚本,但仍有少部分浏览器不支持。如果遇到不支持JS脚本的浏览器,网页会达不到预期效果或出现错误。解决这个问题可以使用3个方法:
1、开启IE浏览器对JS的支持
目前有些支持JS的浏览器为了安全问题关闭了对JS的支持。这时,浏览者可以启动对JS脚本的支持来解决这一问题。具体操作步骤如下:
打开一个页面文件-工具-internet选项-安全-自定义级别-java小程序脚本和活动脚本两个选项设置为启用状态。
即可开启IE浏览器支持javascript脚本的功能。
      2、开启IE浏览器对本地JS的支持
IE浏览器将网页分为internet、本地intranet、受信任的站点和受限制的站点4个区域,但不包括本地网页。通常在windows XP操作系统中,
打开IE浏览器中包含JS脚本的网页,会弹出安全提示对话框.
   允许阻止的内容就可以了。
但此选项仅针对当前网页。若要永久地消除IE浏览器的这种安全提示,需要对IE浏览器做如下设置:
    打开一个页面文件-工具-internet选项-高级-允许活动内容在我的计算机上的文件中运行和允许来自CD的活动内容在我的计算机上运行  选中。
此选项仅适用于windowsxp操作系统。
      3、应用注释符号验证浏览器是否支持JS脚本功能
      4、应用<noscript>标记验证浏览器是否支持JS脚本
如果用户不能确定浏览器是否支持JS脚本,可以使用<noscript>标记进行验证。
    如果当前浏览器支持JS脚本,那么该浏览器将会忽略<noscript></noscript>标记之间的任何内容。如果浏览器不支持JS脚本,
那么浏览器将会把<noscript></noscript>标记之间的内容显示出来。通过此标记可以提醒浏览者当前使用的浏览器是否支持JS脚本。
例:
<html>
    <head>
          <script language="javascript">
                alert("呵呵,您的浏览器支持JS脚本程序!");
              </script>
       </head>
       <body>
          <noscript>
                 您的浏览器不支持JS脚本程序!
              </noscript>
       </body>
</html>
执行结果没有显示<noscript></noscript>内的内容,证明浏览器支持JS脚本。
我们将把浏览器进行如下设置:
打开一个页面文件-工具-internet选项-安全-自定义级别-java小程序脚本和活动脚本两个选项设置为禁用状态。
执行结果显示了<noscript></noscript>内的内容,证明浏览器不支持JS脚本。
当解释程序遇到</script>标记时会终止当前脚本。要显示“</script>”本身,请将“<” 改写为 “&lt;”,将“>”改写成“&gt;”即可。
倘若要使用document.write 输出<script></script>
标记时,需要将闭合标记通过反斜杠进行转义即可,如<script><\/script>.
 
七、在PHP调用javascript脚本
1、应用JS脚本验证表单元素是否为空
在程序开发过程中,经常要应用JS脚本来控制表单提交的数据是否为空,或者判断提交的数据是否符合标准等。
例:
<html>
    <head>
         <script language="javascript">
            function check(form1){
             if(form1.txt_user.value==""){
                 alert("用户名不能为空!");     
                             form1.txt_user.focus();
                             return false;
                             }  
                if(form1.txt_pwd.value==""){
                      alert("密码不能为空!");
                             form1.txt_pwd.focus();
                             return false;
                             }     
                }
         </script>
      </head>
       <body>
        <form action=""method="post" name="form1">
                 用户名:<input type="text"name="txt_user" id="txt_user"><br>
            密码:<inputtype="password" name="txt_pwd"id="txt_pwd"><br>
                  <inputtype="submit" value="登录"name="submit">
                              <input type="reset" value="重置"name="reset">
              </form>
       </body>
</html>
或者:
<html>
   <head>
          <scriptlanguage="javascript">
              function check(form1){
               if(form1.txt_user.value==""){
                   alert("用户名不能为空!");     
                              form1.txt_user.focus();
                               return false;
                               }  
                  if(form1.txt_pwd.value==""){
                        alert("密码不能为空!");
                              form1.txt_pwd.focus();
                               return false;
                               }
                   return true;     
                  }
           </script>
        </head>
         <body>
         <form action=""method="post" name="form1">
              用户名:<input type="text"name="txt_user" id="txt_user"><br>
              密码:<inputtype="password" name="txt_pwd"id="txt_pwd"><br>
                    <input type="submit"value="登录" name="submit" />
                   <input type="reset" value="重置"name="reset" />
         </form>
  </body>
</html>
2、应用JS脚本制作二级导航菜单
应用JS脚本不仅可以用来验证表单元素,而且可以制作各式各样的网站导航菜单。
例:
<!DOCTYPEhtml PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>制作二级导航菜单</title>
        <style type="text/css">
            *{border:0px;
                 margin:0px;
                     padding:0px;
               }
               .menu a:link,.menu a:visited{color:#000000;
                       text-decoration:none;
                             display:block;
               }
               .menu a:hover{color:#FFFF00;
                        text-decoration:underline;
               }
             .box{width:761px;
                      height:500px;
                            background-color:#00FF00;
                            margin:0px auto;
                }
             .menu{width:761px;
                       height:40px;
                             background-color:#FF6600;
                      }
                     .menuul{list-style-type:none;
                     }
                     .menu li{float:left;
                              line-height:40px;
                                    width:130px;
                                    margin-left:20px;
                                    margin-right:10px;
                                    text-align:center;
                     }
                     .submenu{width:761px;
                              height:50px;
                                    background-color:#FFCC99;
                     }
        </style>
        <script language="javascript">
            function Lmenu(value){
                switch (value){
                    case "新品":
                       var h1=" <ahref='#' onmouseout='Lout()'>商品展示</a>| <a href='#' onmouseout='Lout()'>销售排行榜</a>| <a href='#' onmouseout='Lout()'>商品查询</a>";
                        submenu.innerHTML=h1;
                        break;           
                    case "购物":
                       submenu.innerHTML="<a href='#' onmouseout='Lout()'>添加商品</a>| <a href='#' onmouseout='Lout()'>移出指定商品</a>|<a href='#' onmouseout='Lout()'>清空购物车</a>| <a href='#' onmouseout='Lout()'>查询购物车</a>| <a href='#' onmouseout='Lout()'>填写订单信息</a>";
                        break;                   
                    case "会员":
                       submenu.innerHTML="<a href='#' onmouseout='Lout()' onmouseout='Lout()'>注册会员</a>| <a href='#' onmouseout='Lout()'>修改会员</a>| <a href='#' onmouseout='Lout()'>账户查询</a>";
                        break;                       
                    }
            }
              function Lout(){
                submenu.innerHTML="";
              }
         </script>
</head>
<body>
<divclass="box">
            <div class="menu">
                <ul>
                       <li><a href="#"onMouseMove="Lmenu('新品')">新品上架</a></li>
                          <li><a href="#"onMouseMove="Lmenu('购物')" >购物车</a></li>
                          <li><a href="#"onMouseMove="Lmenu('会员')">会员中心</a></li>
                          <li><a href="#"onMouseMove="Lmenu('在线帮助')">在线帮助</a></li>
                   </ul>
            </div>
               <div class="submenu" id="submenu"></div>
</div>
</body>
</html>
3、应用JS脚本控制输入字符串的长度
在动态网站的开发过程中,经常需要限制用户输入字符串的长度。这样能够使网站更加规范化。
例:
<!DOCTYPEhtml PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>检测用户名的长度</title>
<scriptlanguage="javascript">
    function checkstr(str,digit){
         var n=0;
         for(i=0;i<str.length;i++){
              var leg=str.charCodeAt(i);     //用于获取字符串的ASCII值
                     if(leg>255){
                        n+=2;
                     }else{
                       n+=1;
                     }
         }
         if(n>digit){
            return true;
         }else{
            return false;
         }
       }
</script>
<scriptlanguage="javascript">
    function check(form1){
         if(form1.txt_user.value==""){
           alert("用户名不能为空!");
               form1.txt_user.focus();
               return false;
               }
         if(checkstr(form1.txt_user.value,6)){
                         alert("用户名长度不能超过6个字节,请重新输入。");
                form1.txt_user.focus();
                            return false;
               }
         if(form1.txt_pwd.value==""){
            alert("密码不能为空!");
               form1.txt_pwd.focus();
               return false;
         }
         alert("恭喜您,数据输入正确!");
       }
</script>
</head>
<body>
<formaction="" method="post" name="form1">
   <div class="title">用户注册</div>
   <div class="content">
       用户名:<inputname="txt_user" type="text" id="txt_user"  />
       用户名不能超过6个字符<br/><br />
          密&nbsp;码:<inputname="txt_pwd" type="password" id="txt_pwd" />
         <br /><br />
       <input type="submit"name="submit" value="注册"onclick="check(form1)" />
         <input type="reset" name="reset" value="重写"/>
   </div>
</form>
</body>
</html>
四、滑动门特效1
<!DOCTYPEhtml PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<metaname="description" content="bbs.aseoe.com,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网"/>
<title>漂亮滑动门效果,zzjs.net收集。</title>
    <style type="text/css">
        body
        {
            font-size:12px;
        }
        .normal
        {
              list-style: none; float: left;
              padding: 5px 2px 2px 2px;
              width: 90px; text-align :center ;
              vertical-align :middle ;
              cursor :pointer ;
              border-bottom :solid 1px #9cd9f5;
              border-right :solid 1px #9cd9f5;
              background-color: #dee7f5;
              border-collapse :separate ;
        }
        .selected
        {
             list-style: none;
             float: left;
             padding: 5px 2px 2px 2px;
             width: 90px;
             text-align :center ;
             vertical-align :middle ;
             cursor :pointer ;
             border-bottom :solid 0px #9cd9f5;
             border-right :solid 1px #9cd9f5;
             background-color:#f8f8f8;
        }
        #divMainTab
        {
             border-left :solid 1px #9cd9f5;
             border-top :solid 1px #9cd9f5;
             float:left;
             margin: 0px; padding: 0px
        }
        .divContent
        {
                width: 474px;
                height: 400px;
                clear: both;
                border-bottom: solid 1px #9cd9f5;
                border-left: solid 1px #9cd9f5;
                border-right: solid 1px #9cd9f5;
        }
        a{
            text-decoration: none;
            color: #00ccff;
        }
        a:hover
        {
            text-decoration: underline;
            color: #cc0000;
        }
    </style>
    <script language="javascript"type="text/javascript">
        function changeTab(index)
        {
            for (var i=1;i<=5;i++)
            {
                document.getElementById("li_"+i).className ="normal";
                document.getElementById("li_"+index).className ="selected";
                document.getElementById("div"+i).style.display ="none";
            }
            document.getElementById("div1").innerText= "bbs.aseoe.com"+index;
            document.getElementById("div"+index).style.display ="block";
       }
    </script>
</head>
<body>
    <form id="form1">
        <div>
            <divid="divMainTab">
                <ul style="list-style:none; margin: 0px; padding: 0px; border-collapse: collapse;">
                    <li id="li_1"class="selected"><ahref="#">站长特效网1</a> </li>
                    <li id="li_2"class="normal"><ahref="#">站长特效网2</a> </li>
                    <li id="li_3"class="normal"><ahref="#">站长特效网3</a> </li>
                    <li id="li_4"class="normal"><ahref="#">站长特效网4</a> </li>
                    <li id="li_5"class="normal"><ahref="#">站长特效网5</a> </li>
                </ul>
            </div>
            <div   id="div1" style ="display:block" class ="divContent">
                1号,bbs.aseoe.com
            </div>
             <div  id="div2" style ="display:none" class ="divContent">
                2号,bbs.aseoe.com
            </div>
             <div  id="div3" style ="display:none" class ="divContent">
                3号,bbs.aseoe.com
            </div>
             <div id="div4" style="display :none" class ="divContent">
                4号,bbs.aseoe.com
            </div>
             <div   id="div5" style ="display:none" class ="divContent">
               5号,bbs.aseoe.com
            </div>
        </div>
    </form>
</body>
</html>
五、滑动门特效2
<html>
<head>
<style type="text/css">
#nav{
width:303px;
height:200px;
border:1px solid #CCCCCC;
}
#column a {
float:left;
width:100px;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
font:bold 14px/30px Arial, Helvetica,sans-serif;
color:#000;
text-decoration:none;
text-align:center;
}
#contant {
width:303px;
height:162px;
overflow:hidden;
}
ul {
margin:0;
padding:0;
list-style-type:none;
padding:4px 0 0 5px;
}
li {
font-size:12px;
overflow:hidden;
padding-left:2px;
line-height:27px;
}
</style>
</head>
<body>
<div id="nav">
<div id="column"> <a href="#localnew">本地新闻</a><a href="#innernew">国内新闻</a><a href="#enterment" >娱乐新闻</a></div>
<div id="contant">
   <ul id="localnew">
     <li><a href="#">我喜欢CSS</a></li>
     <li><a href="#">我喜欢CSS</a></li>
     <li><a href="#">我喜欢CSS</a></li>
     <li><a href="#">我喜欢CSS</a></li>
     <li><a href="#">我喜欢CSS</a></li>
     <li><a href="#">我喜欢CSS</a></li>
   </ul>
   <ul id="innernew">
     <li><a href="#">我喜欢编程</a></li>
     <li><a href="#">我喜欢编程</a></li>
     <li><a href="#">我喜欢编程</a></li>
     <li><a href="#">我喜欢编程</a></li>
     <li><a href="#">我喜欢编程</a></li>
     <li><a href="#">我喜欢编程</a></li>
   </ul>
   <ul id="enterment">
     <li><a href="#">我喜欢美工</a></li>
     <li><a href="#">我喜欢美工</a></li>
     <li><a href="#">我喜欢美工</a></li>
     <li><a href="#">我喜欢美工</a></li>
     <li><a href="#">我喜欢美工</a></li>
     <li><a href="#">我喜欢美工</a></li>
     <li><a href="#">我喜欢美工</a></li>
   </ul>
</div>
</div>
</body>
</html>
六、滑动门JS特效-鼠标单击
<HTML>
<HEAD>
   <style type="text/css">
   .style01{ font-size:16px; }
   .style02{ font-size:16px; color:#FF0000; }
   .style03{ font-size:16px; color:#009999; }
   .style04{ font-size:16px; color:#CC6666; }
   </style>
  
   <script language="JavaScript"type="text/javascript">
   function changeBack(){
       document.getElementById("show").className="style01";
    }
   function qiecs1() {
       document.getElementById("show").className="style02";
    }
   function qiecs2() {
        document.getElementById("show").className="style03";
    }
   function qiecs3() {
       document.getElementById("show").className="style04";
    }
  
   function startup(){
     set_event();
    }
   window.onload = startup;
  
   function set_event(){
     document.getElementById("s1").onmouseover = qiecs1;
     document.getElementById("s2").onmouseover = qiecs2;
     document.getElementById("s3").onmouseover = qiecs3;
  
     document.getElementById("s1").onmouseout = changeBack;
      document.getElementById("s2").onmouseout= changeBack;
     document.getElementById("s3").onmouseout = changeBack;
    }
   </script>
<HEAD>
  
<Body>
   <div>
     <span id="s1">切様式1</span>
     <span id="s2">切様式2</span>
     <span id="s3">切様式3</span>
   </div>
   <span id="show" class="style01">点上面的“切様式”可以改変span的様式。</span>
<Body>
<HTML>
修改后的
<HTML>
<HEAD>
<style>
*{padding:0px;
margin:0px;
border:0px;
}
.menu{width:700px;background-color:#FFCCFF;}
#s1,#s2,#s3{margin-left:50px; margin-right:50px;}
#show li{list-style-type:none;border-bottom:1px dashed #999999; width:300px;}
</style>
   <script language="JavaScript"type="text/javascript">
   function qiecs1() {
       document.getElementById("show").innerHTML="<ul><li>ddddd</li><li>ddddd</li><li>ddddd</li></ul>";
    }
   function qiecs2() {
       document.getElementById("show").innerHTML="bbbb";
    }
   function qiecs3() {
       document.getElementById("show").innerHTML="cccc";
    }
  
   function startup(){
     set_event();
    }
   window.onload = startup;
  
   function set_event(){
     document.getElementById("s1").onmouseover = qiecs1;
     document.getElementById("s2").onmouseover = qiecs2;
     document.getElementById("s3").onmouseover = qiecs3;
    }
   </script>
<HEAD>
  
<Body>
<div class="box">
   <div class="menu">
     <span id="s1">切様式1</span>
     <span id="s2">切様式2</span>
     <span id="s3">切様式3</span>
   </div>
   <div id="show">
            <ul>
                   <li>ddddd</li>
                      <li>ddddd</li>
                      <li>ddddd</li>
               </ul>
  </div>
</div>
<Body>
<HTML>
整理下今天工作中用到的js!
1、document.all.myCheckBox和 document.all.item通过控件的名字定位控件,item()中是控件的名字
例如:
<input type="checkbox" name="myCheckBox">
可以用
document.all.myCheckBox得到这个控件,也可以写成document.all.item("myCheckBox")
用item的好处是,
1.如果你的控件的name是数字,比如<br>
<input type="checkbox" name="123456789">
,使用document.all.123456789会报错,用document.all.item("123456789")可以正确得到。
2.如果你的控件名字存在一个变量中,你必须这样写
var name = "myCheckBox";
eval("document.all."+name);
同样也可以写成document.all.item(name)
<form name="form1">
<input id="a" name="a" type="text"value="123123213">
</form>
<script language="javascript">
document.write(document.form1.a.value);
document.write("<br>");
document.write(document.all.item("a").value);
</script>
2、一个form同时提交到两个页面的效果,工作的需要,随手记了下来!
<script language="javascript">
function F_submit(){
document.form1.target="_blank";
document.form1.action="1.asp";
document.form1.submit();
document.form1.target="_blank";
document.form1.action="2.asp";
document.form1.submit();
}
</script>
<form name="form1" method="post"action="">
<input type="text" name="textfield">
<input type="button" name="Submit" value="提交">
</form>

相关热词搜索:php与javascript交互

上一篇:第一页
下一篇:PHP编程效率的20个要点

分享到: 收藏