0

これは、現時点では少し困惑しています。

私はかなり経験豊富なプログラマーで、結婚式のカウントダウン ページで婚約者を驚かせたいと考えています。目的の効果は、本質的に、メイン ページの背後に落ちる紙吹雪をシミュレートしたものです。私のセットアップは次のとおりです。

JavaScriptでdivの配列を持っています。各 div はページ上に絶対に配置されます。50 ミリ秒ごとに更新する間隔を設定しています。目盛りごとに、div の配列に対して for ループを実行し、計算を行ってそれらの位置を更新します。

問題 私が抱えている問題は、すべての div が作成され、配列に格納され、変更されていることをはっきりと確認できますが (この場合、それぞれの回転はわずかにランダム化されています)、初期化フェーズで一度ティックが行われることです。配列の最後のスロットに格納されている div のみがその位置を更新します。テスト目的でインデックスごとに各 div をハードコーディングしようとさえしましたが、実際にその位置を更新するのは厳密には最後の要素です。計算の前後に各 div の現在の「左」と「上」のスタイル値を出力しても、値が変更されたことが示されますが、目に見える変化はありません。これが私の基本的なコードです：

Javascript

var container;            // the div that will have all the other divs attached to it
var conf = new Array();   // the array of divs to modify
var rots = new Array();   // the rotation of each div
var vels = new Array();   // the velocity of each div
var xPos = new Array();   // the current x value of position in pixels
var yPos = new Array();   // the current y value of position in pixels
var xVels = new Array();  // the x portion of that velocity
var yVels = new Array();  // the y portion of that velocity

function initialize()     // this is attached to the onload event on my <body> tag
{
    container = document.getElementById("conf_container");
    confettiInit();       // creates, initializes, and displays each div

    setInterval(updateConfetti, 42);
}

function confettiInit()
{
    screenHeight = window.innerHeight;
    screenWidth = window.innerWidth;

    for (var i = 0; i < 25; i ++)   // create 25 confetti flakes
    {
        // append a div in the container with a unique ID
        container.innerHTML += "<div class='conf' id='conf_" + i + "'></div>";
        // store the element in an array
        conf[i] = document.getElementById("conf_" + i);
        // ensure confetti is in the background, and each z index is unique
        conf[i].style.zIndex = -i - 1;

        xPos[i] = window.innerWidth * Math.random();  // calculate random x position
        conf[i].style.left = xPos[i] + "px";          // set x position of div
        yPos[i] =  -40;                               // y position above screen
        conf[i].style.top = yPos[i] + "px";           // set y position of div

        // calculate the random amount of rotation (-30 to 30 degrees)
        rots[i] = Math.random() * 60*(Math.PI/180) - 30*(Math.PI/180);
        // set rotation of div
        conf[i].style.webkitTransform = "rotate(" + -rots[i] + "rad)";

        vels[i] = Math.random() * 3 + 2;         // calculate random velocity (2-5)
        xVels[i] = vels[i] * Math.sin(rots[i]);  // get x portion of velocity
        yVels[i] = vels[i] * Math.cos(rots[i]);  // get y portion of velocity
    }
}

function updateConfetti()
{
    for (var i = 0; i < 25; i ++)
    {
        xPos[i] += xVels[i];   // calculate new x position
        yPos[i] += yVels[i];   // calculate new y position
        conf[i].style.left = xPos[i] + "px";   // set div's x position
        conf[i].style.top = yPos[i] + "px";    // set div's y position

        // if the confetti piece leaves the viewing area...
        if (xPos[i] < -50 ||
            xPos[i] > window.screenWidth + 10 ||
            yPos[i] > window.screenHeight + 10)
        {
            // send it back to the top and reinitialize it
            xPos[i] = window.innerWidth * Math.random();

            conf[i].style.left = xPos[i] + "px";

            yPos[i] = -40;
            conf[i].style.top = yPos[i] + "px";

            rots[i] = Math.random() * 60*(Math.PI/180) - 30*(Math.PI/180);
            conf[i].style.webkitTransform = "rotate(" + -rots[i] + "rad)";

            vels[i] = Math.random() * 3 + 2;
            xVels[i] = vels[i] * Math.sin(rots[i]);
            yVels[i] = vels[i] * Math.cos(rots[i]);
        }
    }
}

CSS

div.conf
{
    height: 29px;
    width: 50px;
    background-image: url("images/ConfettiYellow.gif");
    position: absolute;
}

#conf_container
{
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
4

1 に答える 1

1

div の作成に問題があります。次のように、従来の方法で実行すると、機能し始めます。

var d = document.createElement("div");
d.className = "conf";
container.appendChild(d);
conf[i] = d;
于 2013-05-04T10:13:15.300 に答える