html代码数字上下滚动特效,js实现数字滚动特效

本文实例为大家分享了js实现数字滚动展示的具体代码，供大家参考，具体内容如下

Title

#t,#tt{

border: #ccc thin solid;

width: 250px;

height: 60px;

display: flex;

justify-content: space-around;

align-items: center;

font-size: 20px;

}

.t-num{

height: 100%;

overflow: hidden;

/*background-color: #ccc;*/

width: 25px;

line-height: 60px;

text-align: center;

}

.t-num-s{

display: block;

height: 100%;

width: 100%;

/*border: red thin solid;*/

}

let num = 12345.5

//配置项 p:滚动熟读，height:数字容器的高度，spanclass：数字容器的classname,divClasss: span容器的class

// numchange.config({p: 5}).change('t',num)

let t = numchange()

t.change('t',num)

setInterval(() => {

num = Math.random() * 100 + parseFloat(num)

num = num.toFixed(2)

t.change('t',num)

},3000)

let num1 = 12345

let t1 = numchange()

t1.change('tt',num1)

setInterval(() => {

num1 = parseInt(Math.random() * 100) + parseInt(num1)

t1.change('tt',num1)

},3000)

js代码

let numchange = function (){

let point = '.'

// 数字容器高度

let height = 60

// 每次滚动距离/滚动速度

let p = 3

// 数字spanclass

let spanClass = 't-num-s'

// 数字divclass

let divClass = 't-num'

//

let cache = {}

function createDiv(id,num,len,paddingNum){

let str = ''

for (let i = 0; i < len; i++) {

str += `

${paddingNum === undefined?num[i]:paddingNum}

`

}

return str

}

function initZero(id,count){

document.getElementById(id).innerHTML = createDiv(id,null,count,0)

}

function refresh(oldNum,newNum,id){

let len = newNum.length - oldNum.length;

for (let i = 0; i < len; i++) {

oldNum.unshift('0')

}

document.getElementById(id).innerHTML = createDiv(id,oldNum,oldNum.length)

}

function refresh1(oldNum,id){

let len = oldNum.length - newNum.length;

for (let i = 0; i < len; i++) {

oldNum.shift()

}

document.getElementById(id).innerHTML = createDiv(id,oldNum.length)

}

function scrollNum(id,order){

let h = num * height

let e = document.getElementById(id)

let t = setInterval(() => {

let m = e.scrollTop;

m = m + p

if(m > h){

clearInterval(t)

let cs = e.children

for (let i = cs.length-2; i >= 0; i--) {

e.removeChild(cs[i])

}

return

}

e.scrollTop = m

},10)

}

function createSpan(num){

let span = document.createElement('span')

span.className = spanClass

span.innerText = num

return span

}

function appendNum(id,start,end){

let f = document.createDocumentFragment()

let count = 0

if(start === end && isNaN(start)){

return 0

}

if(isNaN(start) && !isNaN(end)){

for (let i = 0; i <= end; i++) {

f.appendChild(createSpan(i))

count++

}

document.getElementById(id).appendChild(f)

return count

}

if(!isNaN(start) && isNaN(end)){

for (let i = start+1; i <= 9; i++) {

f.appendChild(createSpan(i))

count++

}

f.appendChild(createSpan('.'))

count++

document.getElementById(id).appendChild(f)

return count

}

if(start < end){

for (let i = start+1; i <= end; i++) {

f.appendChild(createSpan(i))

count++

}

}else if(start > end){

for (let i = start+1; i <= 9; i++) {

f.appendChild(createSpan(i))

count++

}

for (let i = 0; i <= end; i++) {

f.appendChild(createSpan(i))

count++

}

}else{

return 0

}

document.getElementById(id).appendChild(f)

return count

}

/**

* @param id 容器id

* @param num 展示的数字

*/

function change(id,num){

console.log(num)

let strArr = num.toString().split('');

let oldNum = cache[id]

// 如果没有缓存，开始数字全部填充0

if(!oldNum){

initZero(id,strArr.length)

oldNum = []

}else{

oldNum = cache[id].toString().split('')

// 如果新数字长，原来数字左侧填充0

if(oldNum.length < strArr.length){

refresh(oldNum,strArr,id)

// 如果新数字短，原来数字左侧移除

}else if(oldNum.length > strArr.length){

refresh1(oldNum,id)

}

}

// 循环比较每个数字差异，添加需要滚动的数字列

for (let i = 0,len = strArr.length; i < len; i++) {

let start = oldNum[i] !== point ? parseInt(oldNum[i]||0) : oldNum[i]

let end = strArr[i] !== point ? parseInt(strArr[i]||0) : strArr[i]

let count = appendNum(id+i,end)

if(count > 0){

// 数字滚动

scrollNum(id+i,i+1)

}

}

cache[id] = num

}

function config(param){

if(param.p){

p = param.p

}

if(param.height){

height = param.height

}

if(param.spanClass){

spanClass = param.spanClass

}

if(param.divClass){

divClass = param.divClass

}

return scroll

}

let scroll = {

change: change,config: config

}

return scroll

}

遗留问题：setInterval方法在切换页面后，会变快。解决方案1：用setTimeout代替setInterval。2.requestAnimFrame

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

总结

以上是编程之家为你收集整理的js实现数字滚动特效全部内容，希望文章能够帮你解决js实现数字滚动特效所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！