<script>
function showBtn(argument) {
// body...
document.getElementById('hidden').style.display="block";
document.getElementById('hiddenBtn').innerText = "收起按钮";/修改超链接的文字/
document.getElementById('hiddenBtn').href = "javascript:hideBtn()";/修改点击链接代码/
}
function hideBtn(argument) {
// body...
document.getElementById('hidden').style.display="none";
document.getElementById('hiddenBtn').innerText = "隐藏按钮";
document.getElementById('hiddenBtn').href = "javascript:showBtn()";
}
</script>

点击按钮显示或隐藏.png

    body{
        margin: 0 auto;
        padding: 0;
    }
    #show{
        background-color: #e8e8e8;
        width: 700px;
        display: block;
        margin: 0 auto;
        /*网页中内容居中显示*/
        padding: 5px;
        font-size: 9pt;
        /* 9pt的字体是没有锯齿的  */
        height: auto;
        /*因整个div部分，会有一部分动态显示或者隐藏，所以将高度设为auto*/
    }
    #hidden{
        display: none;
    }
    .slide{
        margin: 0 auto;
        padding: 0px;
        width: 700px;
        border-top: solid 4px gray;
    }
    .hiddenBtn{
        background-color: grey;
        width: 120px;
        height: 30px;
        text-align: center;
        margin: 0 auto;
        display: block;
        color: #fff;
        text-decoration: none;
        padding-top: 10px;
    }

<script type="text/javascript">
var height = 0;//height是全局变量，在函数调用的时候，值会改变，也会影响后面的计算。
function addH() {
if(height<300){
height+=5;
document.getElementById('pn').style.height=height+'px';//在外部var ad = document.getElementById("pn"); 用到函数中不好使，只有在函数中定义才可以。
}else {return;}
setTimeout("addH()",30);
}
function subH(){
if (height>0) {
height-=5;
document.getElementById('pn').style.height = height+"px";
}else{
document.getElementById('pn').style.display = 'none';
return;}
setTimeout("subH()",30);
}
//网页加载完毕时，调用增加高度函数addH()，等待5秒钟后调用减少高度函数subh()。
window.onload = function showAds(){
addH();
setTimeout("subH()",5000);
}
</script>

广告的显示与隐藏-结构.png

增加函数addH和减少subH，判断高度再增加或减少高度，并使用setTimeout对时间进行约束，定义窗口显示或隐藏。

setTimeout(code,millisec)方法用于在指定的毫秒数后调用函数或计算表达式。code 要用括号括起呢。而是里面是函数调用。
onload（）事件，在window.onload是页面加载完成后立即发送；图像加载完成后立即发生是 图片的 onload 事件。
return是退出函数。

    #pn{
        display: block;
        height: auto;//pn为广告的容器，因高度在变化，一定为auto。
        background-color: #e8e8e8;
        width: 700px;
        margin: 0 auto;
        padding: 5px;
        text-align: center;
    }
    .content{
        margin: 0 auto;
        padding: 10px;
        background-color: gray;
        width: 700px;
        text-align: center;
    }
     body{
        margin: 0 auto;
        padding: 0;
    }