Question

我正在尝试使用看起来像雨（滴从顶部到底部无限下降）的javascript做一些背景动画。但这不起作用。我不知道问题出在哪里。

function add(){
  var div = document.createElement("div");
  div.style.width = "1px";
  div.style.height = '7%';
  div.style.background = 'linear-gradient(rgba(255,255,255,0) 0%, #ffffff 75%, #ffffff 100%)';
  div.style.position = 'absolute';
  div.style.animation = 'spin 4s infinite';
  div.style.transition =  'all 3s';

  var l = 10;

  for (var i;i<20;i=i+1){
    div.style.left = toString(l+10)+'px';
    div.style.animationDelay = toStrin(Math.random() * 10) + 's';
    document.getElementsClass("back").appendChild(div);
  }
}

window.onload = function(){
  add();
}

body{
  background-color: #000;
}
@keyframes spin{
  0%{
    top: -20px;
  }
  100%{
    top:90%;
    background-color: #000;
  }
}

<!DOCTYPE html>
<html>
<head>
	<title>Trail</title>
</head>
<body>
		<div class="back"></div>
</body>
</html>

我在这里停留了很长时间，请帮忙！！！

Answer 1

您在这里有很多错误。

您初始化了document.getElementsClass("back").appendChild(div)，但未分配默认值
document.getElementsByClassName("back")[0].appendChild(div);是错误的。像这样(num).toString()
您必须使用function add(){ var l = 10; for (var i=0;i<20;i=i+1){ var div = document.createElement("div"); var node = document.createTextNode("This is new."); div.appendChild(node); div.style.width = "1px"; div.style.height = '7%'; div.style.background = 'linear-gradient(rgba(255,255,255,0) 0%, #ffffff 75%, #ffffff 100%)'; div.style.position = 'absolute'; div.style.animation = 'spin 4s infinite'; div.style.transition = 'all 3s'; div.style.color = '#ffffff'; div.style.left = (l+(i*10)).toString()+'px'; div.style.animationDelay = (Math.random() * 10).toString() + 's'; document.getElementById("back").appendChild(div); } } window.onload = function(){ add(); }，而不是以前的方式

body{
  background-color: #000;
}
@keyframes spin{
  0%{
    top: -20px;
  }
  100%{
    top:90%;
    background-color: #000;
  }
}

<div id="back"></div>

this.value

在javascript的div标签中添加新元素

1 个答案: