本文实例为大家分享了js实现数字滚动展示的具体代码,供大家参考,具体内容如下
效果图
html代码
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; style>
#,# tt {
边界:# ccc薄固体;
宽度:250 px;
高度:60 px;
显示:flex;
justify-content:空间;
对齐项目:中心;
字体大小:20 px;
}
.t-num {
高度:100%;
溢出:隐藏;/* background - color: # ccc。*/宽度:25 px;
行高:60 px;
text-align:中心;
}
.t-num-s {
显示:块;
高度:100%;
宽度:100%;/*边境:红色薄固体;*/}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=皌”比;
& lt;/div>
& lt; div id=皌t”比;
& lt;/div>
& lt; !——结构示例——比;
& lt; !——& lt; div>——比;
& lt; !——& lt; div类=癲ivClass祝辞& lt;跨类=皊panclass”在1 & lt;/span> & lt;/div>——比;
& lt; !——& lt; div类=癲ivClass祝辞& lt;跨类=皊panclass”在2 & lt;/span> & lt;/div>——比;
& lt; !——& lt; div类=癲ivClass祝辞& lt;跨类=皊panclass”在3 & lt;/span> & lt;/div>——比;
& lt; !——& lt; div类=癲ivClass祝辞& lt;跨类=皊panclass”在4 & lt;/span> & lt;/div>——比;
& lt; !——& lt;/div>——比;
& lt;/body>
& lt;/html>
& lt;脚本src=" https://www.yisu.com/zixun/index.js "祝辞& lt;/script>
& lt; script>
让num=12345.5//配置项p:滚动熟读,高度:数字容器的高度,spanclass:数字容器的类名,divClasss:跨度容器的类//numchange。配置({p: 5})。变化(“t”, num)
让t=numchange ()
t。变化(“t”, num)
setInterval()=比;{
num=math . random () * 100 + parseFloat (num)
num=num.toFixed (2)
t。变化(“t”, num)
}, 3000)
让num1=12345
让t1=numchange ()
t1。变化(tt, num1)
setInterval()=比;{
num1=方法(math . random() * 100) +方法(num1)
t1。变化(tt, num1)
}, 3000)
& lt;/script>
js代码
让numchange=function () {
让点='。'//数字容器高度
让身高=60//每次滚动距离/滚动速度
让p=3//数字spanclass
让spanClass=' t-num-s '//数字divclass
让divClass=' t-num '//让缓存={}
函数createDiv (id、num len paddingNum) {
让str="
(让我=0;我& lt;兰;我+ +){
str +=' & lt; div类=" $ {divClass} " id=" $ {id + i} "祝辞& lt;跨类=" $ {spanClass}”在$ {paddingNum===定义# 63;num[我]:paddingNum} & lt;/span> & lt;/div>”
}
返回str
}
函数initZero (id、计数){
. getelementbyid (id)。innerHTML=createDiv (id、零计数,0)
}
函数刷新(oldNum newNum, id) {
让len=newNum。长度- oldNum.length;
(让我=0;我& lt;兰;我+ +){
oldNum.unshift (“0”)
}
. getelementbyid (id)。innerHTML=createDiv (id、oldNum oldNum.length)
}
函数refresh2 (oldNum newNum, id) {
让len=oldNum。长度- newNum.length;
(让我=0;我& lt;兰;我+ +){
oldNum.shift ()
}
. getelementbyid (id)。innerHTML=createDiv (id、oldNum oldNum.length)
}
函数scrollNum (id、num顺序){
让h=num *高度
让e=. getelementbyid (id)
让t=setInterval()=比;{
让m=e.scrollTop;
m=m + p
如果(m比;h) {
clearInterval (t)
让cs=e.children
(让我=cs.length-2;我在=0;我(){
[我]e.removeChild (cs)
}
返回
}
e。scrollTop=m
},10)
}
函数createSpan (num) {
让跨度=document.createElement(跨度)
跨度。className=spanClass
跨度。innerText=num实现
返回跨度
}
函数appendNum (id、开始、结束){
让f=document.createDocumentFragment ()
让数=0
如果开始===结束,,isNaN(开始)){
返回0
}
如果(isNaN(开始),,! isNaN(结束)){
(让我=0;我& lt;=结束;我+ +){
f.appendChild (createSpan(我))
数+ +
}
. getelementbyid (id) .appendChild (f)
返回数
}
如果(! isNaN(开始),,isNaN(结束)){
(让我=开始+ 1;我& lt;=9;我+ +){
f.appendChild (createSpan(我))
数+ +
}
f.appendChild (createSpan (' . '))
数+ +
. getelementbyid (id) .appendChild (f)
返回数
}
如果开始& lt;){
(让我=开始+ 1;我& lt;=结束;我+ +){
f.appendChild (createSpan(我))
数+ +
}
}else if(开始比;){
(让我=开始+ 1;我& lt;=9;我+ +){
f.appendChild (createSpan(我))
数+ +
}
(让我=0;我& lt;=结束;我+ +){
f.appendChild (createSpan(我))
数+ +
}
其他}{
返回0
}
. getelementbyid (id) .appendChild (f)
返回数
}/* *
* @param id容器id
* @param num展示的数字
*/函数变化(id, num) {
console.log (num)
让strArr=num.toString () .split (");
让oldNum=缓存(id)//如果没有缓存,开始数字全部填充0
如果(! oldNum) {
strArr.length initZero (id)
oldNum=[]
其他}{
oldNum=缓存(id) .toString () .split (”)//如果新数字长,原来数字左侧填充0
如果(oldNum。长度& lt;strArr.length) {
刷新(oldNum strArr, id)//如果新数字短,原来数字左侧移除
如果(oldNum}其他。长度比;strArr.length) {
refresh2 (oldNum strArr, id)
}
}//循环比较每个数字差异,添加需要滚动的数字列
(让我=0,len=strArr.length;我& lt;兰;我+ +){
我们开始=oldNum[我]!==点& # 63;方法(oldNum[我]| | 0):oldNum[我]
我们结束=strArr[我]!==点& # 63;方法(strArr[我]| | 0):strArr[我]
让数=appendNum (id +我,开始,结束)
如果(计数比;0) {//数字滚动
scrollNum (id +我,我数+ 1)
}
}
缓存(id)=num
}
功能配置(参数){
如果(param.p) {
p=param.p
}
如果(param.height) {
身高=param.height
}
如果(param.spanClass) {
spanClass=param.spanClass
}
如果(param.divClass) {
divClass=param.divClass
}
返回滚动
}
让滚动={
null
null
null
null
null
null
null
null
