代码之家 › 专栏 › 技术社区 › harunB10

ExtJS动画计数器从0到N

extjs javascript

harunB10 · 技术社区 · 6 年前

Ext.Panel 编号为的项目:

{
    cls: 'tableRightBorder',
    html: '<p class="someValue" onload="animateCounter()">20</p>',
    //border: '1px solid',
    width: '100%',
    height: '100%'
}

在这种情况下,我想制作从0到20的动画。我尝试了onload事件和此函数:

function animateCounter() {
    var i = 0;

    var inv = setInterval(function() {
        if (i < 100)
            document.getElementsByClassName('someValue').innerHTML = ++i;
        else
            clearInterval(inv);
    }, 3000 / 100);
}

但这是行不通的。有谁能告诉我为什么它不起作用,我如何解决它?

2 回复 | 直到 6 年前

Moataz Sanad 6 年前

ExtJS对象有一个“侦听器”属性,您可以在其中通过函数传递事件。例如:

{
    cls: 'tableRightBorder',
    html: '<p class="subscribersValue" onload="animateCounter()">20</p>',
    width: '100%',
    height: '100%',
    listeners: {
        onclick: () => {
            var i = 0;

            var inv = setInterval(function () {
                if (i < 100)
                    document.getElementsByClassName('subscribersValue').innerHTML = ++i;
                else
                    clearInterval(inv);
            }, 3000 / 100);
        }
    }
}

这个组件肯定有一个onload等效事件。也许是后渲染?

Moataz Sanad 6 年前

您可以找到一个完整的工作示例 Extjs Fiddle Counter Animation

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'Listeners',
            width: 400,
            height: 300,
            items: [{
                cls: 'tableRightBorder',
                html: '<p class="subscribersValue" onload="animateCounter()">1</p>',
                width: '100%',
                id: 'myCmpId',
                height: '100%'
            }],
            listeners: {
                render: function () {
                    var i = 0;
                    var inv = setInterval(function () {
                        if (i < 20)
                            Ext.fly('myCmpId').dom.innerHTML = ++i;
                        else
                            clearInterval(inv);
                    }, 3000 / 100);
                }
            }
        })
    }
});