js来模拟打字的效果

js来模拟打字的效果

月光魔力鸭

2018-09-01 16:11 阅读 879 喜欢 2 component js模拟打字 打字效果

有时候浏览网页经常会看见一些页面出现一些打字的效果,那么是怎么实现的呢?

逻辑

代码

var typper = function( selector, timemin ){
    //默认频率时长75ms
    timemin = timemin || 75;
    //确定容器以及输出内容和当前进度
    var $ele = $(selector),str = $ele.html(),progress = 0;
    //清空内容
    $ele.html('');
    //定时器
    var typertimer = setInterval(function() {
        //根据进度获得当前内容
        var current = str.substr(progress, 1);
        //判断是否是html标签
        if (current == '<') {
            //如果是标签,则获得标签长度
            progress = str.indexOf('>', progress) + 1;
        } else {
            progress++;
        }
        //打印标签和内容
        $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
        if (progress >= str.length) {
            if($ele.html().endWith('_')){
                $ele.html($ele.html().substring(0,$ele.html().length -1));
            }
            //结束定时器
            clearInterval(typertimer);
        }
    }, timemin);
};

使用

typper('body');

效果

效果.gif

转载请注明出处: https://chrunlee.cn/article/js-typper.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
整理下关于axios的使用,一些常用的调用、处理以及其他。
如何通过js调用本地摄像头呢?获取后如何对视频进行截图呢?在这里跟大家做一个简易的Demo来实现以上几个功能。
在页面中不同的frame之间进行相互调用的话,我们可以通过frame获取对应的window然后进行调用,但是如果是浏览器不同的tab之间呢?
项目中需要使用treegrid,找了下easyui 和 ext都有,但是项目用的框架是 byyui,如果为了treegrid 就把这些都加载的话,感觉不太合算。找了大家常用的基于jquery的treegrid.
最大公因数,也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。a,b的最大公约数记为(a,b),同样的,a,b,c的最大公约数记为(a,b,c),多个整数的最大公约数也有同样的记号。求最大公约数有多种方法,常见的有质因数分解法、短除法、辗转相除法、更相减损法。与最大公约数相对应的概念是最小公倍数,a,b的最小公倍数记为[a,b]。
在使用echarts 来做统计报表的时候,由于数量较多,准备将同类型的相同属性抽取出来,然后用来做默认属性的。结果发现一个问题
最近做个nodejs的项目,使用了thinkjs 3.0 的框架,编辑器为vs code ,之前用的好好的,每次 . 后都有提示的,可是使用了多模块后发现.. model的提示没有了..
在开发过程中经常会碰到跨frame 去操作的需求,那么如何获得这个frame呢,这里写了一个工具类,用来通过name获得frame的jq对象