因为需要，自己用jquery动手写了数字滚动效果
实现原理
1、先确定数字最大的位数，比如说最大数为6位数，就画出一排6个高度为30px的方格;
2、然后在每个方格区域增加一竖排的 0123456789，定时更新数字，转成字符串获取位数，确定每位上的数字大小，然后和当前的数字大小进行比较，最后使用animate方法更改marginTop距离顶部的大小，来实现数字滚动效果。全部代码如下: （jquery文件请自行引入）
效果图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.number {background: #00BBEC;text-align: center;height: 30px;line-height: 30px;font-size: 14px;overflow: hidden;margin-left: 0.15rem;color: #000000;padding: 0 20px;display: inline-block;}</style></head><body><div class="price-div" id="container1"></div><div class="price-div" id="container2"></div><script src="js/jquery-1.11.3.min.js"></script><script>var rollInterval, total = 0;initPage($('#container1'), 6); // 初始化滚动数字最大的位数initPage($('#container2'), 6); // 初始化滚动数字最大的位数var numItemHeight = $('.num-item').eq(0).height(); // 获取数字dom的高度rollInterval = setInterval(fun, 1000); // 定时获取实时数据，实现数字滚动function fun() {total = total + 10;numberRoll($('#container1'), total);numberRoll($('#container2'), Math.floor(Math.random() * 1000000));}function numberRoll(container, total) {var number = total.toString().split("").reverse().join("");for (var i = 0; i < number.length; i++) {// 目标值如果比原本值大，则向上滚动，如果小则向下滚动（0 -> 3 从下往上滚动3个单元格高度 margeTop = -90px 反之 从上往下滚3个单元格高度 margeTop = 90px）var height = parseInt(number[i]) * numItemHeight;$(container).find('.num' + i + ' .numbers-view').animate({marginTop: -height}, 1000, "swing");}}function initPage(container, digit) {var uId = generateUniqueId();// $(container).attr('id', uId);var _html = '';for (var i = digit - 1; i >= 0; i--) {_html += '<div class="number num' + i + '">' +'<div class="numbers-view">' +'<div class="num-item zero">0</div>' +'<div class="num-item one">1</div>' +'<div class="num-item two">2</div>' +'<div class="num-item three">3</div>' +'<div class="num-item four">4</div>' +'<div class="num-item five">5</div>' +'<div class="num-item six">6</div>' +'<div class="num-item seven">7</div>' +'<div class="num-item eight">8</div>' +'<div class="num-item nine">9</div>' +'</div>' +'</div>';}container.html(_html);};// 生成唯一主键idfunction generateUniqueId() {var d = new Date().getTime();var uuid = 'xxxxxxxx_xxxx_4xxx_yxxx_xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {var r = (d + Math.random() * 16) % 16 | 0;d = Math.floor(d / 16);return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);});return uuid;};</script></body></html>
