JS로 구현된 타자기 효과 샘플 코드-JS 튜토리얼-php.cn

JS로 구현된 타자기 효과 샘플 코드

怪我咯

풀어 주다： 2017-07-07 15:09:43

원래의

1857명이 탐색했습니다.

이 글에서는 주로 JS에서 구현한 타자기 효과를 소개하고, javascripttiming Triggercustom function 관련 구현 기술을 분석하여 완전한 예제 형식으로 타이핑 출력 효과를 시뮬레이션합니다. 도움이 필요한 친구들은 참고할 수 있습니다. 이 문서에서는 JS에서 구현한 타자기 효과의 예를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다:

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

로그인 후 복사

위 내용은 JS로 구현된 타자기 효과 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!