需求一个js ,原有5个隐藏的div,一个按钮,点击一次按钮显示一个div,再点一次就再显示一个
需求一个js,原有5个隐藏的div,一个按钮,点击一次按钮显示一个div,再点一次就再显示一个,再点一次就再显示一个,到最后一个div显示以后按钮消失...
需求一个js ,原有5个隐藏的div,一个按钮,点击一次按钮显示一个div,再点一次就再显示一个,再点一次就再显示一个,到最后一个div 显示以后 按钮消失
展开
展开全部
<body>
<input type="button" id="btn" value="click" />
<div id="div1" style="width:50px; height:50px; background:red; display:none"></div>
<div id="div2" style="width:50px; height:50px; background:yellow; display:none"></div>
<div id="div3" style="width:50px; height:50px; background:#000; display:none"></div>
<div id="div4" style="width:50px; height:50px; background:#0F6; display:none"></div>
<div id="div5" style="width:50px; height:50px; background:#CF6; display:none"></div>
</body>
<script>
var oBtn = document.getElementById('btn');
var aDiv = document.getElementsByTagName('div');
var index = 0;
oBtn.onclick = function(ev){
if(aDiv[index%5].style.display == 'block'){
aDiv[index%5].style.display = 'none';
} else {
aDiv[index%5].style.display = 'block';
}
index++;
};
</script>
追问
不是我要的是 当点击第5次,也就是最后一次的时候 最后一个div显示 同时那个按钮消失
追答
<body>
<input type="button" id="btn" value="click" />
<div id="div1" style="width:50px; height:50px; background:red; display:none"></div>
<div id="div2" style="width:50px; height:50px; background:yellow; display:none"></div>
<div id="div3" style="width:50px; height:50px; background:#000; display:none"></div>
<div id="div4" style="width:50px; height:50px; background:#0F6; display:none"></div>
<div id="div5" style="width:50px; height:50px; background:#CF6; display:none"></div>
</body>
<script>
var oBtn = document.getElementById('btn');
var aDiv = document.getElementsByTagName('div');
var index = 0;
oBtn.onclick = function(ev){
if(aDiv[index%5].style.display == 'none'){
aDiv[index%5].style.display = 'block';
}
if(index%5==0){
oBtn.style.display = 'none';
}
index++;
};
</script>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询