生日礼物网页Javascript版本与锚点版本

<style>
#dv1{
width:60px;
height:36px;
margin:0 auto;
background-color:orange;
display:none;
}
#dv2{
width:120px;
height:62px;
margin:0 auto;
background-color:orange;
display:none;
}
</style>
<body>
<input type="button" value="隐藏" id="btn" />
<input type="button" value="显示" id="btn1" />
<div id="dv1"></div>
<div id="dv2">生日快乐</div>
<script> 
        function my(id){
            return document.getElementById(id);
        }
        my("btn").onclick=function(){
            my("dv1").style.display="none";
            my("dv2").style.display="none";
        }
        my("btn1").onclick=function(){
            my("dv1").style.display="block";
            my("dv2").style.display="block";
        }
</script>
</body>

  以上是生日礼物网页Javascript版。

<style>
#dv1{
width:60px;
height:36px;
margin:0 auto;
background-color:orange;
}
#dv2{
width:120px;
height:62px;
margin:0 auto;
background-color:orange;
}
#main {
width:120px;
height:98px;
margin:0 auto;
overflow:hidden;
}
#box {
width:120px;
height:98px;
margin:0 auto;
}
</style>

<body>
<div id="main">
<div id="box"></div>
<div id="dv1"></div>
<div id="dv2">生日快乐</div>
</div>
<p>
<a href="#box">隐藏</a>
<a href="#dv1">显示</a>
</p>
</body>

  以上是生日礼物网页锚点版。

       效果都是暗隐藏隐藏生日蛋糕,按显示显示生日蛋糕。

生日礼物网页Javascript版本与锚点版本

上一篇:数组filter,find,map,some,every,reduce的用法简单梳理


下一篇:Java使用Socket进行UDP通信时中文乱码问题