如何用JS定位单个div

Question

我试图创造“雪”。在一个div的背景上。代码如下，但您可以在此处查看：http://www.getwiththebrand.com/makeabrew_copy/ 我想只用红色边框（数字4）将效果放在div上。 谁能告诉我我失踪了什么？

    <!-- language: lang-js -->

        var width = getWidth();
        var height = getHeight();
        var flakeCount = 50;
        var gravity = 0.7;
        var windSpeed = 20;
        var flakes = [];

        function getWidth() {
            var x = 0;
            if (self.innerHeight) {
                x = self.innerWidth;
            }
            else if (document.documentElement &&     document.documentElement.clientHeight) {
                x = document.documentElement.clientWidth;
            }
            else if (document.body) {
                x = document.body.clientWidth;
            }
            return x;
        }

        function getHeight() {
            var y = 0;
            if (self.innerHeight) {
                y = self.innerHeight;
            }
            else if (document.documentElement &&     document.documentElement.clientHeight) {
               y = document.documentElement.clientHeight;
            }
            else if (document.body) {
                y = document.body.clientHeight;
            }
            return y;
        }

    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    var currentFlake = 0;
    var snowglobe = document.getElementById("snowglobe");

    while (currentFlake < flakeCount) {
        var flake = document.createElement("div");
        flake.className = 'flake';
        flake.style.fontSize = getRandom(12, 24) + 'px';
        flake.style.top = getRandom(0, height) + 'px';
        flake.style.left = getRandom(0, width) + 'px';
        flake.innerHTML = "•";
        newFlake = snowglobe.appendChild(flake);
        newFlake.speed = getRandom(1, 100);
        flakes.push(newFlake);
        currentFlake++;
    }

    function doAnimation() {
        for (var i = 0; i < flakes.length; i++) {
            newX = false;
            newY = false;
            // Calculate Y position
            newY = parseFloat(flakes[i].style.top) + (flakes[i].speed / 100) * gravity;
            if (newY > height) {
                newY = 0 - parseInt(flakes[i].style.fontSize);
                // If Y is at bottom, randomize X
                newX = getRandom(0, width);
            }
            // Calculate X position if it hasn't been set randomly
            if (!newX) newX = parseFloat(flakes[i].style.left) + Math.sin(newY / windSpeed);
            if (newX < -20) newX = width + 20;
            if (newX > width + 20) newX = -20;
            // Set new position
            flakes[i].style.top = newY + 'px';
            flakes[i].style.left = newX + 'px';
        }
    }
    setInterval(doAnimation, 10);

    window.onresize = function(event) {
        width = getWidth();
        height = getHeight();
    }​


<!-- language: lang-css -->

    #snowglobe .flake {
        position: absolute;
        width: 1px;
        height: 1px;
        color: rgba(255,255,255,0);
        text-shadow: 0 0 3px rgba(255,255,255,1);
    }​


<!-- language: lang-html -->

    <div class="ui-full-width">
        <div class="container even" id="snowglobe">
            <h3><span class="num">4</span>Add freshly boiled water to the pot</h3>

            <p>Give it a stir and secure the lid. Wrap your pot in a tea-cosy if it's nippy outside!</p>            
        </div>
    </div>


<!-- end snippet -->

<div class="ui-full-width">
    <div class="container even" id="snowglobe">
        <h3><span class="num">4</span>Add freshly boiled water to the pot</h3>

        <p>Give it a stir and secure the lid. Wrap your pot in a tea-cosy if it's nippy outside!</p>            
    </div>
</div>

Answer 1

当myjs.js在我的浏览器中加载SCRIPT1014: Invalid character myjs.js (116,2) 时，文件末尾会有一个额外的字符，它会触发正确的

window.onresize = function(event) {
   width = getWidth();
   height = getHeight();
}â // << here

脚本部分：

window.onresize = function(event) {
    width = getWidth();
    height = getHeight();
}​ // ??

另外，我不知道你正在使用什么浏览器，但尝试点击F12，你会得到控制台，你会看到javascript错误和其他有用的信息。

编辑：更糟糕的是，your script末尾有多个字符：

signature

你有没有搞乱一些文件编码选项？

Answer 2

谢谢你的期待。我对代码进行了注释，以便了解多余的字符。我还没有对文件编码选项做任何事情。

我检查了控制台，并且有一些元素未定义。看起来我错过了一大块：

var width = getWidth();
var height = getHeight();
var flakeCount = 50;
var gravity = 0.7;
var windSpeed = 20;
var flakes = [];

现在好了！