JavaScript跑马灯

最新推荐文章于 2023-09-28 14:48:16 发布

m15712884682

最新推荐文章于 2023-09-28 14:48:16 发布

阅读量227

点赞数

分类专栏： javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/m15712884682/article/details/110285212

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <style>
            #div1{
                width:20px;
                height:20px;
                background-color: red;
                position:relative;
            }
        </style>
    </head>

    <body>
    <div id='div1'></div>
    </body>
    <script type="text/javascript">

    //跑火车
    // var div1 = document.getElementById('div1');
        //setTimeout() 设置 20*20 -> 200*20 用时3秒
        var MAX = 400;//div的最大宽度
        var EDGE = 20;//div的最小宽
        var LENGTH = MAX - EDGE;//div火车跑的长度
        var INTERVAL = 10;//时间间隔
        var PERIOD = 3000;//总时长
        var SPEED = Math.floor(LENGTH/(PERIOD/INTERVAL));//每次增长的长度
        function startLonger(){
            var div1 = document.getElementById('div1');
            var width = div1.clientWidth;
            if(width<MAX){
                width += SPEED;
                div1.style.width = width+'px';
                setTimeout(startLonger,INTERVAL);
            }else{
                div1.style.width = MAX+'px';
                setTimeout(shortLonger,INTERVAL);
            }
        }
        setTimeout(startLonger,INTERVAL);
        function shortLonger(){
            var div1 = document.getElementById('div1');
            var width = div1.clientWidth;
            if(width>EDGE){
                width -= SPEED;
                div1.style.width = width+'px';
                div1.style.left = (MAX-width)+'px';
                setTimeout(shortLonger,INTERVAL);
            }else{
                div1.style.width = EDGE+'px';
            }
        }
    </script>
</html>

m15712884682

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript跑马灯

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style> #div1{ width:20px; height:20px; background-color: red; position:rela...
复制链接

扫一扫

专栏目录