网页学习 - 屏幕打字机

背景介绍
  • 基本介绍
    打字机(Typewriter)是用以代替手工书写、 誊抄、 复写和刻制蜡板的机器。 打字机是用于书写的一种机械的,电机的,或电子的设备。使用时,通过敲击键盘上的某一个按键,该按键对应的字符的字模会打击到色带上,从而在纸或其他媒介上打出该字符。每次字符的敲打,打字机都会移动纸的位置,以备打印下一个字。
  • 打印机历史
    19世纪时,办公室里办事员一统天下。他们坐在高级写字台旁,用手费劲地写着各种东西。定货单、发货清单、商务函件和报表,全都是用笔蘸墨水写成的。多少年来,许多人试图发明一种使这个工作变得容易些、快速些,并且更为有效的机器。早在1714年,英国工程师亨利·米尔便获得了一项关于写字机器的专利,但没有留下这个东西的任何图样。以后相继发明了多种不同类型的打字机,但都没有具备实际使用价值,未能正式生产。
    世界上最早的打字机诞生于1808年,它是由意大利人佩莱里尼·图里发明的。他发明打字机的动机是帮助自己的一位失明女朋友。后来这台打字机失传了,所以我们今天无法知道它的外形与结构,但使用该打字机打出的信件至今仍保存在意大利勒佐市的档案馆里。首次投入商品化生产的英文打字机是由丹麦哥本哈根的尤尔根斯机械公司出品的,该机器的发明人是一位名叫马林·汉森的神父。第一台实用即真正的打字机的发明人是一位美国人,他叫克里斯托夫·拉森·肖尔斯。19世纪60年代,克里斯多弗·拉撒姆·肖尔斯(又译作克里斯托夫·拉森·肖尔斯) 和卡洛斯·格利登正试制一台能自动给书编页码的机器。忽然,格利登向肖尔斯讨教,为什么机器不同时也在书本上印字。肖尔斯奋起应战,制作了一架木制的打字机模型。肖尔斯打字机的文字盘和今天的打字机基本一样,而且设计了打完字后能自动移位的装置,打出来的字也很清晰。但肖尔斯打字机的体积很大,外形很难看,而且操作也比较麻烦,因为他设计的字盘是大写和小写字母分别有自己的键,键盘上有78个键。另外,这种打字机无法观察到打出来的字,即使打错了,也要等整页纸打完后才能看到。
预备知识
成果展示
  • 一副对联表达心声:
    上联:这个需求很简单
    下联:怎么实现我不管
    横批:明天上线
代码如下:
<!DOCTYPE html>
<html>
  <head> 
      <meta charset="utf-8" />
      <title></title>
      <style>
          body {
              background-image: url(img/bg.png);
          }
          
          #div1 {
              color: white;
              padding-top: 90px;
              padding-left: 30px;
          }
      </style>
  </head>

  <body>
      <div id='div1'></div>
      <script type="text/javascript">
          var count = 0;
          var typingtext = "<b style='color:red'>记忆的永恒 :&nbsp;</b><br>-------------<br>记忆是一个人最基本的感情根基,<br>唯有记忆,才能让我们拨开往事的烟云,<br>寻找心灵深处的那份亘古真挚的人性情感,而真正打动自己的,<br>无疑是属于自己的那份记忆的永恒,那片心灵的归宿。<br>它让我们每个人都有自己的故事,<br>都有涅槃后返璞归真的通达世界。<br>八月星河夜正长,<br>迢迢星河云茫茫。<br>记忆,<br>永远是人生中最深邃的风景,<br>唯有美的记忆,才会有诗意人生。<br>记忆里面的风景,总是会安安静静,没有任何的风雨,也没有任何的犹豫和踌躇。";
          var myBlock = document.getElementById('div1');

          function type() {
              if(count <= typingtext.length) {
                  myBlock.innerHTML = typingtext.substring(0, count);
                  count++;
              } else {
                  window.clearInterval(intervalID);
              }
          }
          var intervalID = window.setInterval(type, 80);
      </script>
  </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容