编码
<div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
<button id="fade-btn">淡出</button>
针对以上 HTML,分别使用 setTimeout 和 setInterval 实现以下功能:
- 点击按钮时,开始改变 fade-obj 的透明度,开始一个淡出(逐渐消失)动画,直到透明度为0
- 在动画过程中,按钮的状态变为不可点击
- 在动画结束后,按钮状态恢复,且文字变成“淡入”
- 在 按钮显示 淡入 的状态时,点击按钮,开始一个“淡入”(逐渐出现)的动画,和上面类似按钮不可点,直到透明度完全不透明
- 淡入动画结束后,按钮文字变为“淡出”
- 暂时不要使用 CSS animation (以后我们再学习)
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>渐入渐出</title> </head> <body> <div id="fade-obj" style="width:300px;height:300px;background:blue"></div> <button id="fade-btn">淡出</button> </body> <script> var x=document.getElementById('fade-obj'); var y=document.getElementById('fade-btn'); var i=1; function fadeout(){ x.style.opacity=i; i-=0.1; y.disable=true; if(i>0){ setInterval(fadeout,1000); console.log(i); } else if(i<=0){ y.disable=false; y.innerHTML='淡入'; y.addEventListener('click',fadein); } } function fadein(){ x.style.opacity=0; i+=0.1; y.disable=ture; if(i>=1){ y.addEventListener('click',fadeout); y.innerHTML="淡出"; } } y.addEventListener('click',fadeout); </script> </html>
写的时候不会写,不懂得opacity属性和disable属性,百度了一下,觉得自己的命名一直不规范,以后尝试着科学命名,考察了if else的逻辑以及事件绑定方式