使用javascript输入后隐藏文字

时间：2018-10-02 02:08:15

标签： javascript html css angularjs

下面的代码片段将键入句子“这是第一句话……”，“这是第二句……”，“这是第三句话……”，“这是第四句话。” “ ..”具有使用角度的打字机效果。

现在，我的问题是，有没有办法消除打字效果后的“这是第四句话……”？我只希望它显示所有句子“一次”而不是“循环”。

angular.module("angular.typewriter", [])
.directive("typewriter", ["$timeout", "$compile", function($timeout, $compile){
  return {
    restrict: "EA",
    template: "",
    scope: {
      typeSpeed: '@',
      loop: '=loop',
      loopDelay: '@',
      customStyle: '=customStyle',
      cursor: '=cursor',
      shell: '=shell',
      messages: '=',
      newline: '=newline'
    },
    link: function(scope, element, attrs){
      //console.log("Typewriter directive...");
      
      scope.typeSpeed = scope.typeSpeed || 100;
      scope.loopDelay = scope.loopDelay || 2000;
      scope.customStyle = scope.customStyle || false;
      scope.cursor = scope.cursor || true;
      scope.shell = scope.shell || false;
      scope.newline = scope.newline || false;
      
      if(scope.cursor){
        var contentCursor = angular.element('<span class="cursor"> |</span>');
        contentCursor.insertAfter(element);
        $compile(contentCursor)(scope);
      }
      
      if(scope.shell){
        var contentShell = angular.element('<span class="shell" style="font-family: \'Consolas\', \'Courier New\', \'Courier\'">$ </span>');
        contentShell.insertBefore(element);
        $compile(contentShell)(scope);
      }
      
      scope.typewrite = function(element, text, n, loop){
        if(n<text.length+1){
          if(text.substring(n-1,n)=='<'){
            $timeout(function(){
              scope.typewrite(element, text, n+2, scope.loop);
            }, scope.loopDelay);
          }
          else{
            element.html(text.substring(0,n));
            $timeout(function(){
              scope.typewrite(element, text, n+1, scope.loop);
            }, scope.typeSpeed);
          }
        }
        else if(scope.loop) {
          $timeout(function(){
            scope.typewrite(element, text, 0, scope.loop);
          }, scope.loopDelay);
        }
      }
      
      scope.typewrite_msgs = function(element, text_array, array_idx, n, loop){
        if(n<text_array[array_idx].length+1){
          
          element.html(text_array[array_idx].substring(0,n));
          $timeout(function(){
            scope.typewrite_msgs(element, text_array, array_idx, n+1, loop);
          }, scope.typeSpeed);
        }
        else if(array_idx+1 < text_array.length){
          $timeout(function(){
            scope.typewrite_msgs(element, text_array, array_idx+1, 0, loop);
          }, scope.loopDelay);
        }
        else if(scope.loop) {
          $timeout(function(){
            scope.typewrite_msgs(element, text_array, 0, 0, loop);
          }, scope.loopDelay);
        }
      }
      
      
      if(scope.messages){
        
        if(scope.newline) {
          var whole_msg = '';
          angular.forEach(scope.messages, function(value, key){
            whole_msg = whole_msg + value + "<br>";
          })
          scope.typewrite(element, whole_msg, 0, scope.loop);
        }
        else {
          scope.typewrite_msgs(element, scope.messages, 0, 0, scope.loop, scope.newline);
        }
      }
      else {
        var text = element.html();
        //var length = text.length;
        //console.log(text + ": " + length);
        scope.typewrite(element, text, 0, scope.loop);
      }
      
      if(!scope.customStyle){
        element.css("font-family", '"Consolas", "Courier New", "Courier"');
        element.css("background-color", "#000000");
        element.css("color", "#f0f0f0");
      }
    }
  }	
}]);

var demoApp = angular.module("demoapp", ["angular.typewriter"]);

demoApp.controller("mainCtrl", ["$scope", function($scope){
  
  console.log("Controller...");
  
  $scope.sentences = ["This is the first sentence ...", "This is the second sentence ... ", "This is the third sentence ...", "This is the forth sentence ..." ];
}]);
  <html ng-app="demoapp">
<head>
  <style>
    .shell-input {
      display: inline-block; width:500px; height:40px; background-color: #000000;margin:auto; border-radius:10px;padding:10px;
    }
    .title {
      padding-top:20px;display:inline-block;float:left;margin-bottom:5px;font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif;font-weight:300;color:blue;
    }
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  background-color: #eeeeee;
  color: #949494;
}

* {
  box-sizing: border-box;
}

header {
margin-bottom:60px;
  z-index:2;
  background-color: #3f51b5;
  padding: 1em 3em 1em 3em;
  color: #FFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  position: relative;
}
  </style>
</head>
  <body ng-controller="mainCtrl" style="text-align: center;"> 
    <header>
    <h1>Angular Typewriter</h1>
    </header>
    
    <div style="width:500px;display:inline-block;">

      <span class="title">Messages One-line Loop, speed:150</span>
      <span class="shell-input" style="text-align:left;">
        <span class="typewriter" typewriter type-speed="50" loop=false messages="sentences" loop-delay="1000" custom-style=false cursor=true shell=false newline=false>Welcome, type-write your message here!</span>
      </span>

    </div>
  </body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>

  

    <script  src="js/index.js"></script>

任何回复将不胜感激。

1 个答案:

答案 0 :(得分：0)

将循环选项设置为false可以防止打字循环消息。清空输出的最简单方法是在邮件列表中添加空邮件。

我更新了代码，并在列表中添加了空格消息。

angular.module("angular.typewriter", [])
.directive("typewriter", ["$timeout", "$compile", function($timeout, $compile){
  return {
    restrict: "EA",
    template: "",
    scope: {
      typeSpeed: '@',
      loop: '=loop',
      loopDelay: '@',
      customStyle: '=customStyle',
      cursor: '=cursor',
      shell: '=shell',
      messages: '=',
      newline: '=newline'
    },
    link: function(scope, element, attrs){
      //console.log("Typewriter directive...");
      
      scope.typeSpeed = scope.typeSpeed || 100;
      scope.loopDelay = scope.loopDelay || 2000;
      scope.customStyle = scope.customStyle || false;
      scope.cursor = scope.cursor || true;
      scope.shell = scope.shell || false;
      scope.newline = scope.newline || false;
      
      if(scope.cursor){
        var contentCursor = angular.element('<span class="cursor"> |</span>');
        contentCursor.insertAfter(element);
        $compile(contentCursor)(scope);
      }
      
      if(scope.shell){
        var contentShell = angular.element('<span class="shell" style="font-family: \'Consolas\', \'Courier New\', \'Courier\'">$ </span>');
        contentShell.insertBefore(element);
        $compile(contentShell)(scope);
      }
      
      scope.typewrite = function(element, text, n, loop){
        if(n<text.length+1){
          if(text.substring(n-1,n)=='<'){
            $timeout(function(){
              scope.typewrite(element, text, n+2, scope.loop);
            }, scope.loopDelay);
          }
          else{
            element.html(text.substring(0,n));
            $timeout(function(){
              scope.typewrite(element, text, n+1, scope.loop);
            }, scope.typeSpeed);
          }
        }
        else if(scope.loop) {
          $timeout(function(){
            scope.typewrite(element, text, 0, scope.loop);
          }, scope.loopDelay);
        }
      }
      
      scope.typewrite_msgs = function(element, text_array, array_idx, n, loop){
        if(n<text_array[array_idx].length+1){
          
          element.html(text_array[array_idx].substring(0,n));
          $timeout(function(){
            scope.typewrite_msgs(element, text_array, array_idx, n+1, loop);
          }, scope.typeSpeed);
        }
        else if(array_idx+1 < text_array.length){
          $timeout(function(){
            scope.typewrite_msgs(element, text_array, array_idx+1, 0, loop);
          }, scope.loopDelay);
        }
        else if(scope.loop) {
          $timeout(function(){
            scope.typewrite_msgs(element, text_array, 0, 0, loop);
          }, scope.loopDelay);
        } else {
          scope.typewrite_msgs(element, [''], 0, 0, loop);
        }
      }
      
      
      if(scope.messages){
        
        if(scope.newline) {
          var whole_msg = '';
          angular.forEach(scope.messages, function(value, key){
            whole_msg = whole_msg + value + "<br>";
          })
          scope.typewrite(element, whole_msg, 0, scope.loop);
        }
        else {
          scope.typewrite_msgs(element, scope.messages, 0, 0, scope.loop, scope.newline);
        }
      }
      else {
        var text = element.html();
        //var length = text.length;
        //console.log(text + ": " + length);
        scope.typewrite(element, text, 0, scope.loop);
      }
      
      if(!scope.customStyle){
        element.css("font-family", '"Consolas", "Courier New", "Courier"');
        element.css("background-color", "#000000");
        element.css("color", "#f0f0f0");
      }
    }
  }	
}]);

var demoApp = angular.module("demoapp", ["angular.typewriter"]);

demoApp.controller("mainCtrl", ["$scope", function($scope){
  
  console.log("Controller...");
  
  $scope.sentences = ["This is the first sentence ...", "This is the second sentence ... ", "This is the third sentence ...", "This is the forth sentence ...", " "];
}]);
<html ng-app="demoapp">
<head>
  <style>
    .shell-input {
      display: inline-block; width:500px; height:40px; background-color: #000000;margin:auto; border-radius:10px;padding:10px;
    }
    .title {
      padding-top:20px;display:inline-block;float:left;margin-bottom:5px;font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif;font-weight:300;color:blue;
    }
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  background-color: #eeeeee;
  color: #949494;
}

* {
  box-sizing: border-box;
}

header {
margin-bottom:60px;
  z-index:2;
  background-color: #3f51b5;
  padding: 1em 3em 1em 3em;
  color: #FFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  position: relative;
}
  </style>
</head>
  <body ng-controller="mainCtrl" style="text-align: center;"> 
    <header>
    <h1>Angular Typewriter</h1>
    </header>
    
    <div style="width:500px;display:inline-block;">

      <span class="title">Messages One-line Loop, speed:150</span>
      <span class="shell-input" style="text-align:left;">
        <span class="typewriter" typewriter type-speed="50" loop=false messages="sentences" loop-delay="1000" custom-style=false cursor=true shell=false newline=false>Welcome, type-write your message here!</span>
      </span>

    </div>
  </body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>

  

    <script  src="js/index.js"></script>

相关问题
最新问题