집 > 기사 > 웹 프론트엔드 > JS로 구현된 타자기 효과의 전체 예

JS로 구현된 타자기 효과의 전체 예

高洛峰원래의: 2017-02-06 10:56:251764검색

이 기사의 예에서는 JS에서 구현한 타자기 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

<!DOCTYPE html>
<html>
  <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>
  <div id = "main"> </div>
 </body>
</html>

이 글이 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

JS에서 구현된 타자기 효과의 더 완전한 예를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：네이티브 js는 타이핑 애니메이션 게임을 구현합니다.다음 기사：네이티브 js는 타이핑 애니메이션 게임을 구현합니다.

JS로 구현된 타자기 효과의 전체 예

관련 기사