黑馬程序員__javascript重點實用實例!

———————- android培訓、java培訓、期待與您交流! ———————-

 

跟大傢推薦我自學期間收集的各種絕好視頻:

風靡騰訊網絡的Java+3G開發全套視頻教程
屌絲們,最愛的.NET全套視頻項目教程
史上一直被模仿10多年的PHP元老全套視頻教程

 

javascript中動態改變頁面字體大小:

<title>動態改變字體大小</title>

<style type="text/css">

.max{

       width:500px;

       background-color:#00FF66;

       font-size:36px;

       color:#330099;

}

.normal{

       width:500px;

       background-color:#FF9933;

       color:#FF0000;

       font-size:24px;

}

.min{

       width:500px;

       color:#FFFF00;

       background-color:#FF00CC;

       font-size:16px;

}

</style>

<script type="text/javascript">

       function changeSize(className){

              var node=document.getElementById("pid");

              node.className=className;

       }

</script>

</head>

       <body>

              <h2>新聞標題</h2><br/>

              <a href="javascript:void(0)" onClick="changeSize('max')">大</a>

              <a href="javascript:void(0)" onClick="changeSize('normal')">中</a>

              <a href="javascript:void(0)" onClick="changeSize('min')">小</a><br/>//雙引號中間一定得用單引號

       <p id="pid" class="normal">       

              惡化服務費和違法後位富翁復合物i惡風<br/>

              惡化服務費和違法後位富翁復合物i惡風<br/>

              惡化服務費和違法後位富翁復合物i惡風<br/>

              惡化服務費和違法後位富翁復合物i惡風<br/>

              惡化服務費和違法後位富翁復合物i惡風<br/>

              惡化服務費和違法後位富翁復合物i惡風<br/>

              惡化服務費和違法後位富翁復合物i惡風<br/>

              惡化服務費和違法後位富翁復合物i惡風<br/>

       </p>

</body>

</html>

javascript模仿QQ聯系人列表效果:

註:實現可多級展開效果:strecthClose( );實現隻能打開一個列表的效果:listOnlyOne( )

<title>js模仿QQ列表效果</title>

<style type="text/css">

table{

       border:1px #00FF66 solid;

}

table td{

       border:1px solid #FF9933;    

}

a:link,a:visited{

       text-decoration:none;

       color:#CC33CC;

}

.open{

       display:block;

}

.close{

       display:none;

}

</style>

<script type="text/javascript">

function strecthClose(aNode){

       var tdNode=aNode.parentNode;

       var pNode=tdNode.getElementsByTagName("p")[0];

       if(pNode.className=="open")

              pNode.className="close";

       else

              pNode.className="open";

     

}

function listOnlyOne(aNode)

{

       var tdNode=aNode.parentNode;

       var pNode=tdNode.getElementsByTagName("p")[0];

       var pNodes=document.getElementsByTagName("p");

       for(var x=0;x<pNodes.length;x++){

              if(pNodes[x]==pNode){

                     if(pNode.className=="open")

                            pNode.className="close";

                     else

                            pNode.className="open";              

                            }

                     else

                            pNodes[x].className="close"; 

       }

}

</script>

</head>

<body>

       <table>

              <tr>

                     <td>

                            <a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>

                            <p class="close">

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            </p>

                     </td>

              </tr>

              <tr>

                     <td>

                            <a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>

                            <p class="close">

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            </p>

                     </td>

              </tr>

              <tr>

                     <td>

                            <a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>

                            <p class="close">

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            </p>

                     </td>

              </tr>

              <tr>

                     <td>

                            <a href="javascript:void(0)" onclick="listOnlyOne(this)">好友列表</a>

                            <p class="close">

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            水電費過水電費</br>

                            </p>

                     </td>

              </tr>            

       </table>

</body>

</html>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *