当前位置:编程学习 > JAVA >>

黑马程序员__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("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>

                        

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,