实现间隔几秒number动态递增变化（整数小数）
发布时间：2024年01月13日
一、效果：
测试整数
测试小数
二、需求和效果说明：
三、代码
主页面
<template>
<div>
<count-to :startVal="startVal" :endVal="endVal" :duration="numRollTime"></count-to><span class="unit">件</span>
</div>
</template>
<script>
export default {
name: "showPage",
props:['getNumber'],
data() {
return {
startVal:0,
endVal:0,
numRollTime:2000,
levelTit:'省',
timer1:null
};
},
beforeDestroy() {
if(this.timer1){
clearInterval(this.timer1)
}
},
watch: {
getNumber:{
handler(val) {
if(this.timer1){
clearInterval(this.timer1)
}
this.startVal = Number(this.getNumber.oldData);
this.endVal = Number(this.getNumber.oldData);
let data = parseInt(this.getNumber.newData - this.getNumber.oldData)
this.getNum(data,this.endVal,'startVal','endVal');
},
deep:true
},
},
methods: {
//获取随机数整数
getNum(sectionData,startVal,startProp,endProp){
//随机5000内的数字 相加等于 5000
var arr = new Array(300).fill(0)
for(var i=0;i<sectionData;i++){
var num = parseInt(Math.random()*300)
// var num = Number((Math.random()*10).toFixed(2))
arr[num] ++
}
// console.log(arr)
//从startVal开始 数组中每前2项相加 获得的 新数组
let sum = startVal;
let obj=[];
for (let j = 0; j < arr.length; j++) {
sum += arr[j];
obj.push(sum)
}
// console.log(obj)
//拆成奇数 跟 偶数 下标
let oddArr = []; // 存放奇数下标元素的数组
let evenArr = []; // 存放偶数下标元素的数组
for (let k = 0; k < obj.length; k++) {
if (k % 2 === 0) {
evenArr.push(obj[k]);
} else {
oddArr.push(obj[k]);
}
}
// console.log('奇', oddArr,'偶', evenArr)
let countNum=0
this.timer1 =setInterval((startProp,endProp)=>{
if(countNum >= 150){
clearInterval(this.timer1)
}else{
this[startProp] = evenArr[countNum];
this[endProp] = oddArr[countNum];
countNum++;
}
},4000,startProp,endProp);
},
},
};
</script>组件.vue
<template>
<div class="numComponents">
<count-to v-if="isDecimals" :startVal="startVal" :decimals="2" :endVal="endVal" :duration="numRollTime"></count-to>
<count-to v-else :startVal="startVal" :endVal="endVal" :duration="numRollTime"></count-to>
<span class="unit">{{ unit }}</span>
</div>
</template>
<script>
export default {
name: "numComponents",
props:['numberParam'],
data() {
return {
startVal:0,
endVal:0,
numRollTime:2000, //数值变化时间
unit:'人次',
isDecimals:false, //是否有小数
startXVal:0,
endXVal:0,
isZero:false, //补0
isZero1:false, //结束值补0
//定时器
numTime:null,
numXTime:null
};
},
beforeDestroy() {
},
mounted() {
},
watch: {
numberParam:{
handler(val) {
if(this.numTime){
clearInterval(this.numTime)
}
if(this.numXTime){
clearInterval(this.numXTime)
}
this.unit = this.numberParam.unit;
this.isDecimals = this.numberParam.isDecimals;
if(this.numberParam.isDecimals){
this.startVal = Number(this.numberParam.startVal);
this.endVal = Number(this.numberParam.startVal);
let data = Math.floor(Number(this.numberParam.endVal)*100) - Math.floor(Number(this.numberParam.startVal)*100)
console.log(data)
let endData = Number(this.numberParam.endVal)
this.getDecimals(data,this.endVal,'startVal','endVal',endData);
}else{
this.startVal = Math.floor(this.numberParam.startVal);
this.endVal = Math.floor(this.numberParam.startVal);
let data = Math.floor(this.numberParam.endVal) - Math.floor(this.numberParam.startVal)
let endData = Math.floor(this.numberParam.endVal)
this.getNum(data,this.endVal,'startVal','endVal',endData);
}
},
deep:true,
immediate:true
},
},
methods: {
//获取随机数整数
getNum(sectionData,startVal,startProp,endProp,endVal){
//随机5000内的数字 相加等于 5000
var arr = new Array(300).fill(0)
for(var i=0;i<sectionData;i++){
var num = parseInt(Math.random()*300)
// var num = Number((Math.random()*10).toFixed(2))
arr[num] ++
}
// console.log(arr)
//从startVal开始 数组中每前2项相加 获得的 新数组
let sum = startVal;
let obj=[];
for (let j = 0; j < arr.length; j++) {
sum += arr[j];
obj.push(sum)
}
// console.log(obj)
//拆成奇数 跟 偶数 下标
let oddArr = []; // 存放奇数下标元素的数组
let evenArr = []; // 存放偶数下标元素的数组
for (let k = 0; k < obj.length; k++) {
if (k % 2 === 0) {
evenArr.push(obj[k]);
} else {
oddArr.push(obj[k]);
}
}
// console.log('奇', oddArr,'偶', evenArr)
let countNum=0
this.numTime =setInterval((startProp,endProp,endVal)=>{
if(countNum >= 149){
this[endProp] = endVal
clearInterval(this.numTime)
}else{
this[startProp] = evenArr[countNum];
this[endProp] = oddArr[countNum];
countNum++;
}
},6000,startProp,endProp,endVal);
},
//获取后2位随机小数
getDecimals(sectionData,startVal,startProp,endProp,endVal){
//随机5000内的数字 相加等于 5000
var arr = new Array(300).fill(0)
for(var i=0;i<sectionData;i++){
var num = parseInt(Math.random()*300)
// var num = Number((Math.random()*10).toFixed(2))
arr[num] ++
}
// console.log(arr)
//从startVal开始 数组中每前2项相加 获得的 新数组
let sum = startVal*100;
let obj=[];
for (let j = 0; j < arr.length; j++) {
sum += arr[j];
obj.push(sum)
}
// console.log(obj)
//拆成奇数 跟 偶数 下标
let oddArr = []; // 存放奇数下标元素的数组
let evenArr = []; // 存放偶数下标元素的数组
for (let k = 0; k < obj.length; k++) {
if (k % 2 === 0) {
evenArr.push(obj[k]/100);
} else {
oddArr.push(obj[k]/100);
}
}
console.log('奇', oddArr,'偶', evenArr)
let countNum=0
this.numTime =setInterval((startProp,endProp,endVal)=>{
if(countNum >= 149){
this[endProp] = endVal
clearInterval(this.numTime)
}else{
this[startProp] = evenArr[countNum];
this[endProp] = oddArr[countNum];
countNum++;
}
},6000,startProp,endProp,endVal);
},
},
};
</script>
<style type="text/css" lang="less" scoped="scoped">
.numComponents{
color:#FDAD4D;
font-size:20px;
.unit{
font-size: 14px;
}
}
</style>
四、补充依赖：
补充老代码
<template>
<div class="numComponents">
<count-to :startVal="startVal" :endVal="endVal" :duration="numRollTime"></count-to>
<span v-if="isDecimals" style="position: relative;left:-5px;">
.<span v-if="isZero">0</span><count-to style="position: relative;left:-5px;" :startVal="startXVal" separator='' :endVal="endXVal" :duration="numRollTime"></count-to>
</span>
<span class="unit" :class="isDecimals? 'activeClass': ''" >{{ unit }}</span>
</div>
</template>
<script>
export default {
name: "numComponents",
props:['numberParam'],
data() {
return {
startVal:0,
endVal:0,
numRollTime:2000, //数值变化时间
unit:'人次',
isDecimals:false, //是否有小数
startXVal:0,
endXVal:0,
isZero:false, //补0
isZero1:false, //结束值补0
//定时器
numTime:null,
numXTime:null
};
},
beforeDestroy() {
},
mounted() {
},
watch: {
numberParam:{
handler(val) {
if(this.numTime){
clearInterval(this.numTime)
}
if(this.numXTime){
clearInterval(this.numXTime)
}
this.unit = this.numberParam.unit;
this.isDecimals = this.numberParam.isDecimals;
this.startVal = Math.floor(this.numberParam.startVal);
this.endVal = Math.floor(this.numberParam.startVal);
let data = Math.floor(this.numberParam.endVal) - Math.floor(this.numberParam.startVal)
let endData = Math.floor(this.numberParam.endVal)
this.getNum(data,this.endVal,'startVal','endVal',endData);
//小数
if(this.numberParam.isDecimals){
if((this.numberParam.startVal !==null && this.numberParam.startVal.indexOf(".") !== -1) || (this.numberParam.endVal !==null && this.numberParam.endVal.indexOf(".") !== -1)){
let param1 = this.numberParam.startVal;
let param2 = this.numberParam.endVal;
let y1 = param1.indexOf(".") + 1;
let y2 = param2.indexOf(".") + 1;
let x1 = param1.indexOf(".") + 1;
let x2 = param2.indexOf(".") + 1;
//开始小数点后一位为0，补个0
if(param1[x1] == 0){
this.isZero = true;
}
//结束小数点后一位为0，补个0
if(param2[x2] == 0){
this.isZero1 = true;
}
this.startXVal = y1 !== 0 ? Number(param1.substring(y1,param1.length)) : 0;
//开始展示的是显示第一次的结束值所以 要跟开始值相同
this.endXVal = y1 !== 0 ? Number(param1.substring(y1,param1.length)) : 0;
//endxiaoshu 最后暂停显示 的 结束值
let endXiaoshu = y2 !== 0 ? Number(param2.substring(y2,param2.length)) : 0;
let dataX = Math.floor(endXiaoshu - this.startXVal)
// console.log("data",data)
if(data == 0){
this.getDecimalsX(dataX,endXiaoshu,this.endXVal,'startXVal','endXVal','isZero','isZero1');
}else{
this.getDecimals(endXiaoshu,'startXVal','endXVal','isZero','isZero1');
}
}
}
},
deep:true,
immediate:true
},
},
methods: {
//获取随机数整数
getNum(sectionData,startVal,startProp,endProp,endVal){
//随机5000内的数字 相加等于 5000
var arr = new Array(300).fill(0)
for(var i=0;i<sectionData;i++){
var num = parseInt(Math.random()*300)
// var num = Number((Math.random()*10).toFixed(2))
arr[num] ++
}
// console.log(arr)
//从startVal开始 数组中每前2项相加 获得的 新数组
let sum = startVal;
let obj=[];
for (let j = 0; j < arr.length; j++) {
sum += arr[j];
obj.push(sum)
}
// console.log(obj)
//拆成奇数 跟 偶数 下标
let oddArr = []; // 存放奇数下标元素的数组
let evenArr = []; // 存放偶数下标元素的数组
for (let k = 0; k < obj.length; k++) {
if (k % 2 === 0) {
evenArr.push(obj[k]);
} else {
oddArr.push(obj[k]);
}
}
// console.log('奇', oddArr,'偶', evenArr)
let countNum=0
this.numTime =setInterval((startProp,endProp,endVal)=>{
if(countNum >= 149){
this[endProp] = endVal
clearInterval(this.numTime)
}else{
this[startProp] = evenArr[countNum];
this[endProp] = oddArr[countNum];
countNum++;
}
},6000,startProp,endProp,endVal);
},
//获取后2位随机小数
getDecimals(endXVal,startProp,endProp,zeroProp,zeroProp1){
var arr = []
for(var i=0;i<300;i++){
arr[i] = Math.floor(Math.random() * 100)
}
// console.log(arr)
//拆成奇数 跟 偶数 下标
let oddArr = []; // 存放奇数下标元素的数组
let evenArr = []; // 存放偶数下标元素的数组
for (let k = 0; k < arr.length; k++) {
if (k % 2 === 0) {
evenArr.push(arr[k]);
} else {
oddArr.push(arr[k]);
}
}
// console.log('奇', oddArr,'偶', evenArr)
let countNum=0
this.numXTime =setInterval((endXVal,startProp,endProp,zeroProp,zeroProp1)=>{
if(countNum >= 149){
// countNum = 0;
this[startProp] = evenArr[countNum];
if(this[zeroProp1]){
this[zeroProp] = true;
}
this[endProp] = endXVal;
clearInterval(this.numXTime)
}else{
this[startProp] = evenArr[countNum];
this[endProp] = oddArr[countNum];
this[zeroProp] = false;
countNum++;
}
},6000,endXVal,startProp,endProp,zeroProp,zeroProp1);
},
//获取后2位随机小数 特殊情况(整数相同)
getDecimalsX(sectionData,endXVal,startXVal,startProp,endProp,zeroProp,zeroProp1){
//随机内的数字
console.log(sectionData)
var arr = new Array(300).fill(0)
for(var i=0;i<sectionData;i++){
var num = parseInt(Math.random()*300)
// var num = Number((Math.random()*10).toFixed(2))
arr[num] ++
}
console.log(arr)
//从startVal开始 数组中每前2项相加 获得的 新数组
let sum = startXVal;
let obj=[];
for (let j = 0; j < arr.length; j++) {
sum += arr[j];
obj.push(sum)
}
// console.log(obj)
//拆成奇数 跟 偶数 下标
let oddArr = []; // 存放奇数下标元素的数组
let evenArr = []; // 存放偶数下标元素的数组
for (let k = 0; k < obj.length; k++) {
if (k % 2 === 0) {
evenArr.push(obj[k]);
} else {
oddArr.push(obj[k]);
}
}
// console.log('奇', oddArr,'偶', evenArr)
let countNum=0
this.numXTime =setInterval((endXVal,startProp,endProp,zeroProp,zeroProp1)=>{
if(countNum >= 149){
// countNum = 0;
this[startProp] = evenArr[countNum];
if(this[zeroProp1]){
this[zeroProp] = true;
}
this[endProp] = endXVal;
clearInterval(this.numXTime)
}else{
this[startProp] = evenArr[countNum];
this[endProp] = oddArr[countNum];
if(oddArr[countNum] >= 10){
this[zeroProp] = false;
}else{
this[zeroProp] = true;
}
countNum++;
}
},6000,endXVal,startProp,endProp,zeroProp,zeroProp1);
},
},
};
</script>
<style type="text/css" lang="less" scoped="scoped">
.numComponents{
color:#FDAD4D;
font-size:20px;
.unit{
font-size: 14px;
}
.activeClass{
position: relative;
left:-10px;
}
}
</style>
文章来源:https://blog.csdn.net/xiuxialala/article/details/135459225
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
最新文章
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- 【正点原子STM32连载】 第二十八章 PVD电压监控实验摘自【正点原子】APM32E103最小系统板使用指南
- 试用强大的百度智能云【AI原生应用工作台】实现《毛泽东传问答》实操记录
- freeswitch智能外呼系统搭建流程
- 无监督学习 - 关联规则学习（Association Rule Learning）
- （每日持续更新）jdk api之FileInputStream基础、应用、实战
- Python实现数据库导出Excel并动态化sql时间
- useState语法讲解
- 数字化车间推动制造业生产创新
- 关于库函数和自定义函数
- Zabbix监控（2）