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 · 8136 次点击
    这是一个创建于 3372 天前的主题,其中的信息可能已经有所发展或是发生改变。

    本来想在自己的主页上面加一个打字机的效果,结果去网上找到的代码看起来都好麻烦,于是自己写了一个。这个库是给纯小白用的(因为我自己也是小白),大牛请轻喷!
    地址: 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

    你们都是什么专业的?
    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 哦哦,我就说怎么直接换行不行
    napsterwu
        41
    napsterwu  
       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 ,貌似已经把源码搞乱了。。。。
    napsterwu
        46
    napsterwu  
       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
    @julijulilijuliju 之前确实很少来这些地方,
    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   ·   实用小工具   ·   2897 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 50ms · UTC 00:16 · PVG 08:16 · LAX 16:16 · JFK 19:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.