1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
| <!DOCTYPE html>
<head>
<title>css3滑动</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<style>
* {
margin: 0;
padding: 0
}
.main {
font-size: 24px;
width: 900px;
margin: 0 auto;
}
.main p {
margin-top: 10px;
}
.main input,
.main textarea {
border: 1px solid #ccc;
width: 300px;
padding: 5px;
}
.main input {
height: 30px;
line-height: 30px;
}
.main textarea {
width: 300px;
height: 100px;
}
.main button {
color: #fff;
background: blue;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border: none;
cursor: pointer;
}
.main button:hover {
opacity: .6
}
</style>
</head>
<body>
<div class="main">
<p>
<input id="colorInput" placeholder="请输入颜色值比如#ccc,red" />
</p>
<p>
<textarea id="textInput" placeholder="请输入文本内容"></textarea>
</p>
<p>
<input id="speedInput" placeholder="请输入打印速度:单位ms" />
</p>
<p>
<button onclick="doThis()">确定</button>
</p>
<div id="word-wrapper-js" class="word-wrapper-js"></div>
</div>
<script type="text/javascript">
var textPrint = {
init: function(config) {
this.id = $(config.id);
this.text = config.text || '你什么都没输入';
this.color = config.color || '#666';
this.speed = config.speed || 100;
//this.render();
//可链式调用
return this;
},
//渲染元素
render: function() {
var typeWord = '',
i = 0,
speed = this.speed,
_this = this,
cur = "_"
var typing = setInterval(function() {
if (_this.text[i] == "\n") {
typeWord = typeWord + "<br />"
}
typeWord += _this.text[i];
_this.id.css('color', _this.color).html(typeWord + cur);
i++;
if (i == _this.text.length) {
clearInterval(typing);
}
}, _this.speed)
}
}
function doThis() {
var color = $("#colorInput").val();
var text = $("#textInput").val();
var speed = $("#speedInput").val();
textPrint.init({
id: '#word-wrapper-js',
text: text,
color: color,
speed: speed
}).render();
}
</script>
</body>
</html>
|