编码
<div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
<button id="fade-btn">淡出</button>
针对以上 HTML，分别使用 setTimeout 和 setInterval 实现以下功能：
- 点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0
- 在动画过程中，按钮的状态变为不可点击
- 在动画结束后，按钮状态恢复，且文字变成“淡入”
- 在 按钮显示 淡入 的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明
- 淡入动画结束后，按钮文字变为“淡出”
在做到这一练习题时遇到了一些问题，怕以后忘了先写下来，以下是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="fade-obj" style="width:300px;height:300px;background:#000;"></div>
<button id="fade-btn">淡出</button>
<script>
var oDiv = document.getElementById("fade-obj");
var fadeBtn = document.getElementById("fade-btn");
var opacity = 1;
fadeBtn.onclick = change120;
function change120() {
if(opacity)
{
setTimeout(change120,100);
opacity = Math.floor((opacity - 0.02)*100)/100;
oDiv.style.opacity = opacity.toString();
console.log(opacity);
fadeBtn.disabled = true;
}
else{
fadeBtn.disabled = false;
fadeBtn.innerText = "淡入";
fadeBtn.addEventListener("click",change021);
}
}
function change021() {
if(opacity!==1)
{
setTimeout(change021,100);
opacity = Math.floor((opacity + 0.02)*100)/100;
if(1-opacity<=0.01)
opacity = Math.floor(opacity + 0.02);
oDiv.style.opacity = opacity.toString();
console.log(opacity);
fadeBtn.disabled = true;
}
else{
fadeBtn.disabled = false;
fadeBtn.innerText = "淡出";
fadeBtn.addEventListener("click",change120);
}
}
</script>
</body>
</html>因为文档的不透明度设置是opacity，其值范围为0-1，为0时完全透明，为1时完全不透明，因此设定opacity不等于0为条件，通过“opacity=opacity - 0.02”改变其大小，opacity的变化如下：
通过截图可知，opacity0.92不是0.92，而是0.91999...，结果显然不是想要的，那么原因是甚麽呢，原来所有的JavaScript数字都是64位（8bit），在精度上，整数（不使用小数点或指数计数法）最多为 15 位。小数的最大位数是 17，但是浮点运算并不总是 100% 准确，
所以使用如下方法
opacity = Math.floor((opacity - 0.02)*100)/100;这样就可以保留两位小数，并且得到了0.92！！
扫一扫
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
