Jquery - 做一個摩斯密碼翻譯器
My tip
如果看不到 codepen playground，請重新整理頁面
See the Pen 你的 CodePen 標題 by Retsnom on CodePen.
cdn
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js
index.html
<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>
<audio
class="short"
src="https://2017.awiclass.monoame.com/audio/morse/short.mp3"
></audio>
<audio
class="long"
src="https://2017.awiclass.monoame.com/audio/morse/long.mp3"
></audio>
</div>
<div class="panel yellow">
<h3>翻譯清單</h3>
<hr />
<ul class="translist"></ul>
</div>
</div>
<div class="decoration">MORSE CODE</div>
style.sass
$colorPurple: #292B73
$colorYellow: #FFB637
*
font-family: 'Noto Sans TC', sans-serif
// border: 1px solid #000
html,body
width: 100%
height: 100%
margin: 0
body
// padding: 100px
box-sizing: border-box
overflow: hidden
display: flex
justify-content: center
align-items: center
background-color: $colorPurple
.panels
display: flex
width: 100%
max-width: 900px
position: relative
z-index: 1
.panel
flex: 5
padding: 30px
background-color: white
color: $colorPurple
box-shadow: 0px 0px 30px rgba(black,0.2)
border-radius: 5px
&.yellow
flex: 4
background-color: $colorYellow
h1,h3
text-align: center
margin: 0
h1
font-weight: 700
margin-bottom: 30px
h3
font-weight: 400
textarea
width: 100%
padding: 10px
box-sizing: border-box
font-size: 20px
letter-spacing: 1px
outline: none
border: solid 2px rgba(black,0.3)
&:focus
border-color: $colorPurple
.buttons
display: flex
justify-content: center
margin-top: 30px
button
padding: 10px 20px
border-radius: 0px
margin: 6px
font-size: 16px
font-weight: 400
letter-spacing: 3px
border: none
&.yellow
background-color: $colorYellow
color: $colorPurple
&.purple
background-color: $colorPurple
color: white
&.white
background-color: white
border: solid 2px $colorPurple
//交換符號
.symbol
font-size: 24px
font-weight: 900
padding: 0
text-align: center
hr
border: none
border-bottom: solid 3px $colorPurple
//背景文字
.decoration
font-size: 500px
color: white
position: absolute
font-weight: 900
opacity: 0.1
//翻譯清單 flex排版
.translist
height: 450px
display: flex
flex-direction: column
flex-wrap: wrap
li
margin-bottom: 5px
font-size: 18px
width: 30%
//播放用
.playlist
font-size: 20px
text-align: center
height: 20px
.playing
color: $colorYellow
script.js
//定義需要用到的資料
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;-----";
//後處理資料變成陣列應用
let morseList = morseCode.split("|");
for (var i = 0; i < morseList.length; i++) {
morseList[i] = morseList[i].split(";");
//附加到右邊清單上面
$("ul.translist").append(
"<li>" + morseList[i][0] + "" + morseList[i][1] + "</li>"
);
}
//找到文字對應到的密碼
function findCode(letter) {
//全部找過一輪傳回對應密碼
for (let i = 0; i < morseList.length; i++) {
if (morseList[i][0] == letter) {
return morseList[i][1];
}
}
//如果沒找到就回傳原始的字
return letter;
}
//找到密碼對應到的文字
function findLetter(code) {
//全部找過一輪傳回對應文字
for (let i = 0; i < morseList.length; i++) {
if (morseList[i][1] === code) {
return morseList[i][0];
}
}
//如果沒找到就回傳原始的密碼
return code;
}
//翻譯整篇文字變成code
function translateToMorse(text) {
//轉大寫
text = text.toUpperCase();
let result = "";
//找到對應密碼
for (let i = 0; i < text.length; i++) {
result += findCode(text[i]) + " ";
}
return result;
}
//翻譯整篇code變成文字
function translateToEng(text) {
//轉大寫
text = text.split(" ");
let result = " ";
//找到文字
for (let i = 0; i < text.length; i++) {
result += findLetter(text[i]);
}
return result;
}
//轉換成密碼
$("#btnMorse").click(function () {
let input = $("#input").val();
$("#output").val(translateToMorse(input));
$("#output")
.css({ backgroundColor: "#292B73" })
.animate({ backgroundColor: "transparent" }, 500);
$(".symbol").velocity({
rotateZ: ["0deg", "360deg"],
});
});
//轉換成文字
$("#btnEng").click(function () {
let input = $("#output").val();
$("#input").val(translateToEng(input));
///動畫
$("#input")
.css({ backgroundColor: "#292B73" })
.animate({ backgroundColor: "transparent" }, 500);
$(".symbol").velocity({
rotateZ: ["0deg", "360deg"],
});
});
//如果鍵盤輸入按下去 就隨時轉大寫跟去除空白
$("#input").keyup(function () {
let original = $("#input").val();
let newtext = original.toUpperCase().split(" ").join("");
$("#input").val(newtext);
});
function play(texts, nowindex) {
let word = texts[nowindex];
//抓到字母播放聲音
let lasttime = 3000;
if (word === ".") {
lasttime = 300;
$("audio.short")[0].play();
} else if (word === "-") {
lasttime = 500;
$("audio.long")[0].play();
} else {
lasttime = 1000;
}
//顯示當下播放的字母
$(".playlist span").removeClass("playing");
$(".playlist span").eq(nowindex).addClass("playing");
//如果當下位置<文字長度 繼續呼叫自己
if (texts.length > nowindex) {
playerTimer = setTimeout(function () {
play(texts, nowindex + 1);
}, lasttime);
} else {
$(".playlist").html("");
}
}
//設定音量
$("audio.short")[0].volume = 0.3;
$("audio.long")[0].volume = 0.3;
//播放聲音
$("#btnPlay").click(function () {
//處理輸出
let texts = $("#output").val();
$(".playlist").html("");
for (let i = 0; i < texts.length; i++) {
$(".playlist").append("<span>" + texts[i] + "</span>");
}
play(texts, 0);
});
Please note
這個內容是來自吳哲宇老師的動畫互動網頁特效入門（JS/CANVAS）課程