WEB前端教程：摩斯电码翻译器

学习如何通过浏览器 API 来控制视频和音频的播放

课程目标

学习如何通过浏览器 API 来控制视频和音频的播放。
本节通过制作一个莫斯电码翻译器，熟悉 JavaScript 事件 DOM 相关知识，学习 JavaScript 音频相关内容.

阅读学习

MDN 视频和音频 API(opens new window)
MDN CSS 教程(opens new window)
MDN JavaScript 教程(opens new window)
编码：隐匿在计算机软硬件背后的语言 (opens new window)你可以通过这本书学习摩斯电码原理，以及计算机底层的原理

编码

参考示例 demo (opens new window)，运用 HTML+CSS+JS 完成一个摩尔斯码翻译器

国际摩尔斯密码定义一种标准编码方式，将每个字母对应于一个由一系列点和短线组成的字符串，比如: "a" 对应 ".-", "b" 对应 "-...", "c" 对应 "-.-.", 等等。具体内容可以查看摩斯电码对应表(opens new window)

如果您还感兴趣的话，还可以上维基百科搜索摩斯电码学习跟过关于摩斯电码的内容

<div class="panels">
  <div class="panel">
    <h3>Morse Code Translation</h3>
    <h1>摩尔斯码翻译器</h1>
    <textarea rows="4" placeholder="輸入英文" id="input">MorseCode</textarea>
    <div class="symbol">⇵</div>
    <textarea rows="4" placeholder="輸入密碼" id="output"></textarea>
    <div class="playlist"> </div>
    <div class="buttons">
      <button class="purple" id="btnMorse">翻译</button>
      <button class="yellow" id="btnEng">解密</button>
      <button class="white" id="btnPlay">播放</button>
    </div>
  </div>
  <div>
    <h3>翻译清单</h3>
    <hr/>
    <ul class="morselist"></ul>
  </div>

  <script>
  //需要用到的摩尔斯加密列表
  var morseCode = "A;.-|B;-...|C;-.-.|D;-..|E;.|F;..-.|G;--.|H;....|I;..|J;.---|K;-.-|L;.-..|M;--|N;-.|O;---|P;.--.|Q;--.-|R;.-.|S;...|T;-|U;..-|V;...-|W;.--|X;-..-|Y;-.--|Z;--..|/;-..-.|1;.----|2;..---|3;...--|4;....-|5;.....|6;-....|7;--...|8;---..|9;----.|0;-----"
  </script>

参考实例功能说明图 (opens new window)完成相应的功能
将上面给出的摩尔斯字符串渲染到类名为 morselist 的 ul 列表中
点击翻译按钮，可以把明文输入框中输入的内容翻译为摩尔斯密文
点击点击解码按钮，可以把密文输入框中的摩尔斯码翻译为明文
给类名为 symbol 的 div 添加动画效果，点击翻译时实现 360 度翻转效果
点击播放按钮，在类名为 playlist 的 div 中，显示摩尔斯码，并且模仿摩尔斯电报音，摩尔斯高亮与音频同步，点播放短的音频，横线播放长音频
音频特效材料：提取码: 32j3(opens new window)

进阶任务

如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-11-03 09:43
阅读 ( 323 )
分类：WEB前端开发

WEB前端教程：摩斯电码翻译器

课程目标

阅读学习

编码

进阶任务

提交

总结

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »