用js写一个分次跑的跑马灯

最新推荐文章于 2024-01-22 19:19:52 发布

_whitewolf

最新推荐文章于 2024-01-22 19:19:52 发布

阅读量141

点赞数

分类专栏：封装组件

本文链接：https://blog.csdn.net/weixin_44025134/article/details/107664979

版权

封装组件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接看代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>跑马灯</title> 
<style> 
#box{
    background-color: darkgreen;
    width: 100%;
    height: 100px;
}
#demo
{
	width:100%;
	height:50px;
    color: #ffffff;
    font-size: 20px;
    position: relative;
}

@keyframes mymove
{
	from {left:-200px;}
	to {left:100%;}
}
</style>
</head>
<body style="margin: 0;padding: 0;">

<div id="box">

</div>

<script>

    var arr = ["测试11111111","测试222222222","测试3333333333"]
    var box = document.getElementById("box")

    var newDemo = document.createElement("div")
    // 初始化time和设置新结点的属性
    var time;
    decorateDom(newDemo)
	
	//先执行第一次
    function one(){
        newDemo.innerText = 1 + '.' +arr[0]
        box.appendChild(newDemo)
    }
    one()

    var i=0,second=1000;
    function a(t){
        t--
        if(t==0){ //当动画时间走到0秒时
            setTimeout(()=>{
                if(arr[i+1]!==undefined){
                    newDemo.innerText = i+2 +'.' + arr[i+1]
                    box.appendChild(newDemo)
                }
                i++
                if(i<arr.length){
                    // 拿i与数组长度比对，如果i小于数组长度，继续进行
                    a(time)
                }else if(i=arr.length){//等于则重置数据，重新跑
                    one()
                    i = 0;
                    t = time
                    a(time)
                }
            },second)
        }else{
            setTimeout(()=>{ //每次执行都要沿时执行
                a(t)
            },second)
        }
    }

    a(time)

    // 装饰dom
    function decorateDom(dom){
        dom.id = "demo"
        dom.style.animation = "mymove 3s infinite"
        dom.style.animationDirection = "reverse"
        time = parseInt(dom.style.animationDuration)
    }
</script>
</body>
</html>