4行关键JS实现的一个类似于打字的特效,超简单JS实现打字效果

4行关键JS实现的一个类似于打字的特效,超简单JS实现打字效果

大祥子
2021-05-10 / 1 评论 / 1,128 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月10日,已超过1247天没有更新,若内容或图片失效,请留言反馈。

效果展示如下:

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="https://blog.fxnws.com" 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>
95

评论 (1)

取消
  1. 头像
    大祥子 作者
    Windows 10 · Google Chrome

    代码块右上角,点击复制,可以直接复制表情

    回复