JS实现字体逐个显示

最新推荐文章于 2023-11-02 18:48:00 发布

小田同學

最新推荐文章于 2023-11-02 18:48:00 发布

阅读量7k

点赞数

分类专栏： JavaScript 文章标签：函数 javascript 字体

本文链接：https://blog.csdn.net/Sabrina_TSM/article/details/51482326

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在使用PPT时，有人会将文字做成逐字出现的动画效果，那么如何在网页上实现同样效果呢？其实就是采用定时器的方法。
如下代码所示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
            var story = document.getElementById('word');
            var s = document.getElementById('show');
            var i = 0;
            timer=setInterval(function(){
                s.innerHTML=story.innerHTML.substring(0,i);
                i++;
                if(s.innerHTML==story.innerHTML){
                    clearInterval(timer);
                }
            },200);
        }
    </script>
</head>
<body>
    <p id="word" style="display:none;">从前有座山，山里有座庙，庙里的和尚讲故事，讲的啥故事；从前有座山。。。</p>
    <p id="show"></p>
</body>
</html>

当逐字显示的内容与id=word内的内容相同时，则清除掉定时器。

小田同學

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JS实现字体逐个显示

在使用PPT时，有人会将文字做成逐字出现的动画效果，那么如何在网页上实现同样效果呢？其实就是采用定时器的方法。如下代码所示：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){
复制链接

扫一扫

专栏目录