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"&g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0