JS之setTimeOut与clearTimeOut
程序员文章站
2022-10-04 18:20:00
小练习1：针对HTML，分别使用 setTimeout 和 setInterval 实现以下功能： 点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0 在动画过程中，按钮的状态变为不可点击 在动画结束后，按钮状态恢复，且文字变成“淡入” 在 按钮显示 淡入 ......
小练习1：针对html，分别使用 settimeout 和 setinterval 实现以下功能：
- 点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0
- 在动画过程中，按钮的状态变为不可点击
- 在动画结束后，按钮状态恢复，且文字变成“淡入”
- 在 按钮显示 淡入 的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明
- 淡入动画结束后，按钮文字变为“淡出”
- 暂时不要使用 css animation （以后我们再学习）
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>与页面对话4</title>
</head>
<body>
<div id="fade-obj" style="width:300px;height:300px;background:#000;opacity: 1;"></div>
<button id="fade-btn" onclick="belowopa()">淡出</button>
<script>
var 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>
上一篇： 基础知识--封装、继承、多态、抽象
下一篇： 笔记，js对象浅析