南宁网站忧化,汽车制造行业网站模板,网站建设选择什么模式,绵阳建网站哪家好小练习1#xff1a;针对HTML#xff0c;分别使用 setTimeout 和 setInterval 实现以下功能#xff1a;
点击按钮时#xff0c;开始改变 fade-obj 的透明度#xff0c;开始一个淡出#xff08;逐渐消失#xff09;动画#xff0c;直到透明度为0在动画过程中#xff0c…小练习1针对HTML分别使用 setTimeout 和 setInterval 实现以下功能
点击按钮时开始改变 fade-obj 的透明度开始一个淡出逐渐消失动画直到透明度为0在动画过程中按钮的状态变为不可点击在动画结束后按钮状态恢复且文字变成“淡入”在 按钮显示 淡入 的状态时点击按钮开始一个“淡入”逐渐出现的动画和上面类似按钮不可点直到透明度完全不透明淡入动画结束后按钮文字变为“淡出”暂时不要使用 CSS animation 以后我们再学习 !DOCTYPE html
html
headmeta charsetutf-8 /title与页面对话4/title
/head
bodydiv idfade-obj stylewidth:300px;height:300px;background:#000;opacity: 1;/divbutton idfade-btn onclickbeLowOpa()淡出/buttonscriptvar opaCount 1;var btn document.getElementById(fade-btn);function beLowOpa() {btn.disabled true;opaCount - 0.05;document.getElementById(fade-obj).style.opacity opaCount;var t setTimeout(beLowOpa(), 100);if (opaCount 0) {clearTimeout(t);btn.disabled false;btn.innerHTML 淡入;btn.addEventListener(click, beHighOpa);}}function beHighOpa() {btn.disabled true;opaCount 0.05;document.getElementById(fade-obj).style.opacity opaCount;var t setTimeout(beHighOpa(), 100);if (opaCount 1) {clearTimeout(t);btn.disabled false;btn.innerHTML 淡出;btn.addEventListener(click, beLowOpa);}}/script
/body/html 更多专业前端知识请上
【猿2048】www.mk2048.com
