Article directory
Requirements: Realize text typewriter effect
Requirement: It is required that the text of a sentence can appear in the text box one by one. After each sentence is finished, a button will appear. After clicking the button, the text of the new sentence will continue to be printed until all sentences are printed.
The effect is as follows:
code show as below:
html code:
<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 code:
* {
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 code:
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();
The function of showMessage() function is to automatically type a sentence stored in str[] after the page is opened.
Summarize
The above are the notes about text printer styles. I hope it will be helpful to you. The author is also learning. If there are any unclear or wrong explanations, please correct me.