雪花：暂停开始落下，触摸"ground"时取下

我的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>

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

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();
    }
  }
}

你可以从这篇文章中获取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);
  }
}
```
现在每个元素都知道它应该移动多少

下面是一个堆栈代码段：

// 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>

下面是一个堆栈代码段：

相关内容

最新更新

热门标签：