0

这让我现在有点困惑。

我是一个相当有经验的程序员，希望在我们婚礼的倒计时页面上给我的未婚妻一个惊喜。所需的效果基本上模拟了落在主页后面的五彩纸屑。我的设置如下：

我在 javascript 中有一个 div 数组。每个 div 都绝对定位在页面上。我有一个间隔集，每 50 毫秒左右更新一次。在每个刻度上，我在我的 div 数组上运行一个 for 循环，并进行计算并更新它们的位置。

问题 然而，我遇到的问题是，即使我可以清楚地看到所有 div 都在初始化阶段被创建、存储到数组中并被修改（在这种情况下，每个 div 都有轻微的随机旋转），一旦勾选要更新它们的位置，只有存储在数组最后一个插槽中的 div 才会更新其位置。出于测试目的，我什至尝试按索引对每个 div 进行硬编码，但严格来说，它是实际更新其位置的最后一个元素。即使在计算之前和之后为每个 div 打印当前的“left”和“top”样式值，也显示该值已更改，但没有明显的变化。这是我的基本代码：

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 回答