使用javascript计时器更改Div的不透明度

嘿，伙计们，解决这个问题的方法应该很简单，但我很难弄清楚到底发生了什么。 我有一个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而不是ChangeOpacity（）

你的问题是：

window.setInterval(ChangeOpacity(), 100);

您现在不是将引用传递给函数，而是内联执行它并安排其返回值。将其更改为：

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();
}

---

看看你是如何设置的，这应该是可行的，除非我正在查看一些东西。

谢谢各位，我来看看这些建议。我只是为了学习语言而尝试使用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();
        }


    }

}

//全局变量
var不透明度增加//布尔值，以了解不透明度是增加还是减少。
var animationInterval//制作动画的时间（以毫秒为单位）。
var时间神经//根据时间间隔更改不透明度的计时器。
var对象//我们正在其上执行动画的对象。
不透明度//对象的当前不透明度。
//var按钮消息//使对象根据动画显示或消失的消息。
函数init（elementName，rateOfAnimation）
{
var object=document.getElementById（elementName）；
animationInterval=活动速率；
currentOpacity=Truncate（（+object.style.opacity），1）；
document.getElementById（'messageContainer'）。innerHTML=currentOpacity；
如果（currentOpacity==0）
{
不透明增量=真；
}
其他的
{
不透明增量=假；
}
StartTimer（）；
}
函数StartTimer（）
{
//禁用按钮
document.getElementById（'startOpacityTimerButton'）。disabled=true；
timerInterval=window.setInterval（ChangeOpacity，animationInterval）；
}
函数StopTimer（）
{
窗口清除间隔（timerInterval）；
timerInterval=0；
//启用按钮
document.getElementById（'StartPacityTimerButton'）。disabled=false；
}
函数截断（数字、位数）
{
var乘数=数学功率（10位），
adjustedNum=数字*乘数，
truncatedNum=Math[adjustedNum<0？'ceil'：'floor']（adjustedNum）；
返回截断数/乘数；
}
函数ChangeOpacity（）
{
var object=document.getElementById（'opacityZone'）；
var stringOpValue=“”；
if（不透明度增加）
{
电流不透明度+=1/10；
stringOpValue=字符串（currentOpacity.toFixed（1））；
object.setAttribute（“样式”，“不透明度：+currentOpacity+”；-moz不透明度：+currentOpacity+”；”；//过滤器：alpha（不透明度=“++”）；
document.getElementById（'messageContainer'）。innerHTML=stringOpValue；
如果（currentOpacity.toFixed（1）==1.0）
{
document.getElementById（'startOpacityTimerButton'）.value=“消失”；
停止计时器（）；
}
}
其他的
{
电流不透明度-=1/10；
stringOpValue=字符串（currentOpacity.toFixed（1））；
object.setAttribute（“样式”，“不透明度：+currentOpacity+”；-moz不透明度：+currentOpacity+”；”；//过滤器：alpha（不透明度=“++”）；
document.getElementById（'messageContainer'）。innerHTML=stringOpValue；
如果（currentOpacity.toFixed（1）==0.0）
{
document.getElementById（'startOpacityTimerButton'）。value=“出现”；
停止计时器（）；
}
}
}

这是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>

不透明度测试
身体
{
文本对齐：居中；
}
#不透明酮
{
宽度：350px；
高度：25px；
背景色：#F50；
文本对齐：居中；
保证金：0自动；
边缘顶部：10px；
边缘底部：10px；
垫面：5px；
/*不透明度数值介于0.0和1.0之间*/
不透明度：0.0；
}
#消息容器
{
宽度：100px；
最小高度：100px；
背景色：红色；
颜色：白色；
字体大小：粗体；
字体大小：72px；
文本对齐：居中；
保证金：0自动；
填充顶部：10px；
}
.圆形集装箱
{
-webkit边界半径：15px；
-moz边界半径：15px；
边界半径：15px，15px，1
<!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>