zoukankan      html  css  js  c++  java
  • 使用jq实现打印机的效果

    本例中使用的是jq和es6的语法,代码如下:

    html:

    <div id="box">
      this is test <br/>
       这是测试用的
    </div>
    

    css样式表:

      <style>
        #box {
          display: none;
          border: 1px solid #ccc;
          margin: 20px 30em;
          padding: 20px;
          line-height: 1.8;
          font: 14px/1.8 "microsoft yahei";
        }
    
        #box:after {
          content: "_";
          animation: flash .6s steps(2, start) infinite;
        }
    
        @keyframes flash {
          0% {
            visibility: visible;
          }
          100% {
            visibility: hidden;
          }
        }
    
      </style>
    

     jq:

    <script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>
    <script>
      $(() => {
        let index = 0;
        let code = $("#box").html();
        $("#box").html("").css("display","block");
        let start = () => {
          index++;
          if (index <= code.length) {
            switch (code.charAt(index)) {
              case "<":
                index = code.indexOf(">", index);
                break;
              case "&":
                index = code.indexOf(";", index);
                break;
            }
            $("#box").html(code.substring(0, index));
            setTimeout(start, 100)
          }
        };
        start();
      })
    </script>
    

      效果如下:

  • 相关阅读:
    Maximal Square
    Count Complete Tree Nodes
    Rectangle Area
    Implement Stack using Queues
    Basic Calculator
    Invert Binary Tree
    Summary Ranges
    Basic Calculator II
    Majority Element II
    Kth Smallest Element in a BST
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/8108385.html
Copyright © 2011-2022 走看看