Heim > Artikel > Web-Frontend > Von JS implementierter Beispielcode für den Schreibmaschineneffekt

Von JS implementierter Beispielcode für den Schreibmaschineneffekt

怪我咯Original: 2017-07-07 15:09:431797Durchsuche

In diesem Artikel wird hauptsächlich der von JS implementierte Schreibmaschineneffekt vorgestellt und die relevanten Implementierungstechniken von JavascriptTiming-Triggeringbenutzerdefinierten Funktionen analysiert, um den Tippausgabeeffekt in Form einer vollständigen Simulation zu simulieren Beispiel, das erforderlich ist. Freunde können sich auf

beziehen. Dieser Artikel beschreibt den von JS implementierten Schreibmaschineneffekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

<!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>

Das obige ist der detaillierte Inhalt vonVon JS implementierter Beispielcode für den Schreibmaschineneffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js-Namespace Beispielcode schreibenNächster Artikel：js-Namespace Beispielcode schreiben

In Verbindung stehende Artikel

Mehr sehen