如何将HTML，CSS和Javascript组合成HTML代码

时间：2015-10-28 19:35:39

标签： javascript html css

我目前正在与一个设计师团队合作开展一个项目，需要将HTML / CSS / JS代码组合成HTML。

我已经在CodePen中单独编写了这些代码：

HTML

<button id="replay">Replay</button>
<br />
<pre id="logo"></pre>

CSS

 #logo { background: black;display: inline-block;color: #00d600;font-weight: normal;}

JS

var text = [
  [' ', ',', '-', '-', '-', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ',', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ',', '-', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
  ['\'', ' ', ' ', '.', '-', '-', '.', '/', ' ', ',', '-', '-', '-', '.', ' ', ',', '-', '-', ',', '-', '-', ',', '-', '-', '.', '`', '-', '-', '\'', ' ', ',', '-', '-', '-', '.', '\'', ' ', ' ', ' ', '.', '-', '\'', ' ', ' ', ',', '-', '-', ',', '-', '-', '.', ',', '-', '-', ',', '-', '-', ',', ' ', ' ', ',', '-', '-', '-', '.', ' ', ' '],
  ['|', ' ', ' ', '|', ' ', ' ', ' ', ' ', '|', ' ', '.', '-', '.', ' ', '|', '|', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', '|', ',', '-', '-', '.', '|', ' ', '.', '-', '-', '\'', '`', '.', ' ', ' ', '`', '-', '.', ' ', '\'', ' ', ',', '-', '.', ' ', ' ', '|', '|', ' ', ' ', ' ', ' ', ' ', ' ', '\\', '(', ' ', ' ', '.', '-', '\'', ' ', ' '],
  ['\'', ' ', ' ', '\'', '-', '-', '\'', '\\', '\'', ' ', '\'', '-', '\'', ' ', '\'', '|', ' ', ' ', '|', ' ', ' ', '|', ' ', ' ', '|', '|', ' ', ' ', '|', '\\', ' ', '`', '-', '-', '.', '.', '-', '\'', ' ', ' ', ' ', ' ', '|', '\\', ' ', '\'', '-', '\'', ' ', ' ', '|', '|', ' ', ' ', '|', '|', ' ', ' ', '|', '.', '-', '\'', ' ', ' ', '`', ')', ' '],
  [' ', '`', '-', '-', '-', '-', '-', '\'', ' ', '`', '-', '-', '-', '\'', ' ', '`', '-', '-', '`', '-', '-', '`', '-', '-', '\'', '`', '-', '-', '\'', ' ', '`', '-', '-', '-', '\'', '`', '-', '-', '-', '-', '-', '\'', ' ', ' ', '`', '-', '-', '`', '-', '-', '\'', '`', '-', '-', '\'', '\'', '-', '-', '\'', '`', '-', '-', '-', '-', '\'', ' ', ' ']
];

$(document).ready(function() {
  var $logo = $('#logo');
  var currentlyDrawing = false;

  function drawLogo() {
    currentlyDrawing = true;
    $logo.css('color', '#00d600');
    var s = '';

    function writeNext(i, j) {
      s += text[i][j];
      $logo.html(s);
      j += 1;
      if (j >= text[i].length) {
        i += 1;
        j = 0;
        s += '<br />';
        $logo.html(s);
      }
      if (i < text.length) {
        setTimeout(function() {
          writeNext(i, j);
        }, Math.random() * 20);
      } else {
        $logo.css('color', '#00FF00');
        currentlyDrawing = false;
      }
    }

    writeNext(0, 0);
  }

  $('#replay').click(function() {
    if (!currentlyDrawing) {
      drawLogo();
    }
  });
  drawLogo();
})

1 个答案:

答案 0 :(得分：0)

确保包含jQuery以使您的JavaScript工作！

<html>
<head>
    <style>
      #logo { background: black;display: inline-block;color: #00d600;font-weight: normal;}
    </style>
</head>
<body>
  <button id="replay">Replay</button>
  <br />
  <pre id="logo"></pre>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
    var text = [
      [' ', ',', '-', '-', '-', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ',', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ',', '-', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
      ['\'', ' ', ' ', '.', '-', '-', '.', '/', ' ', ',', '-', '-', '-', '.', ' ', ',', '-', '-', ',', '-', '-', ',', '-', '-', '.', '`', '-', '-', '\'', ' ', ',', '-', '-', '-', '.', '\'', ' ', ' ', ' ', '.', '-', '\'', ' ', ' ', ',', '-', '-', ',', '-', '-', '.', ',', '-', '-', ',', '-', '-', ',', ' ', ' ', ',', '-', '-', '-', '.', ' ', ' '],
      ['|', ' ', ' ', '|', ' ', ' ', ' ', ' ', '|', ' ', '.', '-', '.', ' ', '|', '|', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', '|', ',', '-', '-', '.', '|', ' ', '.', '-', '-', '\'', '`', '.', ' ', ' ', '`', '-', '.', ' ', '\'', ' ', ',', '-', '.', ' ', ' ', '|', '|', ' ', ' ', ' ', ' ', ' ', ' ', '\\', '(', ' ', ' ', '.', '-', '\'', ' ', ' '],
      ['\'', ' ', ' ', '\'', '-', '-', '\'', '\\', '\'', ' ', '\'', '-', '\'', ' ', '\'', '|', ' ', ' ', '|', ' ', ' ', '|', ' ', ' ', '|', '|', ' ', ' ', '|', '\\', ' ', '`', '-', '-', '.', '.', '-', '\'', ' ', ' ', ' ', ' ', '|', '\\', ' ', '\'', '-', '\'', ' ', ' ', '|', '|', ' ', ' ', '|', '|', ' ', ' ', '|', '.', '-', '\'', ' ', ' ', '`', ')', ' '],
      [' ', '`', '-', '-', '-', '-', '-', '\'', ' ', '`', '-', '-', '-', '\'', ' ', '`', '-', '-', '`', '-', '-', '`', '-', '-', '\'', '`', '-', '-', '\'', ' ', '`', '-', '-', '-', '\'', '`', '-', '-', '-', '-', '-', '\'', ' ', ' ', '`', '-', '-', '`', '-', '-', '\'', '`', '-', '-', '\'', '\'', '-', '-', '\'', '`', '-', '-', '-', '-', '\'', ' ', ' ']
      ];

      $(document).ready(function() {
      var $logo = $('#logo');
      var currentlyDrawing = false;

      function drawLogo() {
        currentlyDrawing = true;
        $logo.css('color', '#00d600');
        var s = '';

        function writeNext(i, j) {
          s += text[i][j];
          $logo.html(s);
          j += 1;
          if (j >= text[i].length) {
            i += 1;
            j = 0;
            s += '<br />';
            $logo.html(s);
          }
          if (i < text.length) {
            setTimeout(function() {
              writeNext(i, j);
            }, Math.random() * 20);
          } else {
            $logo.css('color', '#00FF00');
            currentlyDrawing = false;
          }
        }

        writeNext(0, 0);
      }

      $('#replay').click(function() {
        if (!currentlyDrawing) {
          drawLogo();
        }
      });
      drawLogo();
      })
  </script>
</body>
</html>