setTimeout 和setInterval的用法笔记

编码

<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的逻辑以及事件绑定方式

     

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值