演示网址：日语学习
视频演示：
riyu
如下是所有代码，没有隐藏，各位可以自己测试。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style/main.css"> <title>川川学长带你学日语50音图 | 平假名</title> </head> <body> <div id="wrap"> <center> <h1>ひらがな<br>平假名</h1> </center> <div id="pron"> <table id="hiragana"> <tr id="title"> <th class="row" style="border-top-left-radius: 20px;"></th> <th class="row">a</th> <th class="row">i</th> <th class="row">u</th> <th class="row">e</th> <th class="row">o</th> <th class="row">ya</th> <th class="row">yu</th> <th class="row" style="border-top-right-radius: 20px;">yo</th> </tr> <tr> <th class="col">A a</th> <td class="a a">あ<div>a</div> </td> <td class="a i">い<div>i</div> </td> <td class="a u">う<div>u</div> </td> <td class="a e">え<div>e</div> </td> <td class="a o">お<div>o</div> </td> <td class="a none">ーー</td> <td class="a none">ーー</td> <td class="a none">ーー</td> </tr> <tr> <th class="col">K k</th> <td class="k ka">か<div>ka</div> </td> <td class="k ki">き<div>ki</div> </td> <td class="k ku">く<div>ku</div> </td> <td class="k ke">け<div>ke</div> </td> <td class="k ko">こ<div>ko</div> </td> <td class="k kya">きゃ<div>kya</div> </td> <td class="k kyu">きゅ<div>kyu</div> </td> <td class="k kyo">きょ<div>kyo</div> </td> </tr> <tr> <th class="col">S s</th> <td class="s sa">さ<div>sa</div> </td> <td class="s si">し<div>shi(si)</div> </td> <td class="s su">す<div>su</div> </td> <td class="s se">え<div>se</div> </td> <td class="s so">そ<div>so</div> </td> <td class="s sya">しゃ<div>sha(sya)</div> </td> <td class="s syu">しゅ<div>shu(syu)</div> </td> <td class="s syo">しょ<div>sho(syo)</div> </td> </tr> <tr> <th class="col">T t</th> <td class="t ta">た<div>ta</div> </td> <td class="t ti">ち<div>ti</div> </td> <td class="t cu">つ<div>tsu</div> </td> <td class="t te">て<div>te</div> </td> <td class="t to">と<div>to</div> </td> <td class="t cha">ちゃ<div>cha</div> </td> <td class="t chu">ちゅ<div>chu</div> </td> <td class="t cho">ちょ<div>cho</div> </td> </tr> <tr> <th class="col">N n</th> <td class="n na">な<div>na</div> </td> <td class="n ni">に<div>ni</div> </td> <td class="n nu">ぬ<div>nu</div> </td> <td class="n ne">ね<div>ne</div> </td> <td class="n no">の<div>no</div> </td> <td class="n nya">にゃ<div>nya</div> </td> <td class="n nyu">にゅ<div>nyu</div> </td> <td class="n nyo">にょ<div>nyo</div> </td> </tr> <tr> <th class="col">H h</th> <td class="h ha">は<div>ha</div> </td> <td class="h hi">ひ<div>hi</div> </td> <td class="h hu">ふ<div>hu(fu)</div> </td> <td class="h he">へ<div>he</div> </td> <td class="h ho">ほ<div>ho</div> </td> <td class="h hya">ひゃ<div>hya</div> </td> <td class="h hyu">ひゅ<div>hyu</div> </td> <td class="h hyo">ひょ<div>hyo</div> </td> </tr> <tr> <th class="col">M m</th> <td class="m ma">ま<div>ma</div> </td> <td class="m mi">み<div>mi</div> </td> <td class="m mu">む<div>mu</div> </td> <td class="m me">め<div>me</div> </td> <td class="m mo">も<div>mo</div> </td> <td class="m mya">みゃ<div>mya</div> </td> <td class="m myu">みゅ<div>myu</div> </td> <td class="m myo">みょ<div>myo</div> </td> </tr> <tr> <th class="col">Y y</th> <td class="y ya">や<div>ya</div> </td> <td class="y none">ーー</td> <td class="y yu">ゆ<div>yu</div> </td> <td class="y none">ーー</td> <td class="y yo">よ<div>yo</div> </td> <td class="y none">ーー</td> <td class="y none">ーー</td> <td class="y none">ーー</td> </tr> <tr> <th class="col" style="font-size: 10px;line-height: .9rem;">R r<br>L l</th> <td class="r ra">ら<div>ra(la)</div> </td> <td class="r ri">り<div>ri(li)</div> </td> <td class="r ru">る<div>ru(lu)</div> </td> <td class="r re">れ<div>re(le)</div> </td> <td class="r ro">ろ<div>ro(lo)</div> </td> <td class="r rya">りゃ<div>rya(lya)</div> </td> <td class="r ryu">りゅ<div>ryu(lyu)</div> </td> <td class="r ryo">りょ<div>ryo(lyo)</div> </td> </tr> <tr> <th class="col">W w</th> <td class="w wa">わ<div>wa</div> </td> <td class="w wi">{ゐ}<div>{wi}</div> </td> <td class="w none">ーー</td> <td class="w we">{ゑ}<div>{we}</div> </td> <td class="w wo">を<div>o(wo)</div> </td> <td class="w none">ーー</td> <td class="w none">ーー</td> <td class="w none">ーー</td> </tr> <tr> <th class="col" style="position: relative;display: block"> <div class="sp1">.<br>N</div> <div class="sp2">.<br>n</div> </th> <td class="_n n">ん<div>ŋ</div> </td> <td class="_n none">ーー</td> <td class="_n none">ーー</td> <td class="_n none">ーー</td> <td class="_n none">ーー</td> <td class="_n none">ーー</td> <td class="_n none">ーー</td> <td class="_n none">ーー</td> </tr> <tr> <th class="col">G g</th> <td class="g ga">が<div>ga</div> </td> <td class="g gi">ぎ<div>gi</div> </td> <td class="g gu">ぐ<div>gu</div> </td> <td class="g ge">げ<div>ge</div> </td> <td class="g go">ご<div>go</div> </td> <td class="g none">ーー</div> </td> <td class="g none">ーー</div> </td> <td class="g none">ーー</div> </td> </tr> <tr> <th class="col">Z z</th> <td class="z za">ざ<div>za</div> </td> <td class="z zi">じ<div>ji(zi)</div> </td> <td class="z zu">ず<div>zu</div> </td> <td class="z ze">ぜ<div>ze</div> </td> <td class="z zo">ぞ<div>zo</div> </td> <td class="z none">ーー</div> </td> <td class="z none">ーー</div> </td> <td class="z none">ーー</div> </td> </tr> <tr> <th class="col">D d</th> <td class="d da">だ<div>da</div> </td> <td class="d none">ーー</td> <td class="d none">ーー</td> <td class="d de">で<div>de</div> </td> <td class="d do">ど<div>do</div> </td> <td class="d none">ーー</td> <td class="d none">ーー</td> <td class="d none">ーー</td> </tr> <tr> <th class="col">P p</th> <td class="p pa">ぱ<div>pa</div> </td> <td class="p pi">ぴ<div>pi</div> </td> <td class="p pu">ぷ<div>pu</div> </td> <td class="p pe">ぺ<div>pe</div> </td> <td class="p po">ぽ<div>po</div> </td> <td class="p pya">ぴゃ<div>pya</div> </td> <td class="p pyu">ぴゅ<div>pyu</div> </td> <td class="p pyo">ぴょ<div>pyo</div> </td> </tr> <tr> <th class="col" style="border-bottom-left-radius: 20px;">B b</th> <td class="b ba">ば<div>ba</div> </td> <td class="b bi">び<div>bi</div> </td> <td class="b bu">ぶ<div>bu</div> </td> <td class="b be">べ<div>be</div> </td> <td class="b bo">ぼ<div>bo</div> </td> <td class="b bya">びゃ<div>bya</div> </td> <td class="b byu">びゅ<div>byu</div> </td> <td class="b byo" style="border-bottom-right-radius: 20px;">びょ<div>byo</div> </td> </tr> </table> </div> </div> <center id="url"> <a href="#">制作者:川川</a> <a href="#">QQ：2835809579</a> </center> </body> <script type="text/javascript" src="js/main.js"></script> </html> </body> <script type="text/javascript" src="js/main.js"></script> </html> <body> <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js" width="0" height="100"></script> <script> L2Dwidget.init(); </script> </body> </html> <!--鼠标特效--> <canvas id="fireworks" style="position:fixed;left:0;top:0;pointer-events:none;"></canvas> <!--鼠标特效结束-->
main.css:
* { margin: 0; padding: 0; } html, body { height: 100%; } body { background: linear-gradient(45deg, #211136, #bf5853) fixed; } audio { display: none; } .clearfix { content: ""; clear: both; display: block; } #wrap { padding-top: 20px; } h1 { color: #fff; } #research { width: 556px; margin: 30px auto } #text { width: 80%; line-height: 40px; border: 1px solid #fff; border-radius: 10px; color: #fff; text-indent: 10px; font-size: 20px; display: inline-block; margin: 0 10px 0 5px; height: 40px; } #text:focus { outline: none } #btn { width: 15%; height: 40px; border: 1px solid #fff; background: rgba(0, 0, 0, 0); border-radius: 10px; color: #fff; font-size: 18px; cursor: pointer; transition: .25s; } #btn:focus { outline: none; } #btn:hover { background: rgba(255, 255, 255, .25); } #pron { width: 556px; margin: 0 auto; box-shadow: 0 0 121px rgba(42, 42, 42, 0.45); border-radius: 20px; } table { cursor: pointer; moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } table th { cursor: default; } table th, table td { text-align: center; width: 60px; height: 30px; background: #bd5753; color: #fff; transition: .25s; } tr:nth-child(even) td { background: #95454b; } table tr td { position: relative; overflow: hidden } table tr td div { position: absolute; top: 0; left: 0; width: 60px; background: #562a3f; display: none; transition: .25s; line-height: 30px; } table tr td:hover div { display: block; } .none { background: #93555d !important; color: #b3b3b3; cursor: not-allowed; } div[class^="sp"] { display: inline-block; position: absolute; } .sp1 { line-height: 15px; top: -4px; left: 14px; } .sp2 { line-height: 12px; top: 0; right: 15px; } #url { margin: 50px 0; } #url a { color: #fff; border: 1px solid #fff; text-decoration: none; padding: 7px 20px; display: inline-block; width: 120px; margin: 0px 35px; border-radius: 10px; transition: .25s; } #url a:hover { background: rgba(255, 255, 255, .25); }
main.js
var word = document.getElementsByTagName("td") //分配音频 for (i = 0; i < word.length; i++) { word[i].index = i word[i].onclick = function () { if (this.innerHTML != "ーー") { this.innerHTML += "<audio src='audio/" + this.className.split(" ")[1] + ".mp3'></audio>" this.lastChild.play() } else return false } //更改字体大小 word[i].onmouseover = function () { var td = this.firstElementChild if (this.innerHTML != "ーー") { if (td.innerHTML.length > 7) td.style.fontSize = 12 + "px" } } } //搜索 var btn = document.getElementById("btn"), text = document.getElementById("text") btn.onclick = function () { for (i = 0; i < word.length; i++) { if (word[i].firstChild.data == text.innerHTML) { var color = getComputedStyle(word[i], null).backgroundColor; word[i].style.background = "#3ca576" setTimeout(function () { word[i].style.background = color }, 2000) break } } }
代码全部在上面了，剩下的是一部分mp3,大家可以自行寻找或者此群下载mp3资源：
970353786
没啥事别来我群捣乱！
