Dieses Mal bringe ich Ihnen JS zum wörtlichen Drucken von Text mit JS. Hier ist ein praktischer Fall, schauen wir uns das an.
Das Beispiel in diesem Artikel beschreibt die Implementierung eines einfachen Textdruckeffekts Wort für Wort mithilfe von JavaScript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Werfen wir zunächst einen Blick auf den Laufeffekt:
Der spezifische Code lautet wie folgt folgt:
<!DOCTYPE>
<html>
<head>
<title> js打字效果</title>
<meta charset="utf-8">
</head>
<style type="text/css">
p {
width:980px;
margin:10px auto;
background:#F3E6EA;
border:2px outset #f9c6aa;
color:green;
}
</style>
<script type="text/javascript">
var i=1;
function write()
{
var id=document.getElementById("main");
var msg="JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可";
var len=msg.length;
var msg1=msg.substring(0,i);
id.innerHTML=msg1;
if(i==len){clearInterval(t)}
else
i++;
}
function time1()
{
var t=setInterval(function(){write()},50);
}
</script>
<body onload=time1()>
<p id="main"></p>
</body>
</html>Glauben Sie es. Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Ausführliche Erläuterung der Verwendung des Vuex-Statusmanagements
Das obige ist der detaillierte Inhalt vonJS sorgt dafür, dass Text wörtlich gedruckt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
