打字机效果

最新推荐文章于 2023-01-16 20:30:00 发布

碵蝎

最新推荐文章于 2023-01-16 20:30:00 发布

阅读量214

点赞数

分类专栏：工具函数文章标签： javascript

本文链接：https://blog.csdn.net/qq408896436/article/details/122499966

版权

工具函数专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字机效果</title>
</head>

<body>
    <div id="content"></div>
    <script>
        function typeWriter(config) {
            let index = 0;
            const id = setInterval(() => {
                const s = config.data.text.substr(0, index);
                config.el.innerHTML = `${s} |`;
                index++;
                if (s.length >= config.data.text.length) {
                    clearInterval(id);
                    config.el.innerHTML = config.el.innerHTML.substr(0, config.el.innerHTML.length - 1);
                }
            }, config.data.speed || 100);
        }

        typeWriter({
            el: document.getElementById('content'),
            data: {
                text: 'JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。在1995年时，由Netscape公司的BrendanEich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。',
                speed: 50
            }
        });
    </script>
</body>

</html>

碵蝎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
打字机效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>打字机效果</title></head><body> <div id="c.
复制链接

扫一扫