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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

10 36 13



特效描述:日语平假名 学习表格。原生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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 瀑布流 收藏 预览 自适应页面大小 响应式区块列表布局 摇摆 烟花 清单样式 照相机 注释 下划线 结构图 鼠标悬停 条形码 弹幕 画板 朋友圈样式 红包 css绘制样式 支付 图文布局 二维码 地图 计算器 计时器 桌面 跳转 步骤 键盘 签到 分享 点赞 投票 雪花 打印 答题 震动 图表 鼠标滑过 抽奖 表情 qq空间 头像截图 星星打分评分 编辑器 播放器 电子杂志 排行榜 分页翻页 排序 表格隔行变色 table表格 进度条 多功能 滑动星星打分 其他更多

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到