Von JS implementierter Beispielcode für den Schreibmaschineneffekt-js-Tutorial-php.cn

Von JS implementierter Beispielcode für den Schreibmaschineneffekt

怪我咯

Freigeben： 2017-07-07 15:09:43

Original

1753 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!