在JavaScript中创建元素并删除以前创建的元素

我认为我创建的div使页面过载了。有没有办法在一段时间后清除/销毁创建的元素？
下面是代码，但为了更好地理解，请参阅：link

var ct = 0;
    let max = 180;
    let min = -180;
    var xMrgn = 0;
    var yMrgn = "440px";
    function startCounter() {
        if (ct < 50) {
            var bbls = document.querySelector('.bbls-amount').value;
            var bblSpeed = document.querySelector('.bbls-speed').value;
            document.getElementById('bblsQty').innerHTML = bbls
            var b = Math.floor(Math.random() * (bbls - 3 + 1) + 3);
            for (let i = 0; i < b; i++) {
                var a = Math.floor(Math.random() * (max - min + 1) + min);
                xMrgn = a + "px";
                let div = document.createElement('div');
                div.className = 'bubbles';
                dv.appendChild(div);
                var msxS = bblSpeed * 14;
                var minS = bblSpeed * 6;
                var s = Math.floor(Math.random() * (msxS - minS + 1) + minS);
                $(".bubbles").animate({
                    "marginLeft": xMrgn, 
                    "bottom": yMrgn
                }, s);
            }
        }
        document.getElementById('txt').innerHTML =  ct;
        var counter = setTimeout(startCounter, 1000);
        ct = (ct < 50) ? ct + 1 : 0;
    }
    startCounter()

有很多令人困惑的变量名和很多“var”，所以我已经改变了代码相当多的时候，我必须理解一切的意思。

let counter = 0;
let max = 180;
let min = -180;
let marginLeft = "0px";
let marginBottom = "440px";
const timer = setInterval(update, 1000);
const bubbles = [];

function update() {
    if (counter < 50) {
        const bubbleQuantity = document.querySelector(".bbls-amount").value;
        const bubbleSpeed = document.querySelector(".bbls-speed").value;
        document.getElementById("bblsQty").innerHTML = bubbleQuantity;
        // document.getElementById('bblsSpeed').innerHTML = bubbleSpeed;
        let amountOfBubbles = Math.floor(
            Math.random() * (bubbleQuantity - 3 + 1) + 3
        );
        for (let i = 0; i < amountOfBubbles; i++) {
            let a = Math.floor(Math.random() * (max - min + 1) + min);
            marginLeft = a + "px";
            let bubble = document.createElement("div");
            bubbles.push(bubble);
            bubble.className = "bubbles";
            dv.appendChild(bubble);
            let msxS = (1100 - bubbleSpeed) * 14;
            let minS = (1100 - bubbleSpeed) * 6;
            let s = Math.floor(Math.random() * (msxS - minS + 1) + minS);
            $(".bubbles").animate(
                {
                    marginLeft: marginLeft,
                    bottom: marginBottom,
                },
                s
            );
        }
    }

    document.getElementById("txt").innerHTML = counter;

    counter = counter < 50 ? counter + 1 : 0;

    for (const i in bubbles) {
        if (bubbles[i].style.bottom.split("px")[0] > dv.clientHeight) {
            bubbles[i].remove();
            bubbles.splice(i, 1);
        }
    }
}

function stopCounter() {
    clearInterval(timer);
    counter = 0;
}

function cssVsrs(x) {
    let mrg = "--mrgn";
    let mrgVal = x;
    let r = document.querySelector(":root");
    r.style.setProperty(mrg, mrgVal);
}

这里有一个更接近原始代码的解决方案：

let ct = 0;
let max = 180;
let min = -180;
let xMrgn = "0px";
let yMrgn = "440px";
let timer;
const bubbles = [];

function startCounter() {
    if (ct < 50) {
        const bbls = document.querySelector(".bbls-amount").value;
        const bblSpeed = document.querySelector(".bbls-speed").value;
        document.getElementById("bblsQty").innerHTML = bbls;
        // document.getElementById('bblsSpeed').innerHTML = bblSpeed;
        let b = Math.floor(Math.random() * (bbls - 3 + 1) + 3);
        for (let i = 0; i < b; i++) {
            let a = Math.floor(Math.random() * (max - min + 1) + min);
            xMrgn = a + "px";
            let div = document.createElement("div");
            bubbles.push(div);
            div.className = "bubbles";
            dv.appendChild(div);
            let msxS = (1100 - bblSpeed) * 14;
            let minS = (1100 - bblSpeed) * 6;
            let s = Math.floor(Math.random() * (msxS - minS + 1) + minS);
            $(".bubbles").animate(
                {
                    marginLeft: xMrgn,
                    bottom: yMrgn,
                },
                s
            );
        }
    }

    document.getElementById("txt").innerHTML = ct;

    ct = ct < 50 ? ct + 1 : 0;

    timer = setTimeout(startCounter, 1000);

    for (const i in bubbles) {
        if (bubbles[i].style.bottom.split("px")[0] > dv.clientHeight) {
            bubbles[i].remove();
            bubbles.splice(i, 1);
        }
    }
}

function stopCounter() {
    clearTimeout(timer);
    ct = 0;
}

function cssVsrs(x) {
    let mrg = "--mrgn";
    let mrgVal = x;
    let r = document.querySelector(":root");
    r.style.setProperty(mrg, mrgVal);
}

startCounter();

在编写代码时，尽量避免不可读的变量名，特别是如果你想让别人读它，例如在堆栈溢出时。如果你想保留较短的变量名，请留下关于变量是什么以及如何使用它们的注解。非常感谢。

在JavaScript中创建元素并删除以前创建的元素

1条答案

相关问题

热门标签

最新问答