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);
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 = und(Math.random()*10000000)+''// 取7位随机数模拟数据
testNumber = testNumber.split('')
// 数值不⾜9位的话前⾯补零
if(testNumber.length <9){
var j =9- testNumber.length
for(var i =0; i < j; i++){
testNumber.unshift('0')
}
}
html滚动效果代码var items = document.querySelectorAll('.box ul li span')
for(var k =0; k < items.length; k++){
item = items[k]
console.log(item)
ansform =`translate(-50%,-${testNumber[k]+'0%'})`
}
}
setInterval(()=>{
roll()
},2000)
</script>
如有问题可在下⽅留⾔，创作不易，如果觉得⽂章还不错，还请点赞⽀持⼀下，谢谢

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。