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 の専門家の 1 人が助けてくれるかもしれません (私は 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

JavaScript で作成する代わりに、CSS3 トランジション効果を使用することを検討しましたか? パフォーマンスに関しては、はるかに優れているはずです。

例えば：

-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

関数参照を window.setInterval に渡します。そのため、ChangeOpacity() ではなく ChangeOpacity を渡します

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