个人中心
gpt4 book ai didi

javascript - 雪花 : start them falling with pause, 触摸 "ground"时将其移除

转载 作者：行者123 更新时间：2023-11-28 07:44:04 26 4
gpt4 key购买 nike

我的 javascript 程序遇到一些问题。我正在尝试做一个java脚本函数，让小点落下，产生雪的错觉。

我想要两件事，但我不知道该怎么做:

  • 我想让雪降下来，并留出一些时间间隔。我的意思是，首先出现一个点，然后出现另一个点……
  • 我希望当一个点接触页面末尾时它会重置并再次落下

看看我的代码:

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>

最佳答案

您可以执行以下几项操作:

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

  2. 您可以从 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
    })();

  3. 此外，无需使用每种方法在 dom 中搜索 .snow 元素。只需在一开始就将它们保存起来，如下所示:

    var snowflakes = document.getElementsByClassName("snow")

  4. 尽量避免使用干扰性的 JavaScript，因此不要依赖 body 元素来启动 JavaScript 文件，只需将监听器直接放在 JavaScript 中，如下所示:

    window.onload = keep

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

    而不是这个:

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

  6. 无需管理多个阵列。 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>

关于javascript - 雪花 : start them falling with pause, 触摸 "ground"时将其移除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27640373/

26 4 0
文章推荐： javascript - 让窗口在单击触发两个页面重定向后保持焦点
文章推荐： javascript - 如何访问和处理嵌套对象，数组或JSON？
文章推荐： html - 悬停父元素时更改子元素
文章推荐： javascript - 解析Webview的HTML内容-Android
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com