Question

我的javascript程序遇到了一些麻烦。我正在尝试做一个java脚本函数，让小点掉落造成雪的错觉。

我想要两件我不知道如何做的事情：

我想让雪降下一段时间。我的意思是fst从另一个点开始，然后是另一个......
我希望当一个点触及页面的末尾时，它会重置并再次下降

看看我的代码：

var x = [];
var y = -20;
var yplus = [];
var xplus = []; // Variables here.

function fallstart() { // sets the snow position in the begining
  var btn = document.getElementsByClassName("snow");
  for (i = 0; i < x.length; i++) {
    btn[i].style.left = x[i] + "px";
    btn[i].style.top = y + "px";
  }

}

function fall() { // This funtion updates the snow postion
  var btn = document.getElementsByClassName("snow");
  y = y + 2;
  for (i = 0; i < x.length; i++) {
    x[i] = x[i] + xplus[i];
    btn[i].style.left = x[i] + "px";
    btn[i].style.top = y + "px";
  }

}

function keep() { // This funtion makes the snow fall and is the funtion that is called
  var btn = document.getElementsByClassName("snow");
  for (var i = 0; i < btn.length; i++) {
    var rnd = 1280 * Math.random();
    x.push(rnd);
  }
  for (var i = 0; i < btn.length; i++) {
    var xacr = Math.random();
    xplus.push(xacr);
  }
  for (var i = 0; i < btn.length; i++) {
    var yacr = Math.random();
    yplus.push(yacr);
  }
  fallstart();
  setInterval(fall, 20);

}

<body onload="keep()">

  <div class="snow" style="color: red; position: absolute; width: 8px; height: 8px; top:-3px; left:0px"> • </div>
  <div class="snow" style="color: red; position: absolute; width: 8px; height: 8px; top:-3px; left:0px"> • </div>
  <div class="snow" style="color: red; position: absolute; width: 8px; height: 8px; top:-3px; left:0px"> • </div>
  <div class="snow" style="color: red; position: absolute; width: 8px; height: 8px; top:-3px; left:0px"> • </div>
  <div class="snow" style="color: red; position: absolute; width: 8px; height: 8px; top:-3px; left:0px"> • </div>
  <div class="snow" style="color: red; position: absolute; width: 8px; height: 8px; top:-3px; left:0px"> • </div>
  <div class="snow" style="color: red; position: absolute; width: 8px; height: 8px; top:-3px; left:0px"> • </div>
  <div class="snow" style="color: red; position: absolute; width: 8px; height: 8px; top:-3px; left:0px"> • </div>
  <div class="snow" style="color: red; position: absolute; width: 8px; height: 8px; top:-3px; left:0px"> • </div>

</body>

Answer 1

以下是您可以做的几件事：

当您重复fall()方法时，请检查元素的高度。如果它比窗口大，则去除元素（或者可选地，在顶部重新开始）。就这样做：

// This funtion updates the snow postion
function fall() { 
  for (i = 0; i < snowflakes.length; i++) {
    if (snowflakes[i].style.top > windowHeight) {
      snowflakes[i].remove();
    }
  }
}

您可以通过Get the size of the screen, current web page and browser window上的帖子获取javascript中的窗口高度：

var windowHeight = (function() {
  var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
  return y
})();

此外，无需使用每种方法在dom中搜索.snow元素。只需将它们保存在开头就像这样：
```
var snowflakes = document.getElementsByClassName("snow")
```
尽量避免使用突兀的javascript，所以不要依赖body元素来启动你的javascript文件，只需将一个监听器直接放在javascript中就像这样：
```
window.onload = keep
```

此外，无需为永久雪元素重复内联样式。

而不是：

<div class="snow" style="color: red; position: absolute; width: 8px; height: 8px; top:-3px; left:0px"> • </div>

使用此：

.snow  {
  color: red;
  position: absolute; 
  width: 8px; 
  height: 8px; 
  top:-3px; 
  left:0px  
}

无需管理多个阵列。 DOM元素只是附加了DOM内容的javascript对象。如果您想使用自己的属性进行扩展，可以使用额外的信息扩展它们。 ^{注意：这会污染您不拥有的元素的属性，但如果您真的关心，则只是将它们命名为}
```
function setDeltas() { 
  for (i = 0; i < snowflakes.length; i++) {
    snowflakes[i].y_delta = getRandomInt(1, 2);
    snowflakes[i].x_delta = getRandomInt(-1, 1);
  }
}
```
现在每个元素都知道它应该移动多少

这是一个Stack Snippet：

// global variables
var snowflakes = document.getElementsByClassName("snow")

var screenSize = (function() {
  var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0];
  
  return {
    width: w.innerWidth || e.clientWidth || g.clientWidth,
    height: w.innerHeight|| e.clientHeight|| g.clientHeight
  }
})();

// get started
window.onload = function startSnowfall() { 
  setInitialValues();
  setInterval(fall, 20);
}

function setInitialValues() { 
  for (i = 0; i < snowflakes.length; i++) {
    setInitialValue(snowflakes[i]);
  }
}

function setInitialValue(snow) {
  // set position
  snow.style.top = getRandom(-50, 0) + "px";
  snow.style.left = getRandom(0, screenSize.width) + "px";

  // set deltas
  snow.y_delta = getRandom(.5, 1.5);
  snow.x_delta = getRandom(-.5, .5);
}

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

function fall() { 

  for (i = 0; i < snowflakes.length; i++) {
    var snow = snowflakes[i];

    var y_new = parseFloat(snow.style.top) + snow.y_delta
    var x_new = parseFloat(snow.style.left) + snow.x_delta
    
    snow.style.top = y_new + "px";
    snow.style.left = x_new + "px";
    
    // remove if we need to
    if (y_new > screenSize.height) {
      // snow.remove();
      setInitialValue(snow);
    }
  }
}

.snow  {
  color: red;
  position: absolute; 
  width: 8px; 
  height: 8px; 
  top:-3px; 
  left:0px  
}

<div class="snow" > • </div>
<div class="snow" > • </div>
<div class="snow" > • </div>
<div class="snow" > • </div>
<div class="snow" > • </div>
<div class="snow" > • </div>
<div class="snow" > • </div>
<div class="snow" > • </div>
<div class="snow" > • </div>

雪花：暂停下降，触摸“地面”时将其移除

1 个答案:

这是一个Stack Snippet：