搜索
搜索

使用javascript键入后隐藏文本

Renz C. Gohing 发表于 Dev
26
Renz C. Gohing

下面的代码片段将输入句子“这是第一句……”、“这是第二句……”、“这是第三句……”、“这是第四句……”与使用角度的打字机效果。

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

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>

任何回应将不胜感激。

伊瓜特米·加林

将循环选项设置为 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

javascript - 在 / 之前隐藏文本

使用 JS 隐藏文本

如何在焦点后隐藏文本？

更改javascript显示/隐藏文本功能

使用 css 在 onClick 处隐藏文本

使用jQuery显示/隐藏文本

编辑字段文本后隐藏文本输入布局的错误

在jQuery中单击任何按钮后如何隐藏文本

单击后隐藏文本输入和按钮

如何在动画后隐藏文本视图

使用Javascript / JQuery隐藏文字

用户在搜索栏上键入时，如何显示/隐藏文本区域值？

在javascript中找不到隐藏文本的ID

如何在视频以JavaScript结尾之前隐藏文本

在Javascript中隐藏文本字段及其标签

如何使用闪亮的actionButton显示和隐藏文本输出？

使用顶部固定导航时隐藏文本

使用密码切换显示或隐藏文本

使用jQuery更改图像也隐藏文本

辅助功能：使用媒体查询隐藏文本

如何使用硒读取python中的隐藏文本？

使用CSS隐藏文本不占用页面空间

如何使用jQuery循环显示/隐藏文本区域？

在jQuery中使用悬停显示和隐藏文本

使用Selenium WebDriver获取表行的隐藏文本？

如何使用 CSS 在悬停时显示隐藏文本

溢出的隐藏文本被截断

多次显示/隐藏文本

DjVu隐藏文本→PDF？

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档