Maison > Article > interface Web > Exemple de code d'effet machine à écrire implémenté par JS
Cet article présente principalement l'effet machine à écrire implémenté par JS et analyse les techniques d'implémentation pertinentes du javascriptdéclenchement temporelfonction personnalisée pour simuler l'effet de sortie de frappe sous la forme d'un ensemble complet exemple, qui est obligatoire Les amis peuvent se référer à
Cet article décrit l'effet machine à écrire implémenté par JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>JS打字机效果</title>
<meta name="description" content="">
<meta name="author" content="Administrator">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<style type = "text/css">
#main {
width: 80%;
height: 750px;
margin: auto;
padding: 10px;
background: #cfe1ca;
border: 10px outset #f9c6aa;
line-height: 30px;
color: #9f3c61;
font-size: 18px;
}
p {
text-indent: 30px;
}
</style>
<script type = "text/javascript">
var typeWriter = {
msg: function(msg){
return msg;
},
len: function(){
return this.msg.length;
},
seq: 0,
speed: 150,//打字时间(ms)
type: function(){
var _this = this;
document.getElementById("main").innerHTML = _this.msg.substring(0, _this.seq);
if (_this.seq == _this.len()) {
_this.seq = 0;
clearTimeout(t);
}
else {
_this.seq++;
var t = setTimeout(function(){_this.type()}, this.speed);
}
}
}
window.onload = function(){
alert("welcome to http://www.jb51.net")
var msg = "JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可";
function getMsg(){
return msg;
}
typeWriter.msg = getMsg(msg);
typeWriter.type();
}
</script>
</head>
<body>
<p id = "main"> </p>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!