使用javascript键入效果不起作用
[英]Typing effect using javascript not working
问题描述
我想在段落上创建类型编写器效果，然后每隔10秒重复一次，但是我不希望屏幕尺寸小于768px时重复该效果吗？
我创建了一个打字机函数，该函数使用setTimeout（）函数缓慢地打印单词，并且在打印整个段落时，它等待5秒钟再次从头开始打印。
我写了这段代码，但是没有用。
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.about p{
color: #000;
font-size: 22px;
}
</style>
</head>
<body>
<div class="about" onload="typeWriter();">
<p id="text"></p>
</div>
<script>
var i = 0;
var w = window.matchMedia("(min-width: 768px)");
var txt = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ';
var speed = 50;
function typeWriter() {
if (i < txt.length) {
document.getElementById("text").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
else{
rep(w);
w.addListener(rep);
}
}
function rep(w) {
if (w.matches) {
setTimeout(function(){
i = 0;
speed = 50;
document.getElementById("text").innerHTML = '';
setTimeout(typeWriter, speed);
}, 5000);
}
}
</script>
</body>
</html>
2 个解决方案
解决方案1
0 2018-08-19 10:40:01
您会忘记启动typeWriter（）函数。 在JS代码的最后一行，添加
typeWriter();
并且这个开始有效。 与添加onload相比，这是启动代码的更好方法。 或者，您可以在body元素上添加onload。
解决方案2
0 2018-08-19 10:57:00
onload不适用于流动元素。 如W3中所述 ，仅以下元素起作用。
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
顺便说一句，您不应再在html中使用onload 。 混合HTML和javascript不是一个好习惯。 有时，网页中已经存在一个window.onload函数并覆盖您的onload（这很常见）。
从而，
var i = 0; var w = window.matchMedia("(min-width: 768px)"); var txt = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '; var speed = 50; function typeWriter() { if (i < txt.length) { document.getElementById("text").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } else{ rep(w); w.addListener(rep); } } function rep(w) { if (w.matches) { setTimeout(function(){ i = 0; speed = 50; document.getElementById("text").innerHTML = ''; setTimeout(typeWriter, speed); }, 5000); } } var x = document.getElementById("about"); x.addEventListener("load", typeWriter); //This is not working as div has no sign of loading window.addEventListener("load", typeWriter); //But window has. Try comment this, it will no longer work.)
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> .about p{ color: #000; font-size: 22px; } </style> </head> <body> <div id="about"> <p id="text"></p> </div> </body>
使用javascript / Jquery编写具有键入效果的文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.