js实现字母转换成莫尔斯鼓节奏效果代码
代码语言:html
所属分类:其他
代码描述:js实现字母转换成莫尔斯鼓节奏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { height: 100%; background-color: #0a81ab; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } h1 { color: white; text-transform: uppercase; font-weight: 200; text-align: center; } .inputform { width: 300px; margin: 0 auto 2rem; } .inputform input { width: 279px; height: 40px; font-size: 1.4em; font-weight: 300; border: none; margin-bottom: 1rem; padding: 0 14px; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .inputform .buttons { display: flex; width: 308px; justify-content: space-between; } .inputform .buttons button { width: 140px; height: 40px; text-transform: uppercase; background-color: #0c4271; border: 0; color: white; font-weight: 100; letter-spacing: 4px; } .inputform .buttons #convertor { background-color: #0a1931; color: #a2dbfa; } .inputform .buttons #clearbutton { background-color: #a2dbfa; color: #0a1931; } #showtext { letter-spacing: 0.4em; text-align: center; color: white; font-weight: 900; font-size: 3rem; padding-left: 30px; transition: all 0.5s; } .info { position: fixed; width: 50%; height: 100%; padding: 0 20px; background-color: rgba(255, 255, 255, 0.9); top: 0; right: 0; z-index: 1; display: flex; flex-direction: column; text-align: center; justify-content: center; line-height: 2rem; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 200; font-size: 1.2rem; transform: translateX(100%); transition: all 0.3s ease-in-out; } .highlight { background-color: #ffe194; padding: 2px 4px; } #closemodal { text-decoration: underline; color: #053742; font-weight: 300; cursor: pointer; } #what { position: fixed; top: 20px; right: 30px; font-size: 1rem; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; } .open { transform: translateX(0%); } </style> </head> <body > <h1>Morse Drummer</h1> <div class="inputform"> <input type="text" id="textinput" autocomplete="off" /> <div class="buttons"> <button id="convertor">Play</button> <button id="clearbutton">Clear</button> </div> </div> <div id="showtext"></div> <button id="what">?</button> <section id="infobox" class="info"> <p>Type in whatever in the textbox, and it'll convert it into Morse Code. Where in a <strong>dot</strong> is a kick and a <strong>dash</strong> is a snare and space would be a gap. Play with the tempo by changing the value of speed in the first line of JS.</p> <p>Try <span class="highlight">e t e t eeet et</span></p> <span id="closemodal">close this</span> </section> <script> let speed = 220; //Duration in ms between notes var letterMap = { 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: "--..", " ": " " }; const input = document.getElementById("textinput"); const display = document.getElementById("showtext").........完整代码请登录后点击上方下载按钮下载查看
网友评论0