自己写了一个实现打字机效果的 js 库,大家给点意见吧 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a Javascript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
Javascript 权威指南第 5 版
Closure: The Definitive Guide
lizhiqing1996
V2EX    Javascript

自己写了一个实现打字机效果的 js 库,大家给点意见吧

  •  2
     
  •   lizhiqing1996 2015-08-17 08:59:27 +08:00 8813 次点击
    这是一个创建于 3791 天前的主题,其中的信息可能已经有所发展或是发生改变。

    本来想在自己的主页上面加一个打字机的效果,结果去网上找到的代码看起来都好麻烦,于是自己写了一个。这个库是给纯小白用的(因为我自己也是小白),大牛请轻喷!
    地址: https://github.com/Zhiqing-Lee/js-printer

    第 1 条附言    2015-08-17 12:16:11 +08:00
    V2EX 的人太热情了 T_T,本来只是自己弄着玩一下的,没想到发个帖就快到 30 个 star 了 T_T 。让我受宠若惊啊

    弄了个了演示地址: http://studio.zhiqing.info/program/js-printer/,
    第 2 条附言    2015-08-17 12:17:19 +08:00
    上面的演示地址多了个逗号: http://studio.zhiqing.info/program/js-printer/
    62 条回复    2017-02-22 13:49:45 +08:00
    BuilderQiu
        1
    BuilderQiu  
       2015-08-17 09:05:24 +08:00
    SUSE是Sichuan University of ...?
    iamcho
        2
    iamcho  
       2015-08-17 09:05:42 +08:00
    mark
    lizhiqing1996
        3
    lizhiqing1996  
    OP
       2015-08-17 09:07:09 +08:00
    @BuilderQiu 是的
    wsph123
        4
    wsph123  
       2015-08-17 09:08:29 +08:00   1
    createTextNode() 做更新好一些?
    lizhiqing1996
        5
    lizhiqing1996  
    OP
       2015-08-17 09:10:50 +08:00
    @wsph123 我是小白,没怎么用过js。我能说我都不知道creatTextNode()是什么吗!T_T我先去看看
    gangsta
        6
    gangsta  
       2015-08-17 09:11:08 +08:00
    试试这个?
    /t/161631
    lolicon
        7
    lolicon  
       2015-08-17 09:13:06 +08:00
    $ I am study in SUSE
    I am study
    df4VW
        8
    df4VW  
       2015-08-17 09:15:11 +08:00
    学弟摸摸头
    lizhiqing1996
        9
    lizhiqing1996  
    OP
       2015-08-17 09:15:29 +08:00
    @gangsta 比我的牛多了!!!
    lizhiqing1996
        10
    lizhiqing1996  
    OP
       2015-08-17 09:16:34 +08:00
    @lolicon 我期末英语考了59分,不要跟我说这些T_T
    lizhiqing1996
        11
    lizhiqing1996  
    OP
       2015-08-17 09:17:46 +08:00
    @df4VW 学长四川理工的?
    BuilderQiu
        12
    BuilderQiu  
       2015-08-17 09:17:49 +08:00
    @df4VW
    @lizhiqing1996

    - - 看来校友还不少哦...
    odirus
        13
    odirus  
       2015-08-17 09:19:19 +08:00
    @BuilderQiu 活捉几枚校友
    AlexaZhou
        14
    AlexaZhou  
       2015-08-17 09:20:34 +08:00   1
    看起来不错,赞一个,已Star ~
    BuilderQiu
        15
    BuilderQiu  
       2015-08-17 09:21:18 +08:00
    @odirus

    ...还真不少嗦。。
    lizhiqing1996
        16
    lizhiqing1996  
    OP
       2015-08-17 09:22:07 +08:00
    @AlexaZhou 谢谢,看了上面那个的作品我才知道自己的有多差T_T
    jiyee
        17
    jiyee  
       2015-08-17 09:22:31 +08:00
    浓浓的C语言气息。
    lizhiqing1996
        18
    lizhiqing1996  
    OP
       2015-08-17 09:23:07 +08:00
    @BuilderQiu
    @df4VW
    @odirus

    你们都是什么专业的?
    td width="10" valign="top">
    odirus
        19
    odirus  
       2015-08-17 09:24:04 +08:00
    @lizhiqing1996 机械设计,现在码农
    ijse
        20
    ijse  
       2015-08-17 09:24:10 +08:00
    兼容性允许的话,纯CSS3也可以实现的~~
    lizhiqing1996
        21
    lizhiqing1996  
    OP
       2015-08-17 09:24:16 +08:00
    @jiyee 主要是没怎么写过js
    lizhiqing1996
        22
    lizhiqing1996  
    OP
       2015-08-17 09:25:41 +08:00
    @ijse 那都是大神干的事了,我这种css2都用不好的还是看看就行了
    gsanidt
        23
    gsanidt  
       2015-08-17 09:33:08 +08:00
    又一个SUSE的
    BuilderQiu
        24
    BuilderQiu  
       2015-08-17 09:54:40 +08:00
    @lizhiqing1996

    又软又贱那个专业
    spring5413
        25
    spring5413  
       2015-08-17 10:08:46 +08:00   1
    个人建议:
    1.使用面向对象方式来写,写一个 Printer 类,每次 new 一下就行了
    2.不要单独设置配置项,最好是能实现 obj 参数传递
    仅是个人建议!不过效果还是挺好的
    Wangxf
        26
    Wangxf  
       2015-08-17 10:33:08 +08:00
    也写了一个
    <div id='mydiv'></div>
    <script>
    str='hello,V2EX';
    function print (str,conId,speed ){
    var ocOnId=document.getElementById (conId );
    var strs=str.split ('');
    var count=0,timer=null;
    timer=setInterval (function (){
    if (count==strs.length ){clearInterval (timer );return}
    var letterNode=document.createTextNode (strs[count]);
    oconId.appendChild (letterNode );
    count++;
    },speed )
    }
    print (str,'mydiv',60 );
    </script>
    lizhiqing1996
        27
    lizhiqing1996  
    OP
       2015-08-17 10:37:11 +08:00
    @spring5413 谢谢建议,没怎么写过 js ,不知道怎么用 js 写类,等下去看看,我最开始就是用参数传递的方式写的,不过考虑到参数太多就改成配置这种了,还是等下去看看有没有更好的方法
    lizhiqing1996
        28
    lizhiqing1996  
    OP
       2015-08-17 10:40:10 +08:00
    @Wangxf 比我刚开始写那个好很多,我写那个连参数传递都没有,直接在函数里调用的
    hippoboy
        29
    hippoboy  
       2015-08-17 10:54:55 +08:00
    这个写的挺好
    lizhiqing1996
        30
    lizhiqing1996  
    OP
       2015-08-17 11:37:53 +08:00
    @hippoboy 谢谢夸奖
    eoo
        31
    eoo  
       2015-08-17 12:45:04 +08:00 via Android   1
    下面这个不是很简单吗?

    <html>
    <head>
    <title>Js 实现逐字在网页上打印文字</title>
    <script language="Javascript">
    text = "Js 实现逐字在网页上打印文字";
    i = 0;
    function type (){
    str = text.substr (0,i );
    txt.innerHTML = str + "_";
    i++;
    if (i>text.length ){
    i=0;
    //return 加入则 text 显示完后,停止。
    }
    setTimeout ("type ()",300 );
    }

    </script>
    </head>
    <body OnLoad="type ()">
    <div id="txt"></div>
    </body>
    </html>
    lizhiqing1996
        32
    lizhiqing1996  
    OP
       2015-08-17 12:53:57 +08:00
    @eoo 你这是打脸啊!不过效果有点不一样吧,我不想要文字后面一直跟着光标那种效果
    eoo
        33
    eoo  
       2015-08-17 12:56:55 +08:00 via Android
    @lizhiqing1996

    txt.innerHTML = str + "_";

    改成

    txt.innerHTML = str

    就好了啊;
    lizhiqing1996
        34
    lizhiqing1996  
    OP
       2015-08-17 13:31:33 +08:00
    @eoo 我的意思是"_"要若隐若现地出现在文字后面,一会儿有一会儿没有那种
    zythum
        35
    zythum  
       2015-08-17 13:36:02 +08:00
    不错。接下来看些 api 设计和简单的设计模式吧。

    25 楼 @spring5413 说的很有道理。
    Kilerd
        36
    Kilerd  
       2015-08-17 14:46:09 +08:00   1
    echo You can browse more from zhiqing.ingo

    厉害,自己的域名都打错了
    void1900
        37
    void1900  
       2015-08-17 15:25:11 +08:00
    "line1\n\
    line2\n\
    line3\n\
    line4"

    js 字符串换行方法 每行结尾加 \
    lizhiqing1996
        38
    lizhiqing1996  
    OP
       2015-08-17 15:25:57 +08:00
    @zythum 嗯嗯,谢谢
    lizhiqing1996
        39
    lizhiqing1996  
    OP
       2015-08-17 15:27:37 +08:00
    @Kilerd 没有注意到....
    lizhiqing1996
        40
    lizhiqing1996  
    OP
       2015-08-17 15:34:53 +08:00
    @void1900 哦哦,我就说怎么直接换行不行
    orcusfox
        41
    orcusfox  
       2015-08-17 16:16:40 +08:00   1
    强迫症发作提了个 pr ,给重构了下。
    youchoudeyu
        42
    youchoudeyu  
       2015-08-17 16:37:08 +08:00
    貌似有个东西叫 typed.js
    lizhiqing1996
        43
    lizhiqing1996  
    OP
       2015-08-17 16:43:05 +08:00
    @napsterwu 比我那个好多了,已合并
    lizhiqing1996
        44
    lizhiqing1996  
    OP
       2015-08-17 16:44:07 +08:00
    @youchoudeyu 我刚刚也看到了,好像还有个叫 typing 的
    lizhiqing1996
        45
    lizhiqing1996  
    OP
       2015-08-17 16:53:22 +08:00
    @napsterwu 不会用 github ,貌似已经把源码搞乱了。。。。
    orcusfox
        46
    orcusfox  
       2015-08-17 16:57:02 +08:00
    不是可以一键合吗,你把所有<<<<<<< HEAD 或者=========中间的内容,一份是你的 一份是我的,看好了删就行了
    lizhiqing1996
        47
    lizhiqing1996  
    OP
       2015-08-17 16:58:54 +08:00
    @napsterwu 哦哦,懂了
    vmebeh
        48
    vmebeh  
       2015-08-17 17:11:18 +08:00   1
    演示的“ Console ”没有垂直居中

    版本 44.0.2403.155 m
    Google Chrome 已是最新版本。
    lizhiqing1996
        49
    lizhiqing1996  
    OP
       2015-08-17 17:17:01 +08:00
    @vmebeh 哦哦,这个好像是字体问题,等下改改
    julijulilijuliju
        50
    julijulilijuliju  
       2015-08-17 18:06:57 +08:00 via Android
    Awesome 就是棒棒哒!
    lizhiqing1996
        51
    lizhiqing1996  
    OP
       2015-08-17 19:20:18 +08:00
    @julijulilijuliju 什么东西
    julijulilijuliju
        52
    julijulilijuliju  
       2015-08-17 20:49:35 +08:00 via Android
    @lizhiqing1996 Hmm, 就是看大家的合作很暖和的意思,楼主给人一种火星访客的赶脚,而且好认真的样子, hmmmm, 像我!
    fhefh
        53
    fhefh  
       2015-08-17 21:24:09 +08:00
    mark ~
    lizhiqing1996
        54
    lizhiqing1996  
    OP
       2015-08-17 21:29:29 +08:00
    @julijullijuliju 之前确实很少来这些地方,
    pandada8
        55
    pandada8  
       2015-08-17 21:33:50 +08:00   1
    demo 字体 fallback 可以考虑改成 monospace , linux 和 mac 底下直接炸了
    lizhiqing1996
        56
    lizhiqing1996  
    OP
       2015-08-17 22:07:16 +08:00
    @pandada8 感觉用 monospace 在 linux 下偏大,字体调小后在 windows 上又偏小...感觉做前端的好累
    pandada8
        57
    pandada8  
       2015-08-17 22:11:23 +08:00
    @lizhiqing1996 linux 用户大约都有一套自己配置好的 fontconfig ,反正不管怎么说 sans-serif 作为终端的 fallback 字体未免有些过不去
    lizhiqing1996
        58
    lizhiqing1996  
    OP
       2015-08-17 22:26:35 +08:00
    @pandada8 嗯嗯,已经改成 monospace ,之前一直在 windows 上弄的,不知道 linux 下什么效果
    kn007
        59
    kn007  
       2015-08-17 22:46:56 +08:00
    *
    nor
        60
    nor  
       2015-08-17 23:27:05 +08:00
    star 以示支持。
    mingyun
        61
    mingyun  
       2015-08-30 20:35:24 +08:00
    star
    HDMXXXX
        62
    HDMXXXX  
       2017-02-22 13:49:45 +08:00
    本来想提个建议的,可是注册后等了两个多小时。

    哎。。
    我觉得网上评论系统最好的莫过于多玩图库下面的,直接就可以回复,游客显示 ip 或者所在地之类的。
    每天回复量不少,也没见过有广告什么的。

    但是大多数网站都是各种烦,登陆,注册,等待等待等待。

    这样是为了什么实在想不通,一系列的东西为了防止广告,机器等等,但是对用户也变得很不友好。

    T i p :上面纯属发牢骚,请无视。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2416 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 11:49 PVG 19:49 LAX 03:49 JFK 06:49
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86