h5跑马灯文字效果

无名之悲

已于 2022-04-18 17:21:20 修改

阅读量642

点赞数

文章标签： html5

于 2022-04-18 16:10:40 首次发布

本文链接：https://blog.csdn.net/weixin_52554179/article/details/124252139

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑马灯文字效果</title>
    <style>
       div{
        width: 500px;
        height: 150px;
       background: pink;
       color: white;
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       margin: auto;
       } 
       span{
        display: none;
       }
       p{
         font-size: 25px;
        text-align: center;
        display: block;
        padding-top: 30px;
       }
    </style>
</head>
<body>
    <div >
        <span id ='word' >ヾ(◍°∇°◍)ﾉﾞ</span> 
        <p id="show_word"></p>
    </div>
</body>
<script>
    var index=0;
    var word=document.getElementById('word').innerText;//获取id为word中的标签内容
    function type(){
        document.getElementById("show_word").innerText=word.substring(0,index);//从下标0开始依次取字符串字串，逐个赋给id为show_word的标签。
        index++;

        if(index==word.length+1){//如果index 长度超过word标签中内容长度，index重置为0，重新取字符串子串。
            return index=0;      //substring 函数左闭右开，所以word.length+1才能取到整个长度。
        }

    }
    setInterval(type,500);
</script>
</html>

无名之悲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5跑马灯文字效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>跑马灯文字效果</title> <style> div{ width:.
复制链接

扫一扫