脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript打字机

基于JavaScript实现惊艳的打字机效果

 更新时间：2024年03月20日 10:57:24   作者：哇子学代码  
这篇文章主要为大家详细介绍了如何使用JavaScript打造惊艳打字机效果,让你的文字生动跃动,感兴趣的小伙伴可以跟随小编一起学习一下

先准备一个Html的模版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: black;
            color: white;
        }
        #switch-box {
            color: #0cc4fb;
        }
    </style>
</head>
<body>
    我要成为
    
    <span id="switch-box"></span>
    
    高手
</body>
</html>

在switch-box中实现打字效果，得利用js，首先定义一个字符串数组，用于在打字机中切换文字，然后定义一个函数将数组中的字放到内容中，每次切换后索引+1，然后循环调用这个函数,当索引大于数组长度的时候，把索引重新归0

	const stringArray = ['C++','Go','Java','Js','PHP']
    let switch_box = document.getElementById('switch-box')
    // 定义数组索引
    let index = 0
    let delay = 500
    let changeText = () => {
        switch_box.textContent = stringArray[index]
        index ++
        if(index >= stringArray.length){
            index = 0
        }
        setTimeout(changeText,delay)
    }
    changeText()

这其实已经能实现切换了，只是没有打字效果，我们再利用js，用于显示一个个字符的显示，利用substring切割字符，每次字符数量+1，当切割全部的时候，就该执行删除了，所以应该定义一个删除的标志，在删除完之后，就应该切换到下一个字符了。

下面是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: black;
            color: white;
        }
        #switch-box {
            color: #0cc4fb;
        }
    </style>
</head>
<body>
    我要成为
    
    <span id="switch-box"></span>
    
    高手
    <script>
        const stringArray = ['C++','Go','Java','Js','PHP']
        let switch_box = document.getElementById('switch-box')
        // 定义数组索引
        let index = 0
        let delay = 0
        let charIndex = 0
        // 删除标志
        let isDelete = false
        let defaultDelay = 300
        let waitDalay = 1000

        let changeText = () => {
            switch_box.textContent = stringArray[index].substring(0,charIndex);
            if(!isDelete){
                delay = defaultDelay
                charIndex ++ 
                if(charIndex > stringArray[index].length){
                    // 当charIndex已经大于字符的长度的时候，表示应该执行删除动画了
                    isDelete = true    
                    delay = waitDalay
                }
            }else{
                delay = defaultDelay
                charIndex --
                if(charIndex < 1){
                    isDelete = false
                    index ++
                    if(index >= stringArray.length){
                        index = 0
                    }
                }
            }
            setTimeout(changeText,delay)
        }
        
        changeText()
    </script>
</body>
</html>

最后补充下文字后的光标闪烁效果

/*打字样式光标*/
#switch-box::after {
    content: "I";
    font-size: 18px;
    display: inline-block;
    vertical-align: top;
    font-weight: lighter;
    animation: flicker .5s infinite;
}

/*光标闪烁动画*/
@keyframes flicker {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

效果图

到此这篇关于基于JavaScript实现惊艳的打字机效果的文章就介绍到这了,更多相关JavaScript打字机内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 前端面试知识点锦集（JavaScript篇）

    前端面试知识点锦集（JavaScript篇）

    这篇文章主要为大家分享了前端面试知识点锦集JavaScript篇，细致的给出了每个js面试知识点的答案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 用js实现多域名不同文件的调用方法

    用js实现多域名不同文件的调用方法

    用js实现多域名不同文件的调用方法...
    2007-01-01
  • 如何利用echarts画雷达图和折柱混合

    如何利用echarts画雷达图和折柱混合

    最近使用echarts做的一个H5的成绩数据报告,里面使用了雷达图已经折线图和柱状图,下面这篇文章主要给大家介绍了关于如何利用echarts画雷达图和折柱混合的相关资料,需要的朋友可以参考下
    2022-04-04
  • VSCode中ESLint格式化不生效问题解决办法(新手也能看懂的配置指南)

    VSCode中ESLint格式化不生效问题解决办法(新手也能看懂的配置指南)

    vscode代码格式化失效通常因工具未安装、未正确配置或被干扰项屏蔽,这篇文章主要介绍了VSCode中ESLint格式化不生效问题解决办法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2026-03-03
  • javascript 手动给表增加数据的小例子

    javascript 手动给表增加数据的小例子

    这篇文章介绍了js手动给表增加数据的实例代码，有需要的朋友可以参考一下
    2013-07-07
  • JavaScript深拷贝和浅拷贝概念与用法实例分析

    JavaScript深拷贝和浅拷贝概念与用法实例分析

    这篇文章主要介绍了JavaScript深拷贝和浅拷贝概念与用法,结合实例形式较为详细的分析了javascript深拷贝与浅拷贝的概念、原理、用法及相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • JS简单实现文件上传实例代码（无需插件）

    JS简单实现文件上传实例代码（无需插件）

    注意一下：在chrome浏览器下，为了数据安全，隐藏的input：file不能trigger “click” 事件。 所以要设置input：file的透明度达到隐藏的效果
    2013-11-11
  • 使用webpack处理stylus文件的配置方法

    使用webpack处理stylus文件的配置方法

    这篇文章主要介绍了使用webpack处理stylus文件的配置方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-03-03
  • 关于小程序优化的一些建议(小结)

    关于小程序优化的一些建议(小结)

    这篇文章主要介绍了关于小程序优化的一些建议(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • JavaScript数据检测方法的全面指南

    JavaScript数据检测方法的全面指南

    在 JavaScript 开发中,准确检测数据类型是保证代码健壮性的基础,JavaScript 提供了多种数据类型检测方法,每种方法都有其适用场景和局限性,本文将全面介绍 JavaScript 中各种数据检测方法,需要的朋友可以参考下
    2025-07-07

最新评论