脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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打字机内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 微信小程序实现动态渲染Markdown示例详解

    微信小程序实现动态渲染Markdown示例详解

    这篇文章主要为大家介绍了微信小程序实现动态渲染Markdown示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Bootstrap CSS布局之图像

    Bootstrap CSS布局之图像

    这篇文章主要介为大家详细绍了Bootstrap CSS布局之图像的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 限制textbox或textarea输入字符长度的JS代码

    限制textbox或textarea输入字符长度的JS代码

    textbox或textarea的输入字符限制有很多方法，在本将为大家详细介绍下js中时如何实现的，感兴趣的朋友不要错过
    2013-10-10
  • JS通过分析userAgent属性来判断浏览器的类型及版本

    JS通过分析userAgent属性来判断浏览器的类型及版本

    JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另 一种是通过分析浏览器的userAgent属性来判断的
    2014-03-03
  • 关于js内存泄露的一个好例子

    关于js内存泄露的一个好例子

    这篇文章主要介绍了关于js内存泄露的一个好例子。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • js轮盘抽奖实例分析

    js轮盘抽奖实例分析

    这篇文章主要为大家详细介绍了js轮盘抽奖实例，分析js轮盘抽奖实现原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • js实现截图保存图片功能的代码示例

    js实现截图保存图片功能的代码示例

    本篇文章主要介绍了js实现截图功能的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • CSS图片响应式 垂直水平居中

    CSS图片响应式 垂直水平居中

    这篇文章主要为大家介绍CSS图片响应式 垂直水平居中，在最近的项目中经常遇到这样的需求，于是把相关内容整理一下，分享给大家，需要的朋友可以来参考下
    2015-08-08
  • 如何理解JavaScript模块化

    如何理解JavaScript模块化

    模块化简单来说就是将一个完整的长篇代码文件根据功能进行划分成几个文件，这些文件各自负责一个独立的功能，各个文件组合起来实现一个完整的大功能，这就是模块化，每个负责独立功能的文件就是模块。
    2021-05-05
  • 基于JavaScript实现弹出框效果

    基于JavaScript实现弹出框效果

    弹出框在网站页面中是必不可少的一部分，今天借助脚本之家平台给大家分享使用js实现简单的弹出框效果，感兴趣的朋友一起学习吧
    2016-02-02

最新评论