js实现跑马灯效果

image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }

        #i1{
            background-color: yellow;
            color: red;
            margin: 50px auto;
            font-size: 60px;
            /*width: 350px;*/
            text-align: center;
        }

        #i2{
            position: fixed;
            width: 100px;height: 30px;
            right: 20px;
            bottom: 20px;
            background-color: #60add5;
        }
    </style>
</head>
<body>
    <div id="i1" onclick="func();">学习前端你最棒</div>

    <script>
        function func() {
            var tag = document.getElementById('i1');
            var content = tag.innerText;
            var first = content.charAt(0);
            var last = content.substring(1, content.length);
            tag.innerText = last + first;
        }
        setInterval('func()', 1000);
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容