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

2015-08-17 08:59:27 +08:00
 lizhiqing1996

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

7983 次点击
所在节点    JavaScript
62 条回复
lizhiqing1996
2015-08-17 09:24:16 +08:00
@jiyee 主要是没怎么写过js
lizhiqing1996
2015-08-17 09:25:41 +08:00
@ijse 那都是大神干的事了，我这种css2都用不好的还是看看就行了
gsanidt
2015-08-17 09:33:08 +08:00
又一个SUSE的
BuilderQiu
2015-08-17 09:54:40 +08:00
@lizhiqing1996

又软又贱那个专业
spring5413
2015-08-17 10:08:46 +08:00
个人建议：
1.使用面向对象方式来写，写一个 Printer 类，每次 new 一下就行了
2.不要单独设置配置项，最好是能实现 obj 参数传递
仅是个人建议！不过效果还是挺好的
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
2015-08-17 10:37:11 +08:00
@spring5413 谢谢建议，没怎么写过 js ，不知道怎么用 js 写类，等下去看看，我最开始就是用参数传递的方式写的，不过考虑到参数太多就改成配置这种了，还是等下去看看有没有更好的方法
lizhiqing1996
2015-08-17 10:40:10 +08:00
@Wangxf 比我刚开始写那个好很多，我写那个连参数传递都没有，直接在函数里调用的
hippoboy
2015-08-17 10:54:55 +08:00
这个写的挺好
lizhiqing1996
2015-08-17 11:37:53 +08:00
@hippoboy 谢谢夸奖
eoo
2015-08-17 12:45:04 +08:00
下面这个不是很简单吗？

<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
2015-08-17 12:53:57 +08:00
@eoo 你这是打脸啊！不过效果有点不一样吧，我不想要文字后面一直跟着光标那种效果
eoo
2015-08-17 12:56:55 +08:00
@lizhiqing1996

txt.innerHTML = str + "_";

改成

txt.innerHTML = str

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

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

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

js 字符串换行方法 每行结尾加 \
lizhiqing1996
2015-08-17 15:25:57 +08:00
@zythum 嗯嗯，谢谢
lizhiqing1996
2015-08-17 15:27:37 +08:00
@Kilerd 没有注意到....
lizhiqing1996
2015-08-17 15:34:53 +08:00
@void1900 哦哦，我就说怎么直接换行不行

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/213668

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX