网站首页前端文档正文

JS实现类似打字的特效，JS实现打字效果

作者：略懂前端的后端更新时间： 2022-01-17 前端文档

JS实现类似打字的特效，JS实现打字效果

效果图如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js实现打字特效</title>
    <!-- 移动设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style type="text/css">
        a{
            text-decoration: none;
            display: inline-block;
            color: black;
            font-size: 20px;
            padding: 10px;
        }
        div{
            width: 330px;
            height: auto;
            border: 1px solid #CCC;
            margin: 10px auto;
            padding: 10px;
            text-indent: 10px;
            border-radius: 10px;
            box-shadow: 2px 2px 3px #CCC
        }
        #title{
            display: none;
        }

    </style>
</head>
<body>
<span id="title">这是用4行关键JS实现的一个类似于打字的特效，给你一个不一样的思路! </span>
<div>
    <a href="http://www.aikanmv.cn" id="text"></a>
</div>
<script type="text/javascript">

// html文字类似于打字特效
function typewriting(){
    // 定义数字长度为零
    var index=0;
    // 获取文字内容，我这里直接在页面上写出来然后隐藏的，也可以动态加载哦
    var word=document.getElementById("title").innerHTML;
    // 封装任务
    function type(){
        // 获取打字在哪个位置，substring()方法提取字符串（获取到的word里）中介于两个指定下标之间的字符（起始为0，运行一次自增一次）。
        document.getElementById("text").innerText = word.substring(0,index++);
    }
    setInterval(type, 100);
    // 100毫秒调用一次type任务
}
typewriting();
// 执行typewriting
</script>
</body>
</html>

原文链接：https://blog.csdn.net/weixin_42048853/article/details/122282034

上一篇：javascript 不足两位小数的补全、超过两位小数的取整
下一篇：我与 JavaScript 装饰器（Decorator）的一

网站首页 前端文档 正文

JS实现类似打字的特效，JS实现打字效果

JS实现类似打字的特效，JS实现打字效果

相关推荐

网站首页前端文档正文