今天写代码时刚好需要这么一个功能，再网上找了一下，没有找到符合需求的，就东拼西凑的写了一个，只保证能运行，性能啥的还没考虑，把代码贴上来防止以后会用到
需求描述
用户可以看到数字定时随机新增，比如网站的浏览量或者是用户的充值量等功能，网上还有更复杂的带动画效果的，但是不是我需要的，我只是需要数字不断定时增大的效果就可以了
代码里面用到了jQuery，如果没有用到的可以自己改一下用到jquery的几个地方
代码如下：
export default {
name: “”,
props: [""],
data() {
return {
};
},
components: {},
computed: {},
beforeMount() {},
mounted() {
},
methods: {
},
watch: {},
directives: {
// 自动增长
digital: {
inserted: function(ele) {
if (ele.timer) clearInterval(this.timer)
let func = () = >{
let min = parseFloat($(ele).attr('digital-min'))
let digitalMin = $(ele).html() ? resetMoney($(ele).html()) : min;
if (digitalMin < min) return;
let addMin = $(ele).attr('add-min');
let addMax = $(ele).attr('add-max');
// 默认增长带小数
addMin = addMin ? addMin: 3;
addMax = addMax ? addMax: 20;
let noPoints = $(ele)[0].hasAttribute('not-point');
let noThousandth = $(ele)[0].hasAttribute('not-thousandth');
let addNumber = randomNum(addMax, addMin, noPoints ? '': 2) addNumber = noPoints ? parseInt(addNumber) : parseFloat(addNumber)
addNumber = digitalMin + addNumber;
addNumber = noThousandth ? addNumber: formatNumber(addNumber, 2)
$(ele).html(addNumber)
}
let time = $(ele).attr('time') ? $(ele).attr('time') : 2000
ele.timer = setInterval(() = >{
func()
},
time)
}
}
}
};
//使用到的 工具函数
/**
* 将数值格式化成金额形式
*
* @param num 数值(Number或者String)
* @param precision 精度，默认不变
* @param separator 分隔符，默认为逗号
* @return 金额格式的字符串,如'1,234,567'，默认返回NaN
* @type String
*/
export function formatNumber(num, precision, separator) {
var parts;
// 判断是否为数字
if (!isNaN(parseFloat(num)) && isFinite(num)) {
// 把类似 .5, 5. 之类的数据转化成0.5, 5, 为数据精度处理做准, 至于为什么
// 不在判断中直接写 if (!isNaN(num = parseFloat(num)) && isFinite(num))
// 是因为parseFloat有一个奇怪的精度问题, 比如 parseFloat(12312312.1234567119)
// 的值变成了 12312312.123456713
num = Number(num);
// 处理小数点位数
num = (typeof precision !== 'undefined' ? (Math.round(num * Math.pow(10,precision)) / Math.pow(10,precision)).toFixed(precision) : num).toString();
// 分离数字的小数部分和整数部分
parts = num.split('.');
// 整数部分加[separator]分隔, 借用一个著名的正则表达式
parts[0] = parts[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + (separator || ','));
return parts.join('.');
}
return NaN;
}
export function resetMoney(e) {
return parseFloat(e.replace(/[^\d\.-]/g, ""));
}
/***************************************
* 生成从minNum到maxNum的随机数。
* 如果指定decimalNum个数，则生成指定小数位数的随机数
* 如果不指定任何参数，则生成0-1之间的随机数。
*
* @minNum：[数据类型是Integer]生成的随机数的最小值（minNum和maxNum可以调换位置）
* @maxNum：[数据类型是Integer]生成的随机数的最大值
* @decimalNum：[数据类型是Integer]如果生成的是带有小数的随机数，则指定随机数的小数点后的位数
*
****************************************/
export function randomNum(maxNum, minNum, decimalNum) {
var max = 0, min = 0;
minNum <= maxNum ? (min = minNum, max = maxNum) : (min = maxNum, max = minNum);
switch (arguments.length) {
case 1:
return Math.floor(Math.random() * (max + 1));
break;
case 2:
return Math.floor(Math.random() * (max - min + 1) + min);
break;
case 3:
return (Math.random() * (max - min) + min).toFixed(decimalNum);
break;
default:
return Math.random();
break;
}
}
<!-- 在html代码中使用 -->
<li><span v-digital digital-min="398483" not-thousandth not-point addmin="2" addmax="5" time="1000"></span>人</li>
参数说明
在需要使用的dom元素上增加属性 v-digital
digital-min 表示增长的初始值
addmin 表示增加数量的最小值，默认为3
addmax 表示增加数量的最大值，默认为20
time 表示定时增加数量的时间间隔
not-thousandth 表示不需要进行千位分隔，默认是会对数字进行千位分隔处理，比如 “1234”会处理成"1,234"
not-point 表示不保留小数点，默认保留小数点两位
网友评论