文章目录
需求：实现文字打字机效果
需求：要求一个语句的文字可以逐个出现在文本框中，在每句话说完之后会出现按钮，点击按钮后，会继续进行新语句的文字打印，直到所有语句全部被打印出来。
实现效果如下：
代码如下：
html代码：
<div id="div2">
<div id="div2-left">Me:</div>
<div id="div2-right1">
<textarea id="text" cols="30" rows="10" disabled="disabled"></textarea>
<div id="div2-right2">
<a id="continue" href="#"></a>
</div>
</div>
</div>
css代码：
* {
margin: 0;
padding: 0;
}
#div2 {
position: absolute;
left: 50%;
top: 50%;
width: 1140px;
height: 300px;
margin-left: -570px;
margin-top: -150px;
}
#div2-left {
display: inline-block;
float: left;
width: 130px;
height: 300px;
color: #ffa5cb;
font-size: 25px;
line-height: 55px;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
}
#div2-right1 {
width: 1010px;
height: 300px;
display: inline-block;
float: left;
}
#div2-right2 {
text-align: right;
width: 1010px;
height: 60px;
background-color: rgba(0, 0, 0, 0.6);
margin-top: -4px;
}
#text {
width: 1010px;
height: 240px;
background-color: rgb(0, 0, 0, 0.6);
color: #ffa5cb;
font-size: 25px;
line-height: 55px;
border: none;
margin: 0;
}
#continue {
display: none;
width: 50px;
height: 50px;
/* 按钮图标的路径 */
background-image: url("倒三角.png");
background-repeat: no-repeat;
background-position: center;
margin-top: 5px;
}
js代码：
var div2 = document.getElementById("div2");
var element = document.getElementById("text");
var btn = document.getElementById("continue");
var str = [
"我的生活像一只果子， 我漫不经心地咬了几口，但没有品尝味道，也没有注意自己在吃。活到这个年纪长成这个模样，不是我的责任。这个模样得到认可，它就是我的模样。我欣然接受,也别无选择。我就是这个女孩，一经确定永不改变。",
"经历过孤独的日子，我终于喜欢上自己的无知，与它们相处我感到惬意，如同那是一炉旺火。这时就该听任火焰缓缓燃烧，不说一句话，不评论任何事。必须在无知中自我更新。",
];
var nn = 0;
btn.onclick = function () {
if (nn < str.length) {
btn.style.display = "none";
var txt = str[nn];
var count = 0;
function type() {
if (count <= txt.length) {
element.value = txt.substring(0, count);
count++;
if (count == txt.length + 1) {
clearInterval(intervalID);
btn.style.display = "inline-block";
}
} else {
element.value = "";
count = 0;
}
}
var intervalID = setInterval(type, 30);
nn = nn + 1;
} else {
// 所有话说完后进行的其他操作
}
};
function showMessage() {
btn.style.display = "none";
var txt = str[nn];
var count = 0;
function type() {
if (count <= txt.length) {
element.value = txt.substring(0, count);
count++;
if (count == txt.length + 1) {
clearInterval(intervalID);
btn.style.display = "inline-block";
}
} else {
element.value = "";
count = 0;
}
}
var intervalID = setInterval(type, 30);
nn = nn + 1;
}
showMessage();
showMessage()函数的作用是在页面打开后自动进行打字机打印一句str[]中存储的语句。
总结
以上就是有关文字打印机样式的笔记内容，希望对各位有所帮助，作者也在学习中，如有解释不清楚或有误的地方，还请各位指正。