zoukankan      html  css  js  c++  java
  • jq实现数字增加或者减少的动画

    效果图:

     1.HTML:

    <div class="up"></div>
    <br>
    <div class="down"></div>

    2.JS:

    $(function(){
        var obj={
            el:$(".up"),
            max:1000,
            start:100//增加开始的初始值
        }
        var obj2={
            el:$(".down"),
            max:1000,
            end:100//减少到最小的值
        }
        up(obj);
        down(obj2)
    })
    function up(obj){
        var item=obj.el;
        var num=obj.max;
        var start=obj.start;
        time2=setInterval(function(){
            start++;
            if(start>num){
                start=num;
                clearInterval(time2);
            }
            item.text(start)
        },1)
    }
    function down(obj){
        var item=obj.el;
        var num=obj.max;
        var min=obj.end;
        time1=setInterval(function(){
            num--;
            if(num<min){
                num=min;
                clearInterval(time1)
            }
            item.text(num)
        },1)
    }

    可以自行设定每次增加的大小

    问题:1。要是需要用背景图片中的数字替换当前显示的数字,并且有上下滚动的效果怎么做?     background-position

       2。实现了问题1的效果之后,如果要最大的位数最先停止动画,后面的位数依次停止怎么做?或者开始动画的时候,最后一位数开始动画,最大的位数最后开始动画怎么做?

       3。如果数字增加到千的时候,在千位之后加逗号,例如:1,000。这又怎么做?

       4。怎样用settimeout来实现?settimeout可以解决动画先后顺序,即延迟动画

  • 相关阅读:
    MySQL记录
    yolo
    python 深度学习 库文件安装出错汇总
    OPENCV安装
    vs code安装leetcode插件
    打印机
    标注工具
    训练源代码训练数据集
    c++ 学习
    复现基于Pytorch的YOLOv3所踩的坑~
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/8474226.html
Copyright © 2011-2022 走看看