2

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

这是我的代码应该做的

  1. 单击按钮-> 调用 StartTimer
  2. StartTimer -> 禁用按钮，每 100 毫秒调用一次 ChangeOpacity。
  3. ChangeOpacity -> 获取 div 元素（opacityZone），获取其当前不透明度，增加 0.1 并检查它是否处于最大不透明度，在这种情况下它调用 StopTimer。
  4. StopTimer -> 清除计时器。

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

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

4

6 回答 6

2

你的问题在这里：

window.setInterval(ChangeOpacity(), 100);

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

window.setInterval(ChangeOpacity, 100);

除此之外，你应该真正使用CSS 过渡来处理这样的事情。

于 2013-09-03T02:11:28.313 回答
1

谢谢大家，我会看看建议。只是为了学习语言而尝试用 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>
于 2013-09-20T23:11:11.860 回答
0

将函数引用传递给 window.setInterval。所以通过 ChangeOpacity 而不是 ChangeOpacity()

timerInterval = window.setInterval(ChangeOpacity, 100);
于 2013-09-03T02:11:06.217 回答
0

您是否考虑过使用 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;
于 2013-09-03T03:22:09.283 回答
0

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

只需使用以下内容：

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

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

并通过 javascript/jquery 向您的按钮添加一个类。(class = "opacityChange") 当点击一个新按钮时，一定要删除那个类，以便以后可以重新实现按钮。

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

只需将其添加到更改不透明度函数中：

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

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

于 2013-09-03T03:56:06.017 回答
0

我遇到了同样的问题，经过这么多时间的搜索，这是我的解决方案：

而不是这条线

 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()
于 2022-01-11T18:20:26.153 回答