企业官网微信小程序_js完成数字滚动特效

发布时间:2021-01-06 16:20 作者:jianzhan

摘要: js完成数据翻转动画特效 本文关键为大伙儿详尽详细介绍了js完成数据翻转动画特效,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣的小伙子伴们能够

js实现数字滚动特效       这篇文章主要为大家详细介绍了js实现数字滚动特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果图

html代码

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Title /title 
 style 
 #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;*/
 /style 
 /head 
 body 
 div id="t" 
 /div 
 div id="tt" 
 /div 
 !--结构示例-- 
 !-- div -- 
 !-- div span 1 /span /div -- 
 !-- div span 2 /span /div -- 
 !-- div span 3 /span /div -- 
 !-- div span 4 /span /div -- 
 !-- /div -- 
 /body 
 /html 
 script src="index.js" /script 
 script 
 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)

for (let i = 0; i len; i++) { str += ` div id="${id+i}" span ${paddingNum === undefined num[i]:paddingNum} /span /div ` 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, newNum, id){ let len = oldNum.length - newNum.length; for (let i = 0; i len; i++) { oldNum.shift() document.getElementById(id).innerHTML = createDiv(id,oldNum,oldNum.length) function scrollNum(id, num, 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 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 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 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, strArr, 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, start, end) if(count 0){ // 数字滚动 scrollNum(id+i, count, 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

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


  • 中国航空公司互连网制造

    “我国航空公司企业互联网生产制造制造行业处于爆发式提升前夜,未来提升发展趋势发展潜力巨大。”6月22日,修仙航空公司企业电子器件器件商务接待招待较为比较有限公司经理负

  • 微信小程序怎么免费制作

    在网上有编码包,能够免费下载了玩一玩,但是风险性是大的,一分价格一分货。 能够考虑到拖动式的微信小程序制作服务平台,可视性化,实际操作方便快捷,收费标准实际上都

  • 微信公众号迅速申请注册

    模拟题目:手机微信微信公众号快速申请办理申请注册并认证手机微信微信小程序 为方便快捷手机微信微信公众号方便快捷联接手机微信微信小程序,并在各功效中运用手机微信微信小

  • 手机微信微信小程序发布

    服务供应商的手机微信微信小程序审核“加速体系”早就公布了2个月了,许多服务供应商早就尝到审核加速的“幸福快乐开心”。但一般开发设计设计方案者要临时性性公布、遇到突发

  • 凡科抠图利用调整边缘工

    photoshop运用调节边沿专用工具迅速抠取秀发 公布 创作者:佈佈 我想评价这篇实例教程教PS学习培训者们应用PS调节边沿专用工具迅速抠取秀发,实例教程难度系数一般,可是十分