实例

插件说明

css 兼容性

兼容 ie8 以上

js 兼容性

可能不兼容 ie11

扩展性

自行调整

迁移

此插件使用原生 js
format-digit 依赖 fonticon 数字图标

插件配置

scroll-digit

// 使用方式
new ScrollDigit(ID, options);

// 默认值
var defaults = {
  number: 0, //传入值
  color: "#01E6E1",
  fontSize: "30px",
  width: "auto",
  height: "100px",
  className: "ScrollDigit",
  marginL: "0"
  isComma: false,
  isIcon: false,

};

// 可配置项
options = {
  // 默认数字
  number: "",
  // 数字颜色
  color: "",
  // 数字大小
  fontSize: "",
  // 宽度 对于逗号无效 (最好自适应)
  width: "",
  // i元素以及dataBoc元素的高度 需要注意的是这个高度要和外部元素的高度一致
  height: "",
  // 除第一个左边距（已修改第一个也有左边距） 作用于格式化数字的 滚动数字无效(已修改滚动数字作用与滚动数字)
  marginL: "0",
  //  单位
  unit: "单位"
  // 分隔
  isComma: true,
    // 是否使用格式化数字
  isIcon: true,
};

// 正确的使用方式：
// 字体间距：滚动数字控制宽度
// 字体间距： 格式化数字控制左边距

format-digit

// 默认值
var defaults = {
  number: 0, //传入值
  color: "#01E6E1",
  fontSize: "30px",
  width: "auto",
  height: "100px",
  marginL: "0"
  isComma: false,

};
// 可配置项
options = {
  // 选择器
  selector: "",
  // 下面八个参数和滚动数字参数一样的
  // 默认数字
  number: "",
  // 数字颜色
  color: "",
  // 数字大小
  fontSize: "",
  // 数字的宽度 对于逗号小数点无效(最好自适应)
  width: "",
  // i元素以及dataBoc元素的高度 需要注意的是这个高度要和外部元素的高度一致
  height: "",
  // 除第一个左边距（已修改第一个也有左边距） 作用于格式化数字的 滚动数字无效(已修改滚动数字作用与滚动数字)
  marginL: "0",
  // 单位
  unit: "单位",
  // 是否有逗号
  isComma: Boolean,
    // 是否使用格式化数字
  isIcon: true,
};

格式化滚动数字的原理

1. 就是将原来的每个数字一个个变成图标数字，
2. 滚动数字 每个滚动数字都有 20 个数字，实际上就是通过遍历 10 次 将这 20 个数字变成图标字体，每次遍历都会遍历一行，相当于一行一行的往下遍历

111111
222222
333333
...

功能

格式化数字：

1. 可以有小数
2. 可以有分号

滚动数字：

1. 可以有分号，不能有小数

注意事项

1. 第二个 fonts 字体图标不行 因为图标的原因数字对不齐

2. 滚动数字不能逗号 所以代码默认把 isComma 设置为 false ，而小数点如果是小数 那么就会有小数点 而逗号则是 3 位正数一个逗号

3. 滚动数字和格式化数字有 7 个参数是相同的

4. 滚动数据对不齐的现象是怎么回事呢？经过测试发现，明明设置的是整数，但是到了浏览器那里就变成成小数，然后小数计算很有可能会出现精度丢失现象，这就导致了对不齐

待解决问题

Version Iterate

v1.0

1. initial

v1.1

1. 修复 iconfont 的 shuzi0

v1.2

1. 字体图标错乱了 导致显示不全
2. 修改 scroll-digit.js 校验 id

v1.3

1. 滚动数字新增可以添加分号功能

v1.4

1. 格式化数字 marginL 左边距 已改成也会 作用于第一个数字了
2. 分数逗号的大小 为数字的 1 + 1*1/5 的大小了
3. 滚动数字分号取消 marginL 不然会莫名显示不全（格式化数字仍然还在）
4. 分数逗号已经取消格式化了，因为我觉得格式化后还没有不格式化好看，当然这个后期可以用变量控制
5. 格式化数字新增不使用字体图标功能，因为有时候格式化数字只需要使用到分号，而不需要使用字体图标
6. 滚动数字的 marginL 和格式化数字的 marginL 已经分开 各用各的效果一样 并且逗号都没有 marginL
7. 滚动数字添加小数点，并且数字不滚动 和 分号一样
8. 解决滚动数字经常出现对不齐现象，原因就是因为浏览器渲染问题，将整数变成小数，但是我们无法阻止浏览器的问题，因此我就将得到的高度全部变成整数，因为他平移是根据百分比的，因此高度改变了也没有关系
9. 解决了有分号的滚动项，每次滚动都是全部滚动，主要是前面 比较的是 （分号 + 数字 + 小点 和 数字 + 小点）因此永远不等，后面把比较改了，就ok了