Question

我尝试添加和删除最初为1em（16px）宽的段落元素以及调整窗口大小时。当脚本首次加载时，它会在大多数情况下添加太多段落元素大约2-6，当我调整窗口大小时，它会添加太多或删除许多我不知道是什么导致它过去或根据差异。我试图通过vanilla javascript实现这一目标。

编辑：段落是垂直的，单个字符宽16px。然后，我将随机地生成字符并连续生成并在屏幕上显示。

(function(window, undefined){
    var parentContainer = document.getElementsByClassName('stringFall_Container'),
    paras = document.getElementsByClassName('para'),
    containerWidth,
    paraWidth,
    difference,
    paraAmount;

    function checkContainerWidth () {
        console.log('Running checkContainerWidth();')
        containerWidth = parentContainer[0].offsetWidth;
        console.log('The containers size is:' + containerWidth)
        return true;
    }

    function checkParaWidth () {
        console.log('Running checkParaWidth();')
        paraWidth = paras[0].offsetWidth;
        console.log('The Paragraphs size is:' + paraWidth)
        return true;
    }

    function checkParaAmount () {
        console.log('Running checkParaAmount();');
        paraAmount = paras.length;
        console.log(paraAmount);
        return true;
    }

    function checkDifference () {
        console.log('Running checkDifference();');
        difference = containerWidth / paraWidth;
        return true;
    }

    function addPara (number) {
        console.log('Running addPara();');
        number = number === undefined ? 1 : number;
        console.log(number);
        for (var i = 0; i < number; i++) {
            var create = document.createElement('p');
            parentContainer[0].appendChild(create).setAttribute('class', 'para');
        }
        return true;
    }

    function removePara (number) {
        console.log('Running removePara()');
        var lastElement = paras[paras.length - 1];
        checkParaAmount();
        number = number === undefined ? 1 : number;
        for (var i = 0; i < number; i++) {
            parentContainer[0].removeChild(lastElement);
        }
        return true;
    }

    function executeOnResize () {
        checkDifference();
        console.log('Running executeOnResize();');
        checkContainerWidth();
        if (difference < paraAmount) {
            addPara(paraAmount - difference);
        } else {
            removePara(difference - paraAmount)
        }
    }

    addPara();
    checkContainerWidth();
    checkParaWidth();
    checkParaAmount();
    checkDifference();
    console.log(difference);
    addPara(difference);

    window.addEventListener('resize', executeOnResize, false);
})(this);

Answer 1

在这种情况下，强烈建议发布一个完整的示例，因为哪些样式应用于段落及其容器很重要。一个例子也可以帮助人们更快，更轻松地理解你想要做的事情。

算法中存在一些问题，标准调试应该揭示：

段落的初始添加应考虑到您已经渲染了一个：addPara(difference - 1);
在executeOnResize中添加或删除段落之前，您应该更新paraAmountValue值，因为它仍然 1 ;
在计算difference时，您可能想忽略小数部分并获得整数值，否则您将添加或删除多于必要的段落
executeOnResize中的条件语句应该允许您既不需要添加段落也不删除任何
当difference小于paraAmount时，您确定要添加段落吗？不应该是相反的吗？

这是我的测试页，请查看它。我希望它会帮助你继续下去。

http://dojo.telerik.com/AVoKU

您会注意到，在某些点上，第二行有一个段落 - 这仍然需要修复。

在调整大小时添加和删除元素

1 个答案: