js如何实现数字滚动效果

Posted 2023-05-03

参考技术A jquery实现立体式数字滚动条增加效果，代码分为两部分，一部分位html结构另一部分属于js代码段，需要的朋友参考下吧！

1、html结构
<div class="numberRun1"></div>
2、js
<script type="text/javascript" src="js/digital_over.js" ></script>//引用 //这是自定义函数（需要在页面中进行调用） <script> //数字滚动 function digitalScroll(obj,n) var numRun = $(obj).numberAnimate(num:n, speed:2000, symbol:","); var nums = n; setInterval(function() numRun.resetData(nums); ,3000); var numWidth= $(obj).width(); $(obj).find('.mt-number-animate').css('width',numWidth); $(obj).css('width','100%'); $(obj).find('.mt-number-animate').css('margin','0 auto'); window.indexdigitalScroll=function() digitalScroll($('.numberRun1'),1160518); </script> <!--这是在页面中调用的方法--> <script> $(function() indexdigitalScroll(); ); </script>
3、图片案例 参考技术B jq有插件 vTicker

cocos2d-js 数字自动滚动效果

实现方式一：
从数字1滚动到数字2，并显示增加减少数量

rollFightNum: function(num1, num2) 
    if (!this._powerLabelClone) 
        this._powerLabelClone = this._powerLabel.clone();
        this._powerBg.addChild(this._powerLabelClone);
    
    
    if (this._powerLabelClone.isVisible()) 
        this.unschedule(this.rollFightNumAction);
    
    
    this.roll_num1 = num1;
    this.roll_num2 = num2;
    this.roll_gap = num2 - num1;
    
    this._powerLabelClone.setVisible(true);
    this._powerLabelClone.setString(num1);
    this._powerLabel.setVisible(false);
    
    this.schedule(this.rollFightNumAction, 0.02);
,

rollFightNumAction: function(dt) 
    this.roll_num1 += this.roll_gap*dt/0.4;
    
    if ((this.roll_gap > 0 && this.roll_num1 >= this.roll_num2) || (this.roll_gap < 0 && this.roll_num1 <= this.roll_num2)) 
        this.unschedule(this.rollFightNumAction);
        this._powerLabelClone.setVisible(false);
        this._powerLabel.setVisible(true);
        
        var label_end = this._powerLabel.clone();
        label_end.setString(this.roll_gap < 0 ? this.roll_gap : ("+"+this.roll_gap));
        label_end.setPosition(cc.p(label_end.getPositionX(), label_end.getPositionY()-20));
        this._powerBg.addChild(label_end);
        label_end.runAction(cc.Sequence.create(cc.Spawn.create(cc.FadeOut.create(0.4),cc.MoveBy.create(0.4,cc.p(0,20))),cc.CallFunc.create(function(sender)sender.removeFromParent();)));
    
    
    this._powerLabelClone.setString(Math.floor(this.roll_num1));
,

实现方式二：
固定时间从数字1滚动到数字2

autoRollNumber: function (start, end) 
    var bEnable = start !== end;
    this._autoRolling = bEnable;
    this._autoRollTick = 0;
    this._autoStarNum = start;
    this._autoNumSpacing = end - start;

    this.unschedule(this._autoRoll);
    this.updateItemNum(start);
    if (bEnable) 
        this.schedule(this._autoRoll);
    
,

_autoRoll: function (dt) 
    var totalTime = ItemNumAutoRollTotalTime;
    this._autoRollTick += dt;
    if (this._autoRollTick >= totalTime) 
        this._autoRollTick = totalTime;
        this._autoRolling = false;
        this.unschedule(this._autoRoll);
    
    this.updateItemNum(parseInt(this._autoRollTick * this._autoNumSpacing / totalTime) + this._autoStarNum);
,