Question

嘿伙计们解决这个问题的方法应该很简单，但我很难弄清楚发生了什么。我有一个看起来像这样的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();}
}

这是我的代码应该做的

点击按钮 - ＆gt;致电StartTimer
StartTimer - ＆gt;禁用按钮，每100毫秒调用一次ChangeOpacity。
ChangeOpacity - ＆gt;获取div元素（opacityZone），获取其当前的不透明度，递增0.1并检查它是否处于最大不透明度，在这种情况下它调用StopTimer。
StopTimer - ＆gt;清除计时器。

这就是它的作用：计时器启动，将不透明度改为0.1，似乎停止了！？！

我尝试使用safari Web Inspector进行调试，但我不太确定发生了什么，也许你们中的一位JavaScript专家可以帮助我（我是js的noob）。谢谢！

Answer 1

你的问题在这里：

window.setInterval(ChangeOpacity(), 100);

您现在正在内联执行它并调度其返回值，而不是传递对该函数的引用。将其更改为：

window.setInterval(ChangeOpacity, 100);

除此之外，你应该真正使用CSS transitions这样的东西。

Answer 2

谢谢大家，我会看看这些建议。我只是试图用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>

Answer 3

将函数引用传递给window.setInterval。所以传递ChangeOpacity而不是ChangeOpacity（）

timerInterval = window.setInterval(ChangeOpacity, 100);

Answer 4

您是否考虑过使用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;

Answer 5

上面的其他人一直在说我完全赞同。只需使用CSS3动画来改变按钮的不透明度。

只需使用以下内容：

@keyframes opacityChange{
  from {opacity: 0.1}
  to {opacity: 1}
}

您还可以声明更改的时间范围。

通过javascript / jquery将一个类添加到您的按钮。（class =“opacityChange”）当点击一个新按钮时，一定要删除该类，以便以后可以重新实现该按钮。

但是，要解决您的特定问题。（如果由于某种原因你不能使用css3）

只需将其添加到“更改不透明度”功能：

if(newOpacity == 1.0){
  StopTimer();
}else{
  ChangeOpacity();
}

看看你如何设置，这应该有效，除非我正在查看某些内容。

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

5 个答案: