决战JS

      经过这几日的学习，测试和摸索，算是了解了一些关于javascript 的相关知识吧。学习过程中做出了一些小DEMO，现总结一下实现这些DEMO的基本思路，如有不妥或更为简便的方法，还希望大神拍砖，共同进步。代码可直接复制引用。

demo1.选项卡：

     在网站中应用选项卡是很多网站必不可少的效果，因为方便，简单，使用。可分块展示不同的内容链接，当鼠标点击不同按钮时，下面的DIV根据不同的点击显示不同的内容。要实现这样的一个选项卡，首先在body--->div中建立几个button按钮，并在下面建立相同个数的div，初始化第一个div（即：使它的display为block）;style初始化div和相应的button;然后写js脚本，根据一般步骤：取元素--->写事件---->测试。在这个案例中，首先得为每个按钮建立索引；将所有的button和div中的样式去除，再用this这个关键字，实现新的样式更换。

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
  <head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
  <title>choice card</title>
  <style>
   #div1 .active {background:yellow;}
   #div1 div {width:200px;height:200px;background:#CCC;border:1px solid #999;display:none;}  
  </style>

  <script language="javascript">
    window.onload=function()
    {
     var oDiv=document.getElementById('div1');
     var aBtn=oDiv.getElementsByTagName('input');
     var aDiv=oDiv.getElementsByTagName('div');
       
     for(var i=0;i<aBtn.length;i++){
        aBtn[i].index=i;
        aBtn[i].onclick=function()
        {
        for(var i=0;i<aBtn.length;i++){
          aBtn[i].className='';
          aDiv[i].style.display='none';
         }
        this.className='active';
        aDiv[this.index].style.display='block';
         };
     }
     };
  </script>
 </head>

 <body>
   <div id="div1">
    <input class="active" type="button" value="aaaa">
    <input type="button" value="bbbb">
    <input type="button" value="cccc">
    <input type="button" value="dddd">
    <div style="display:block;">1111</div>
    <div>2222</div>
    <div>3333</div>
    <div>4444</div>  
</div> 
 </body>
</html>
View Code

 

demo2.隔行变色：

        通过基本的js中模运算，即：i%2==0来实现偶数行变色。本DEMO实现起来比较容易，首先在body中输入一些<ul><li></li><li></li><li></li><li></li></ul>，<li>越多越能看到明显的效果。接着，应用document.getElementsByTagName('li')，来获取标签li元素，判断之后，设置背景颜色，直接通过js实现不同的效果。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3  <head>
 4   <title> New Document </title>
 5   <meta name="Generator" content="EditPlus">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9  
10  <script>
11   window.onload=function(){
12     var aLi=document.getElementsByTagName('li');
13     for(var i=0;i<aLi.length;i++)
14       {
15         if(i%2==0)
16           {
17             aLi[i].style.background='#CCC';
18           }
19           else
20           {
21             aLi[i].style.background='';
22           }
23       }
24   };
25  </script>
26  </head>
27 
28  <body>
29   <ul>
30     <li></li>
31     <li></li>
32     <li></li>
33     <li></li>
34     <li></li>
35     <li></li>
36     <li></li>
37     <li></li>
38     <li></li>
39     <li></li>
40     <li></li>
41   </ul>
42  </body>
43 </html>
View Code

 

demo3.InnerHTML的使用：

        通过点击button将文本框中的内容直接显示到DIV中。首先获取页面中的元素，然后直接用onclick事件（oDiv.innerHTML=oTxt.value;）将文本框中的文字或者HTML标签显示到div中。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3  <head>
 4   <title> setFont </title>
 5   <meta name="Generator" content="EditPlus">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <style>
10   #div1 {width:200px;height:150px;border:1px solid black;}
11   </style>
12   <script>
13    window.onload=function(){
14      var oTxt=document.getElementById('txt1');
15      var oBtn=document.getElementById('btn1');
16      var oDiv=document.getElementById('div1');
17 
18      oBtn.onclick=function(){
19         oDiv.innerHTML=oTxt.value;
20      };
21    }
22   </script>
23  </head>
24 
25  <body>
26 <input type="text" id="txt1"/>
27 <input id="btn1" type="button" value="SetFont">
28 <div id="div1">
29 </div>
30  </body>
31 </html>
View Code

 

demo4.延时提示框：

       对于延时提示框的实现，需要知道计时器的作用和用法。本例实现的是利用当鼠标在某个div上时，另外的一个div显示，当鼠标移开的时候，div过一会儿才消失。代码实现过程，首先需要两个div，设置初始化的样式，选择将其中一个div的display设置为none。再用js实现鼠标的移入移除时，计时器控制div的变化。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
  #div {float:left; margin:10px;}
  #div1 {width:50px;height:50px;background:red;}
  #div2 {width:250px;height:180px;background:#CCC;display:none;}
  </style>

  <script>
    window.onload=function(){
      var oDiv1=document.getElementById('div1');
      var oDiv2=document.getElementById('div2');
      var timer=null;

       oDiv2.onmouseover=oDiv1.onmouseover=function(){
       clearTimeout(timer);
       oDiv2.style.display='block';
             };

      oDiv2.onmouseout=oDiv2.onmouseout=function()    {
          timer=setTimeout(function(){
           oDiv2.style.display='none';
          },200);
        };
    };
  </script>
 </head>

 <body>
  <div id="div1"></div>
  <div id="div2"></div>
 </body>
</html>
View Code

 

还有部分DEMO的分析和总结在《决战JS（二）》。

 

 

posted on 2014-04-12 16:54  itRed  阅读(1377)  评论(6)  编辑  收藏  举报

导航