您的位置：首页 > Web前端 > JavaScript

黑马程序员__javascript重点实用实例!

2013-04-24 22:03 211 查看

跟大家推荐我自学期间收集的各种绝好视频：

风靡腾讯网络的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("divid");

              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/>//双引号中间一定得用单引号

       <div id="divid" class="normal">

              恶化服务费和违法后位富翁复合物i恶风<br/>

              恶化服务费和违法后位富翁复合物i恶风<br/>

              恶化服务费和违法后位富翁复合物i恶风<br/>

              恶化服务费和违法后位富翁复合物i恶风<br/>

              恶化服务费和违法后位富翁复合物i恶风<br/>

              恶化服务费和违法后位富翁复合物i恶风<br/>

              恶化服务费和违法后位富翁复合物i恶风<br/>

              恶化服务费和违法后位富翁复合物i恶风<br/>

       </div>

</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 divNode=tdNode.getElementsByTagName("div")[0];

       if(divNode.className=="open")

              divNode.className="close";

       else

              divNode.className="open";



}

function listOnlyOne(aNode)

{

       var tdNode=aNode.parentNode;

       var divNode=tdNode.getElementsByTagName("div")[0];

       var divNodes=document.getElementsByTagName("div");

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

              if(divNodes[x]==divNode){

                     if(divNode.className=="open")

                            divNode.className="close";

                     else

                            divNode.className="open";

                            }

                     else

                            divNodes[x].className="close";

       }

}

</script>

</head>

<body>

       <table>

              <tr>

                     <td>

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

                            <div class="close">

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            </div>

                     </td>

              </tr>

              <tr>

                     <td>

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

                            <div class="close">

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            </div>

                     </td>

              </tr>

              <tr>

                     <td>

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

                            <div class="close">

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            </div>

                     </td>

              </tr>

              <tr>

                     <td>

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

                            <div class="close">

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            水电费过水电费</br>

                            </div>

                     </td>

              </tr>

       </table>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： java学习

相关文章推荐

新的分享

章节导航