TypeScript|TypeScript 简单实用数字动画 TypeScript简单实用数字动画

先上效果图：

文章图片
GIF 2020-1-6 15-58-38.gif
一、首先安装TypeScript，在node上执行npm install -g typescript命令。
二、ts文件需要我们每次编写完成以后都要执行一下命令去编译它，才会生成一个js文件
因此我们执行tsc -init命令，在项目中生成一个json文件，并对json文件进行修改。

文章图片
image.png
三、在scr中创建html文件，引入生成后的文件。

文章图片
image.png
四、编写ts文件，并进行编译。我们执行tsc -w命令就会自动对我们保存的ts代码进行编译，并根据json文件中的配置进行打包分配。
五、展示TypeScript代码

/*方法说明 *@method fmoney 保留两位小数 *@for 所属类名 *@param {Number} s需要保留的数据 *@param {Number} n保留几位小数，0-20之间 *@return {string} 返回数据 */ function fmoney(s:(number|string), n:number=2):string { s = s||0 n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''; var l = s.split('.') [0].split('').reverse(), r = s.split('.') [1]; vart = ''; for (var i = 0; i < l.length; i++){ t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : ''); } return t.split('').reverse().join('') + '.' + r; }; //接口关于numberAnimation 函数中第一个变量的声明 interface optionObject { time: number, finalNum: number, stepTime: number, digits:number } /*方法说明 *@method numberAnimation 数字自动变化 *@for 所属类名 *@param {Object} option 配置项 option:{ time:总时间 finalNum:数字 stepTime:调速器 digits:默认开始数据几位数 } *@return {string} 返回数据 */function numberAnimation(option:optionObject,target:string):any{ option=option||{}; let $this=document.getElementById(target); if (!$this) { alert("未找到该结构！"); return } let time=option.time||0; //总耗时 let finalNum=option.finalNum||0; //最终的数据 let stepTime=option.stepTime||100; //调速器，改变stepTime，可以改变数字改变的速率 let digits=option.digits||2; //默认开始数据几位数 let temp=String(Math.pow(10,digits)).replace("1",''); let l=temp.split("").reverse(); vart = ''; for (var i = 0; i < l.length; i++){ t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : ''); } $this.innerHTML=t.split('').reverse().join('') + '.00' ; let step=finalNum/(time/stepTime); let count=0; //计时器 let timer=setInterval(()=>{ count=Number(count)+step; if(count>=finalNum){ clearInterval(timer); count=finalNum; } if ($this) { $this.innerHTML=fmoney(count); } },30) } let btn = document.querySelector("button"); if (btn) { btn.addEventListener("click",()=>{ numberAnimation({time:1500,finalNum:382671.89,stepTime:50,digits:5},'time'); }) }

【TypeScript|TypeScript 简单实用数字动画】最后编译生成的js文件展示如下

"use strict"; /*方法说明 *@method fmoney 保留两位小数 *@for 所属类名 *@param {Number} s需要保留的数据 *@param {Number} n保留几位小数，0-20之间 *@return {string} 返回数据 */ function fmoney(s, n) { if (n === void 0) { n = 2; } s = s || 0; n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''; var l = s.split('.')[0].split('').reverse(), r = s.split('.')[1]; var t = ''; for (var i = 0; i < l.length; i++) { t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : ''); } return t.split('').reverse().join('') + '.' + r; } ; function numberAnimation(option, target) { option = option || {}; var $this = document.getElementById(target); if (!$this) { alert("未找到该结构！"); return; } var time = option.time || 0; //总耗时 var finalNum = option.finalNum || 0; //最终的数据 var stepTime = option.stepTime || 100; //调速器，改变stepTime，可以改变数字改变的速率 var digits = option.digits || 2; //默认开始数据几位数 var temp = String(Math.pow(10, digits)).replace("1", ''); var l = temp.split("").reverse(); var t = ''; for (var i = 0; i < l.length; i++) { t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : ''); } $this.innerHTML = t.split('').reverse().join('') + '.00'; var step = finalNum / (time / stepTime); var count = 0; //计时器 var timer = setInterval(function () { count = Number(count) + step; if (count >= finalNum) { clearInterval(timer); count = finalNum; } if ($this) { $this.innerHTML = fmoney(count); } }, 30); } var btn = document.querySelector("button"); if (btn) { btn.addEventListener("click", function () { numberAnimation({ time: 1500, finalNum: 382671.89, stepTime: 50, digits: 5 }, 'time'); }); }