原生js实现大屏数字上下滚动效果，支持随机多位数字

最新推荐文章于 2024-08-16 10:12:21 发布

爱吃果蔬的猫

最新推荐文章于 2024-08-16 10:12:21 发布

阅读量533

点赞数 1

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_53895518/article/details/137876014

版权

本文详细展示了如何用HTML、JavaScript和CSS在大屏项目中创建动态滚动的数字效果，包括随机数生成、元素定位和动画设置。

摘要由CSDN通过智能技术生成

在大屏项目中经常需要实现那种数字上下滚动的效果，普通的数字随机滚动在UI组件（例如View Design中）里，或者是countUp插件（Vue3数字滚动插件vue-countup-v3）

html代码👇
html部分只定义一个简单的容器，几个数字是靠js实现的，有更大的灵活性。

 <div class="container"></div>

js代码👇
注：本段代码是以原生js实现，若项目需要，可以自行转为Jquery形式或者Vue中的v-for生成

var computeNumber = [];
// 根据实际情况确定几位数
var digitNum = 5;
setComputeNum(getRandomNumber());

// 生成0-99999随机数
function getRandomNumber () {
    return Math.floor(Math.random() * Math.pow(10,digitNum));
};

function setComputeNum(num) {
    num = num.toString()
    if (num.length < digitNum) { 
        // 如未满5位数，在前面补位"0"
        num = '0' + num;
        setComputeNum(num);
    } else if (num.length === digitNum) {
        computeNumber = num.split('');
    }
}
for(let i = 0; i<computeNumber.length; i++){
    // 创建span节点            
    var spanParent = document.createElement("span");            
    var spanSon = document.createElement("span");            
    // 创建文本节点            
    var node = document.createTextNode("0123456789");       
    spanSon.appendChild(node);  
    spanParent.append(spanSon);
    spanParent.className = "box-item";
    document.getElementsByClassName("container")[0].append(spanParent);
}

css👇

.container{
    margin: 40px auto;
    text-align: center;
}
.box-item {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 82px;
    background: url("./../img/bg.png") no-repeat center center;
    background-size: 100% 100%;
    font-size: 62px;
    line-height: 82px;
    text-align: center;
    position: relative;
    writing-mode: vertical-lr;
    text-orientation: upright;
    overflow: hidden; /* 没有这个属性的话能看到全部数字上下滚动 */
}
.box-item span {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%,0);
    transition: transform 1s ease;
    letter-spacing: 10px;
    color: orange;
}

加入动画和定时器👇

var timer = setInterval(()=>{
    setComputeNum(getRandomNumber());
    setTransform();
},3000)

// 设置每一位数字的偏移
function setTransform() {
    let boxItem = document.getElementsByClassName("box-item");
    let spans = [];
    for(let i = 0;i<boxItem.length;i++){
        spans.push(boxItem[i].getElementsByTagName("span")[0]);
    }
    for (let index = 0; index < spans.length; index++) {
        let elem = spans[index];
        elem.style.transform = `translate(-50%, -${computeNumber[index] * 10}%)`;
    }
};