js数字滚动功能实现
生活随笔
收集整理的這篇文章主要介紹了
js数字滚动功能实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
項目中用到數字滾動特效，就寫了個demo記錄一下
效果：
代碼實現：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>數字滾動</title> </head> <style>body{background-color: rgba(4, 10, 36, 1);}li {list-style: none;}.box {width: 800px;margin: 200px auto;}.box ul {display: flex;}.box ul li {position: relative;width: 50px;height: 50px;background: rgba(70, 97, 181, 0.3);border: 1px solid #4661B5;margin-right: 10px;writing-mode: vertical-lr; /*垂直展示 */text-orientation: upright; /* 文字垂直 */user-select: none; /* 禁止文字選取 */overflow: hidden;}.box ul li span{position: absolute;top: 12px;left: 50%;letter-spacing: 16px;font-size: 28px;font-family: Source Han Sans CN;color: #FFD426;transition: transform 1s ease-in-out;transform: translate(-50%, 0);} </style> <body><div class="box"><ul></ul></div> </body> </html> <script>var ml = '';var boxLi = document.querySelector('.box ul')// 放元素默認9個數字框for(var g = 0; g < 9; g++ ){ml+='<li><span>0123456789</span></li>'}boxLi.innerHTML = ml;function roll(){ var testNumber = Math.round(Math.random()*10000000) + '' // 取7位隨機數模擬數據 testNumber = testNumber.split('')// 數值不足9位的話前面補零if(testNumber.length < 9){var j = 9 - testNumber.lengthfor(var i = 0; i < j; i++ ){testNumber.unshift('0')}}var items = document.querySelectorAll('.box ul li span')for(var k = 0; k < items.length; k++){item = items[k]console.log(item)item.style.transform = `translate(-50%,-${testNumber[k]+'0%'})`}} setInterval(()=>{roll() },2000) </script>如有問題可在下方留言，創作不易，如果覺得文章還不錯，還請點贊支持一下，謝謝！！！
總結
以上是生活随笔為你收集整理的js数字滚动功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习笔记（2）：模拟登陆抽屉网（ajax
- 下一篇： 怎样传文件到虚拟服务器,Vmware虚拟