js来模拟打字的效果

js来模拟打字的效果

月光魔力鸭

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


感谢支持!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
web开发中,前台有时候会需要一个随机数或序列,通常来说,这个随机数可能只在当前页面中使用,并不需要太过严格,大体上重复率低即可。
做作业的时候,需要在手机上预览下,但是发现如果想在移动端上展示A4样子的作业还是挺麻烦的,最后还是准备通过图片来展示,然后移动端缩放呗。。
java 对象中有很多引用,甚至会出现循环引用,比如 user 对象中有 school 对象,school 对象中又有 user 对象,这样在对 user 对象序列化的时候,就会出现死循环,导致内存溢出。通过一定的方式,将每个对象增加ID 和 REF 引用标识最终可以解决这个问题
对于web开发过程中的JS对象 Array ,我们真的充分使用了么?是不是理解了Array的全部?能够在合适的地点调用合适的函数,使用合适的属性?
在我们通过canvs画图的时候经常会用到圆,且需要计算出圆上某点的坐标,由于我数学没学好,总是记不得怎么获取,这里记录下,加深记忆
问题是由一个BUG引起的,功能中有使用国际化组件,用的是jquery.i18n,在chrome上、ff上都没有什么问题,问题出在了IE上。万恶的IE..
本文概括了递归、闭包、原型、继承,理清这些基本的概念,有助于你接纳更多的东西,我们会在下一个章节对函数进行更深入的讨论。
项目中需要使用treegrid,找了下easyui 和 ext都有,但是项目用的框架是 byyui,如果为了treegrid 就把这些都加载的话,感觉不太合算。找了大家常用的基于jquery的treegrid.