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
- 阅读 ( 616 )
- 分类：WEB前端开发
