<!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.length
    for(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>