js来模拟打字的效果

js来模拟打字的效果

月光魔力鸭

2018-09-01 16:11 阅读 875 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
在页面中不同的frame之间进行相互调用的话,我们可以通过frame获取对应的window然后进行调用,但是如果是浏览器不同的tab之间呢?
Question from codewar,about all of array combinations.
偶尔练习下canvas,这里简单记录下常用API,防止遗忘..加深记忆..努力提高..争取突破...daydayup
最近折腾的少了,实在没的写了,大约三四个月没更新了,先水一篇。
在今天之前,我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转,但那是在他人的基础上直接修改的,至于为啥会这样..讲真,还真没注意过,但是今天又需要用到这块了,实在搞不定了,找了各种资料,终于明白了.. 坐标系的问题。
近期需求:将一棵树导出到excel中,树是ztree,通过插件Table2excel导出table到excel中。
在项目开发过程中,分页是少不了的,之前封装了一个分页组件,样式是基于bootstrap的样式,当然也可以自己来修改
jsQR 是一款纯粹的由javascript实现的二维码识别库,可以在浏览器端使用,也可以在后端node.js环境使用。我之前使用过其他的识别库,例如:qrcode-reader 或其他,在使用上都比较麻烦,而且识别率并不高。jsQR是后来发现的,感觉(没有实际对比验证)jsQR识别率要更高些,使用起来也更简单,不需要安装其他依赖软件。