JS关于setInterval给opacity值，代码出了点问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.bgcolor{background: #ccc;}
.bgcolor1{background: red;}
div1 #text .text1{width: 730px;height: 80px;fiter:alpha(opacity=100);opacity: 1;display: block;}
div1 #text .text2{width: 730px;height: 80px;fiter:alpha(opacity=100);opacity: 0;display: none;}
div1 #text .text3{width: 730px;height: 80px;fiter:alpha(opacity=100);opacity: 0;display: none;}
div1 #btn a{width: 16px;height: 16px;border-radius: 50px;display:inline-block;margin-left: 10px;}
div1 #btn li{list-style: none;float: left;}
</style>
</head>
<body>
<div id="div1">
<div id="text" class="">
<p class="text1">111111111<br/>1111111111111111111111111111<br/>
1111111111111111111111111111111</p>
<p class="text2">222222222222222222222<br/>2222222222222222222222222<br/>222222222222</p>
<p class="text3">3333333333<br/>333333333333333333333333333</p>
</div>
<div id="btn" class="">
<ul>
<li><a href="javascript:;" class="bgcolor1"></a></li>
<li><a href="javascript:;" class="bgcolor"></a></li>
<li><a href="javascript:;" class="bgcolor"></a></li>
</ul>
</div>
</div>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oTxt=oDiv.getElementsByTagName('p');
var oBtn=document.getElementsByTagName('a');
var alpha=0;
var timer=null;
for(var i=0;i<oBtn.length;i++){
oBtn[i].index=i;
oBtn[i].onclick=function(){
for(var i=0;i<oBtn.length;i++){
oBtn[i].className='bgcolor';
oTxt[i].style.display='none';
}
this.className='bgcolor1';
//otxt[this.index].style.display='block';
oTxt[this.index].style.display='block';
startMove()
}
}
function startMove(){
var oDiv=document.getElementById('div1');
var oTxt=oDiv.getElementsByTagName('p');
clearInterval(timer);
timer=setInterval(function(){
if(alpha==100){
clearInterval(timer);
}
else{
alpha=alpha+10;
oTxt[this.index].style.opacity=alpha/10;
}
},30);
}
}
</script>
</body>
</html>
展开
收起
1
条回答
写回答
写回答
-
IT从业原因就是this的指向问题，但是我这么更改后你就不会报错了，this的指向的具体情况，百度一下会有很多答案(只有4种情况)，你的这个原因就是this指向了全局对象window，而不是你所点击的那个按钮。另外如果你是想要淡入淡出效果的话，你的startMove代码还是有一些问题的。对你代码做了以下的更改，但是更改后代码不兼容低版本ie的兼容。
// 切换按钮处更改 oBtn[i].onclick=function(){ for(var i=0;i<oBtn.length;i++){ oBtn[i].className='bgcolor'; oTxt[i].style.display='none'; oTxt[i].style.opacity = 0; } this.className='bgcolor1'; oTxt[this.index].style.display='block'; startMove(this); } // startMove函数更改 function startMove(_this){ var oDiv=document.getElementById('div1'); var oTxt=oDiv.getElementsByTagName('p'); clearInterval(timer); timer = setInterval(function(){ var alpha = +oTxt[_this.index].style.opacity; if (alpha === 1) { clearInterval(timer); } else{ alpha += 0.1; oTxt[_this.index].style.opacity = alpha; } },30); }2019-07-17 19:30:56赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
