在javascript中向div标签添加新元素
[英]adding new elements to a div tag in javascript
问题描述
我正在尝试使用看起来像雨的 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>
我卡在这里很久了请帮忙！！！
1 个解决方案
解决方案1
1 2019-07-01 12:50:59
你在这里有很多错误。
- 您初始化了
i但未分配默认值 -
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>
添加Div标签以包裹LI元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.