js数字滚动功能实现

最新推荐文章于 2024-07-22 17:43:07 发布

A_Brave

最新推荐文章于 2024-07-22 17:43:07 发布

阅读量1.6k

点赞数 2

分类专栏： js js功能特效文章标签： css javascript html

本文链接：https://blog.csdn.net/A_Brave/article/details/120439704

版权

js 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

js功能特效

2 篇文章 0 订阅

订阅专栏

项目中用到数字滚动特效，就写了个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.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>

如有问题可在下方留言，创作不易，如果觉得文章还不错，还请点赞支持一下，谢谢！！！

A_Brave

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
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-scal
复制链接

扫一扫

专栏目录