网站的版式设计有哪些,企业网站优化策略,哈尔滨市工程建设招投标网,a 朝扬网络网站建设小练习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
