JS日语平假名学习表格特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="style/main.css">

2. 引入JS

<script type="text/javascript" src="js/main.js"></script>

3. HTML代码

    <div id="wrap">
        <center>
            <h1>ひらがな<br>平假名</h1>
        </center>
        <div id="research">
            <div id="text" contenteditable="true"></div>
            <button id="btn">搜索</button>
        </div>
        <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 ci">ち<div>chi</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 cya">ちゃ<div>cha</div>
                    </td>
                    <td class="t cyu">ちゅ<div>chu</div>
                    </td>
                    <td class="t cyo">ちょ<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 &nbsp;r<br>L &nbsp;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 nn">ん<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 gya">ぎゃ<div>gya</div>
                    </td>
                    <td class="g gyu">ぎゅ<div>gyu</div>
                    </td>
                    <td class="g gyo">ぎょ<div>gyo</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 zya">じゃ<div>ja(zya)</div>
                    </td>
                    <td class="z zyu">じゅ<div>ju(zyu)</div>
                    </td>
                    <td class="z zyo">じょ<div>jo(zyo)</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="./katakana.html">转到片假名→</a>
    </center>