JavaScript的打字效果：一旦所有文本都被“键入”，如何删除光标
[英]Typing effect with JavaScript: How to remove cursor once all the text is “typed”
问题描述
我正在制作一个个人网页，并且正在使用JavaScript在名为“我的故事”的标题下创建键入效果。 文本类型很好，但是一旦完成输入，光标将停留在底部。 我需要更改/添加代码来解决此问题？
输入文本后，我希望光标消失。 没有错误消息出现。
// Displays "My Story" with a typing effect var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."]; var _PART = 0; var _PART_INDEX = 0; var _INTERVAL_VAL; var _ELEMENT = document.querySelector("#text"); var _CURSOR = document.querySelector("#cursor"); function Type() { var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1); _ELEMENT.innerHTML = text; _PART_INDEX++; if (text === _CONTENT[_PART]) { _CURSOR.style.display = "none"; clearInterval(_INTERVAL_VAL); setTimeout(function() { _INTERVAL_VAL = setInterval(Delete, 50); }, 1000); } } _INTERVAL_VAL = setInterval(Type, 100);
body { background: dodgerblue !important; color: white !important; } h3 { border-left: 6px solid whitesmoke; background-color: lightslategray; } p5 { text-align: justify; } p4 { text-align: justify; } #container { text-align: center; } #text { display: inline-block; vertical-align: middle; color: white; letter-spacing: 2px; } #cursor { display: inline-block; vertical-align: middle; width: 3px; height: 50px; background-color: white; animation: blink .75x step-end infinite; } @keyframes blink { from, to { background-color: transparent; } 50% { background-color: black; } } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: whitesmoke; } ::-webkit-scrollbar-thumb { background: grey; } ::-webkit-scrollbar-thumb:hover { background: dodgerblue; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="row align-items-start"> <div class="col"> <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Me</a> </li> </ul> </nav> <header> <title> Robert Smith </title> </header> <body> <p class="bg-primary text-white"> </div> <div class="col ml-auto"></div> <div class="col"></div> </div> <div class="row"> <div class="col"> <h1> <b> <div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div> </b> </h1> <h2 class="display-4 ml-3"> I want to make a difference. </h2> <h3> <div class="ml-3"> My Story </div> </h3> <divT> <p1> <div id="container"> <div id="text"></div> <div id="cursor"></div> </div> <span class="border border-dark"> <div class = "ml-3" > <br> </div> </span> </p1> <p6> <div class="ml-3"> I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours. </div> </p6> </divT> <h4> Contact me </h4> <p6> <ul3> <li>Email: robertethansmith@yahoo.com</li> <li>GitHub: roberto257</li> </ul3> </p6> </div> <div class="col"> <script language="javascript"> //Changes images when clicked function changeImage() { if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") { document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG"; } else { document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG"; } } function changeImage2() { if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") { document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG"; } else { document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG"; } } </script> <p2> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" /> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" /> </p2> </div> <div class="col mt-5"> <p5> <br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own. <br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br> </p5> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python"> <p4> <br> My current skills include but are not limited to: <ul2> <li>Python</li> <li>Web Development</li> <li>JavaScript</li> <li>Java</li> </ul2> I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br> </p4> </div> </div> <div class="row"> <div class="col"> </div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
4 个解决方案
解决方案1
1 2019-05-21 20:05:50
也许试试看？ 我要添加伪类：之后， content: '|' 并在最后删除该类。
(function(){ /* cut the text for demo */ let text = "When I was 15, I took a Robotics Honors course at my high school." let bubu = document.getElementById('bubu'); for( let i = 0; i < text.length; i++ ){ setTimeout( function(){ bubu.innerText += text.charAt(i); }, i*100); } setTimeout(function(){ document.getElementById('bubu').classList.remove('bubu'); }, (text.length)*100); /* Set removing Timeout, synchronous to the end of typing */ })();
#bubu { text-align: center; width: 400px; font-size: 20px; } .bubu:after {content: '|'; color: red;}
<div id="bubu" class="bubu"></div>
ps我用过text.split('') -将每个字符排序成数组...
更改→ text.charAt(i); 由于评论*
解决方案2
0 2019-05-21 20:06:03
除非我误解了您的要求，否则看起来一旦输入完成，您似乎只是想Delete函数而被触发。 这样的事情应该可以解决问题：
function Delete() {
_CURSOR.style.display = "none";
}
解决方案3
0 2019-05-21 20:16:19
就像您要从数组中插入文本一样，在文本/ innerHtml之后也插入光标。 尝试运行该代码段，这就是您所期望的吗？ 仅进行更改_ELEMENT.appendChild(_CURSOR);
// Displays "My Story" with a typing effect var _CONTENT = ["When I was 15, I took a Robotics Honors course at my high school. We designed and built robots using VEX robotics kits. To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it. This is what inspired me to code. Before long, I was researching software development and decided the best language for me to start with would be Python. That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer capabilities from this point on."]; var _PART = 0; var _PART_INDEX = 0; var _INTERVAL_VAL; var _ELEMENT = document.querySelector("#text"); var _CURSOR = document.querySelector("#cursor"); function Type() { var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1); _ELEMENT.innerHTML = text; _ELEMENT.appendChild(_CURSOR); _PART_INDEX++; if (text === _CONTENT[_PART]) { _CURSOR.style.display = "none"; clearInterval(_INTERVAL_VAL); setTimeout(function() { _INTERVAL_VAL = setInterval(Delete, 50); }, 1000); } } _INTERVAL_VAL = setInterval(Type, 100);
body { background: dodgerblue !important; color: white !important; } h3 { border-left: 6px solid whitesmoke; background-color: lightslategray; } p5 { text-align: justify; } p4 { text-align: justify; } #container { text-align: center; } #text { display: inline-block; vertical-align: middle; color: white; letter-spacing: 2px; } #cursor { display: inline-block; vertical-align: middle; width: 3px; height: 50px; background-color: white; animation: blink .75x step-end infinite; } @keyframes blink { from, to { background-color: transparent; } 50% { background-color: black; } } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: whitesmoke; } ::-webkit-scrollbar-thumb { background: grey; } ::-webkit-scrollbar-thumb:hover { background: dodgerblue; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="row align-items-start"> <div class="col"> <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Me</a> </li> </ul> </nav> <header> <title> Robert Smith </title> </header> <body> <p class="bg-primary text-white"> </div> <div class="col ml-auto"></div> <div class="col"></div> </div> <div class="row"> <div class="col"> <h1> <b> <div class = "p-4 mt-5 align-baseline border bg-light text-dark" style = "width:300px" > Robert Smith </div> </b> </h1> <h2 class="display-4 ml-3"> I want to make a difference. </h2> <h3> <div class="ml-3"> My Story </div> </h3> <divT> <p1> <div id="container"> <div id="text"> </div> <div id="cursor"></div> </div> <span class="border border-dark"> <div class = "ml-3" > <br> </div> </span> </p1> <p6> <div class="ml-3"> I love to code, whether it's building websites like this <br> or turning my ideas into a reality. <br> I hope I can also do the same for yours. </div> </p6> </divT> <h4> Contact me </h4> <p6> <ul3> <li>Email: robertethansmith@yahoo.com</li> <li>GitHub: roberto257</li> </ul3> </p6> </div> <div class="col"> <script language="javascript"> //Changes images when clicked function changeImage() { if (document.getElementById("imgClickAndChange").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG") { document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith3.JPG"; } else { document.getElementById("imgClickAndChange").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG"; } } function changeImage2() { if (document.getElementById("imgClickAndChange2").src == "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG") { document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith1.JPG"; } else { document.getElementById("imgClickAndChange2").src = "file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG"; } } </script> <p2> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange" onclick="changeImage()" /> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/robertsmith2.JPG" class="img-fluid rounded img-thumbnail" alt="Me" id="imgClickAndChange2" onclick="changeImage2()" /> </p2> </div> <div class="col mt-5"> <p5> <br> I have been coding for over a year now and am comfortable coding and building applications and developing programs on my own. <br><b>I am not afraid to tackle <ins>any</ins> challenge a client presents me and will only decline if I truly feel that I cannot complete the proposed task to the sufficient expectations of the client.</b> <br> </p5> <img src="file:///Users/roberto257/Desktop/Coding/Portfolio/Website/python.png" alt="Python"> <p4> <br> My current skills include but are not limited to: <ul2> <li>Python</li> <li>Web Development</li> <li>JavaScript</li> <li>Java</li> </ul2> I am <i> always </i> working to improve my current skills in languages, frameworks, libraries, and APIs and hope to continue to learn new ones. <br> </p4> </div> </div> <div class="row"> <div class="col"> </div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
解决方案4
0 2019-05-21 21:28:11
我喜欢OPTIMUS PRIME idea（+1），但它也应该与setInterval更好地配合使用
我有一些评论：
1-使用textContent更合适（如果您不使用html标签）
2-使用箭头功能影响局部变量
3- 您不需要CSS来设置闪烁光标
所以我做了这个（它使用html标签） ，如果禁用了JS（没有动画，但显示了文本），它也可以工作
Text_Typed('bubu'); function Text_Typed( eID, delay = 100) { let element = document.getElementById(eID), txt = element.innerHTML, Text_Sz = txt.length, sItv_id = null, Text_html = '', loop_i = -1, Cursor_i = 1; element.textContent = '▮'; // or '|'; sItv_id = setInterval(_=>{ loop_i++; if (loop_i < Text_Sz) { let n, inC = txt.charAt(loop_i); switch (inC) { case '<': n = txt.indexOf('>',loop_i); if (n>0) { inC = txt.substring(loop_i,++n); loop_i = --n; } break; case '&': n = txt.indexOf(';',loop_i); if (n>0) { inC = txt.substring(loop_i,++n); loop_i = --n; } break; } Cursor_i = (Cursor_i+1) % 2; Text_html += inC; element.innerHTML = Text_html + ((Cursor_i)?'▮':'▯'); // or '|'   ▉ } else { element.innerHTML = Text_html; clearInterval(sItv_id); } }, delay); }
#bubu { text-align : center; width : 400px; font-size : 20px; }
<div id="bubu" > <p>When I was 15, I took a Robotics Honors course at my high school.</p> <p>We designed and built robots using <span style="color:crimson">VEX robotics kits</span>.</p> <p>To me, the most interesting part was building the drag-and-drop code and uploading it to the robot to control it.</p> <p>This is what inspired me to code.</p> <p>Before long, I was researching software development and decided the best language for me to start with would be Python.</p> <p>That was a year ago, and since then I've worked in HTML, CSS, JavaScript, and Java, and plan to further expand my developer <b>capabilities</b> from this point on.</p> </div>
在没有setTimeout的情况下在JavaScript中模拟文本键入效果
[英]Simulating text typing effect in JavaScript without setTimeout
如何捕获Javascript textarea中的事件以记录所有键入的文本
[英]How to capture events in Javascript textarea for recording all typed text
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.