文字打印机效果实现

孙淑建发布于2019-08-22 15:10 / 767人阅读

摘要：简单的文字打印机效果很久没写过看招聘信息里面都是什么精通诸如此类。。。也就是简简单单的貌似掌握。看见一个博客里的效果，突然自己想实现。当前字符串下标字符串总长度记录定时器的记录裁切从第一位开始长度为的字符串测试地址

简单的文字打印机效果

很久没写过 juqey, 看招聘信息里面都是什么精通jquey、 react、 vue 诸如此类。。。
精通离我很远，熟练也不敢说。也就是简简单单的貌似掌握。
看见一个博客里的效果，突然自己想实现。简简单单写个 jquery 插件。

给jquery 增加 fadeText 方法
参数 options
options.time 时间文字插入间隔
options.text 待插入的文字
options.fn // 为 fn 提供三个参数函数 (stopFadeText, goOn, end)
stopFadeText 停止文字渐进效果
goOn 恢复文字渐进效果
end 结束文字渐进效果，立即到渐进效果最后一帧。

$.fn.extend({
    fadeText (options) {
        var time = options.time || 200
        var text = options.text.toString()
        var fn = options.fn || function () {}
       // 当前字符串 下标
        var index = 0
       // 字符串 总长度
        var length = text.length
        // 记录定时器 id 的
        var k = null
        // 记录 this    
        var that = this
        console.log(fn)
        var fadeText = function () {
            index ++;
            k !== null && clearTimeout(k)
            console.log(text.substr(0, index))
            //裁切 text 从第一位开始 长度为 index 的字符串
            that.text(text.substr(0, index))
            console.log($(that))
            if (index > length - 1)
                return
            k = setTimeout(fadeText, time)
        }
        var stopFadeText = function () {
            clearTimeout(k)
            k = null
        }
        var goOn = function () {  
            if ( k !== null) {
                index --
                fadeText()
            }      
        }
        var end = function () {
            clearTimeout(k)
            that.text(text.substr(0, length - 1))
        }
        fadeText()
        fn(stopFadeText, goOn, end)
        return this
    }
})

demo测试地址

GPU云服务器云服务器文字效果 html文字倒影效果 html文字输入效果 js 文字远近效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93239.html

CSS14个实用技巧的精选和推荐

摘要：此文章主要为大家介绍了个实用技巧的精选推荐，具有一定的参考价值，学习觉得挺不错的，分享给大家。设计的同时就可以把这个设成显示来检查它的效果。块元素居中对齐如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样你会使用来围上所有元素。此文章主要为大家介绍了CSS14个实用技巧的精选推荐，具有一定的参考价值，学习觉得挺不错的，分享给大家。创业项目 2018优选本页技巧目录： 1...

elisa.yang 2019-08-30 11:22 评论0 收藏0
php给图片添加文字或图片水印实现代码(二种加水印方法)

摘要：有时上传图片时，需要给图片添加水印，水印一般为文字或图片水印，下面就来看看两种添加方法。拷贝并合并图像的一部分更多库函数用法，请查手册相关文章实现图片上传时添加文字和图片水印有时上传图片时，需要给图片添加水印，水印一般为文字或图片logo水印，下面就来看看两种添加方法。一、文字水印文字水印就是在图片上加上文字，主要使用gd库的imagefttext方法，并且需要字体文件。效果图如...

CoderStudy 2019-07-01 12:17 评论0 收藏0
科技不总是冷冰冰，智能便携打印机让文字更有温度!——嵌入式功能实现篇

摘要：将信号拉高激活打印元件，接着使步进电机转动两步完成一点行的打印。步进电机的步长为，一点行的宽度为，因此打印出一点行的数据需要步进电机转两步。由于步进电机和热敏头不能长时间连续工作，因此打印份数不宜设置过多，否则容易烧坏电机和热敏头。 ...

Mr_houzi 2021-09-10 10:50 评论0 收藏0
nodejs 终端打印进度条

摘要：那么使用简单的文本和符号，就够自己拼凑出命令行的效果下面例子文件已上传当然，进度条的效果可以根据需要自己设计啦，我这里只是给大家一个参考。 1. 场景导入当我们对大量文件进行批量处理的时候(例如：上传/下载、保存、编译等)，常常希望知道当前进展如何，或者失败(成功)的任务有多少；当我们的代码或程序已经发布，用户在执行安装的过程中，一个合适的（终端/命令行）进度条可以准确反映安装的步骤...

dack 2019-08-20 15:58 评论0 收藏0
兼顾pc和移动端的textarea字数监控的实现方法

摘要：一需求阐述和常用的解决方案制作一个文本框限制最大字数，实时监听当前已经输入的字数，并显示出来。因此单纯的监听事件显示是不够的。如果页面里需要多个文本框都要限制字数如何实现。一、需求阐述和常用的解决方案制作一个文本框限制最大字数，实时监听当前已经输入的字数，并显示出来。期初我实现这个功能的方法很简单：给textarea控件添加onkeyup事件方法，在方法中将textarea值的长度...

laznrbfe 2019-08-20 17:15 评论0 收藏0