使用javascript计时器更改潜水的不透明度
Changing Opacity of Div With javascript timer
嘿，伙计们，这个问题的解决方案应该很简单，但我很难弄清楚发生了什么。我有一个timerScript.js文件，看起来像这个
//global variables
var timerInterval = null; // the timer that changes opacity every 0.1 seconds.
function StartTimer()
{
//disable the button
document.getElementById('startOpacityTimerButton').disabled=true;
timerInterval = window.setInterval(ChangeOpacity(), 100);
}
function StopTimer()
{
window.clearInterval(timerInterval);
timerInterval = 0;
}
function ChangeOpacity()
{
var object = document.getElementById('opacityZone');
var currentOpacity = (+object.style.opacity);
var newOpacity = currentOpacity + 0.1;
object.style.opacity = newOpacity;
if(newOpacity == 1.0)
{StopTimer();}
}
这就是我的代码应该做的
- 单击按钮->调用StartTimer
- StartTimer->禁用按钮，每100毫秒调用一次ChangeOpacity
- ChangeOpacity->获取div元素（opacityZone），获取其当前的不透明度，递增0.1，并检查它是否处于最大不透明度，在这种情况下，它调用StopTimer
- StopTimer->清除计时器
它的作用如下：计时器启动，将不透明度更改为0.1，然后似乎停止了！？！
我试着用safari Web Inspector进行调试，但我不太确定发生了什么，也许你们中的一位JavaScript专家可以帮我（我是js的一个noob）。谢谢
您的问题在这里：
window.setInterval(ChangeOpacity(), 100);
现在，您不再传递对函数的引用，而是内联执行它并调度它的返回值。更改为：
window.setInterval(ChangeOpacity, 100);
除此之外，像这样的东西你应该真正使用CSS转换。
谢谢大家，我来看看建议。我只是为了学习语言而尝试使用JavaScript，下面是我为解决这个问题而想出的JavaScript函数。
//global variables
var opacityIncreasing; //boolean to know if opacity is increasing or decreasing.
var animationInterval;//time in millseconds to do animation.
var timerInterval;//the timer that changes opacity depending on interval.
var object;//object we are doing the animation on.
var currentOpacity;//currentOpacity of object.
//var buttonMessage;//message to make object appear or dissapear depending on animation.
function init(elementName,rateOfAnimation)
{
var object = document.getElementById(elementName);
animationInterval = rateOfAnimation;
currentOpacity = Truncate((+object.style.opacity),1);
document.getElementById('messageContainer').innerHTML=currentOpacity;
if (currentOpacity==0)
{
opacityIncreasing = true;
}
else
{
opacityIncreasing = false;
}
StartTimer();
}
function StartTimer()
{
//disable the button
document.getElementById('startOpacityTimerButton').disabled=true;
timerInterval = window.setInterval(ChangeOpacity, animationInterval);
}
function StopTimer()
{
window.clearInterval(timerInterval);
timerInterval = 0;
//enable Button
document.getElementById('startOpacityTimerButton').disabled=false;
}
function Truncate (number, digits)
{
var multiplier = Math.pow(10, digits),
adjustedNum = number * multiplier,
truncatedNum = Math[adjustedNum < 0 ? 'ceil' : 'floor'](adjustedNum);
return truncatedNum / multiplier;
}
function ChangeOpacity()
{
var object = document.getElementById('opacityZone');
var stringOpValue = "";
if(opacityIncreasing)
{
currentOpacity += 1/10;
stringOpValue = String(currentOpacity.toFixed(1));
object.setAttribute("style","opacity:"+currentOpacity+"; -moz-opacity:"+currentOpacity+";");// filter:alpha(opacity="++")");
document.getElementById('messageContainer').innerHTML= stringOpValue;
if(currentOpacity.toFixed(1) == 1.0)
{
document.getElementById('startOpacityTimerButton').value = "Disappear";
StopTimer();
}
}
else
{
currentOpacity -= 1/10;
stringOpValue = String(currentOpacity.toFixed(1));
object.setAttribute("style","opacity:"+currentOpacity+"; -moz-opacity:"+currentOpacity+";");// filter:alpha(opacity="++")");
document.getElementById('messageContainer').innerHTML= stringOpValue;
if(currentOpacity.toFixed(1) == 0.0)
{
document.getElementById('startOpacityTimerButton').value = "Appear";
StopTimer();
}
}
}
这是HTML和CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<title>Opacity Test</title>
<style>
body
{
text-align: center;
}
#opacityZone
{
width: 350px;
height: 25px;
background-color: #F50;
text-align: center;
margin:0 auto;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 5px;
/*opacity number between 0.0 and 1.0*/
opacity: 0.0;
}
#messageContainer
{
width: 100px;
min-height: 100px;
background-color:red;
color: white;
font-weight: bolder;
font-size: 72px;
text-align: center;
margin:0 auto;
padding-top: 10px;
}
.roundedContainer
{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px,15px,15px,15px;
}
</style>
</head>
<body>
<h2>Opacity Test</h2>
<form>
<input type="button" id="startOpacityTimerButton" value="Appear" onclick="init('opacityZone',50);" />
</form>
<div id="opacityZone">Do you see me?</div>
<p id="messageContainer" class="roundedContainer"></p>
</body>
</html>
将函数引用传递给window.setInterval。因此传递ChangeOpacity而不是ChangeOpcity（）
timerInterval = window.setInterval(ChangeOpacity, 100);
您是否考虑过使用CSS3转换效果而不是使用JavaScript？就性能而言，它应该更好：
例如：
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
我完全同意上面所有人的说法。只需使用CSS3动画来更改按钮的不透明度。
简单地使用以下内容：
@keyframes opacityChange{
from {opacity: 0.1}
to {opacity: 1}
}
您还可以声明更改发生的时间范围。
并通过javascript/jquery向按钮添加一个类。（class="opacityChange"）当点击一个新按钮时，一定要删除那个类，这样以后它就可以重新实现到按钮上
但是，为了解决您的特定问题。（如果由于某种原因您不能使用css3）
只需将其添加到更改不透明度功能：
if(newOpacity == 1.0){
StopTimer();
}else{
ChangeOpacity();
}
看看你是怎么设置的，这应该有效，除非我在看什么。
我遇到了同样的问题，经过这么长时间的搜索，这就是我的解决方案：
而不是这条线
var currentOpacity = (+object.style.opacity);
var newOpacity = currentOpacity + 0.1;
你必须使用这条线路：
let newOpacity = String(parseInt(window.getComputedStyle(Object).getPropertyValue('opacity'))+0.2))
对于替代答案，你可以这样做（如果你有白色背景：）：
let i =0 ;
let interval = setInterval(()=>{
i+=0.1
Object.style.color = `rgba(0,0,0,${i})`;
},1000)
if(Object.style.color === 'rgba(0,0,0,1)')
clearInterval(interval)
console.log()
相关文章：
- 如何更改文本框控件的不透明度值
- iPhone:固定位置潜水不可见
- 在js中访问元素时不透明度和样式未定义，但在css中定义
- Greenstock不透明度动画从0到1再返回
- 如何在html画布上替换ByImage(）而不是drawImage(）(忽略不透明度）
- 设置1400个Raphael.js对象的不透明度动画会影响动画性能
- 选中复选框时降低父级的不透明度
- 更改alphaMap不透明度不会更新(THRE.JS R76）
- 如何在页面向下滚动时获得图像以获得不透明度
- 在Materialize设计中删除转盘图像的不透明度
- 如何删除javascript中的不透明度
- 如何使用javascript在rgba中获取不透明度参数
- 如何在悬停时更改高图的不透明度
- 更改整个类的不透明度元素
- 具有不透明度和类似模态行为的向导
- 选择选项可更改图像的不透明度
- 使用媒体查询设置背景图像的不透明度
- 在画布上绘制不透明度(行中的点）javascript
- 引导:仅更改特定模态的模态背景不透明度
- 使用javascript计时器更改潜水的不透明度
