演示网址：日语学习 视频演示：
riyu
如下是所有代码，没有隐藏，各位可以自己测试。 index.html
代码语言：javascript复制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">ath>
<th class="row">ith>
<th class="row">uth>
<th class="row">eth>
<th class="row">oth>
<th class="row">yath>
<th class="row">yuth>
<th class="row" style="border-top-right-radius: 20px;">yoth>
tr>
<tr>
<th class="col">A ath>
<td class="a a">あ<div>adiv>
td>
<td class="a i">い<div>idiv>
td>
<td class="a u">う<div>udiv>
td>
<td class="a e">え<div>ediv>
td>
<td class="a o">お<div>odiv>
td>
<td class="a none">ーーtd>
<td class="a none">ーーtd>
<td class="a none">ーーtd>
tr>
<tr>
<th class="col">K kth>
<td class="k ka">か<div>kadiv>
td>
<td class="k ki">き<div>kidiv>
td>
<td class="k ku">く<div>kudiv>
td>
<td class="k ke">け<div>kediv>
td>
<td class="k ko">こ<div>kodiv>
td>
<td class="k kya">きゃ<div>kyadiv>
td>
<td class="k kyu">きゅ<div>kyudiv>
td>
<td class="k kyo">きょ<div>kyodiv>
td>
tr>
<tr>
<th class="col">S sth>
<td class="s sa">さ<div>sadiv>
td>
<td class="s si">し<div>shi(si)div>
td>
<td class="s su">す<div>sudiv>
td>
<td class="s se">え<div>sediv>
td>
<td class="s so">そ<div>sodiv>
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 tth>
<td class="t ta">た<div>tadiv>
td>
<td class="t ti">ち<div>tidiv>
td>
<td class="t cu">つ<div>tsudiv>
td>
<td class="t te">て<div>tediv>
td>
<td class="t to">と<div>todiv>
td>
<td class="t cha">ちゃ<div>chadiv>
td>
<td class="t chu">ちゅ<div>chudiv>
td>
<td class="t cho">ちょ<div>chodiv>
td>
tr>
<tr>
<th class="col">N nth>
<td class="n na">な<div>nadiv>
td>
<td class="n ni">に<div>nidiv>
td>
<td class="n nu">ぬ<div>nudiv>
td>
<td class="n ne">ね<div>nediv>
td>
<td class="n no">の<div>nodiv>
td>
<td class="n nya">にゃ<div>nyadiv>
td>
<td class="n nyu">にゅ<div>nyudiv>
td>
<td class="n nyo">にょ<div>nyodiv>
td>
tr>
<tr>
<th class="col">H hth>
<td class="h ha">は<div>hadiv>
td>
<td class="h hi">ひ<div>hidiv>
td>
<td class="h hu">ふ<div>hu(fu)div>
td>
<td class="h he">へ<div>hediv>
td>
<td class="h ho">ほ<div>hodiv>
td>
<td class="h hya">ひゃ<div>hyadiv>
td>
<td class="h hyu">ひゅ<div>hyudiv>
td>
<td class="h hyo">ひょ<div>hyodiv>
td>
tr>
<tr>
<th class="col">M mth>
<td class="m ma">ま<div>madiv>
td>
<td class="m mi">み<div>midiv>
td>
<td class="m mu">む<div>mudiv>
td>
<td class="m me">め<div>mediv>
td>
<td class="m mo">も<div>modiv>
td>
<td class="m mya">みゃ<div>myadiv>
td>
<td class="m myu">みゅ<div>myudiv>
td>
<td class="m myo">みょ<div>myodiv>
td>
tr>
<tr>
<th class="col">Y yth>
<td class="y ya">や<div>yadiv>
td>
<td class="y none">ーーtd>
<td class="y yu">ゆ<div>yudiv>
td>
<td class="y none">ーーtd>
<td class="y yo">よ<div>yodiv>
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 lth>
<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 wth>
<td class="w wa">わ<div>wadiv>
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>Ndiv>
<div class="sp2">.<br>ndiv>
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 gth>
<td class="g ga">が<div>gadiv>
td>
<td class="g gi">ぎ<div>gidiv>
td>
<td class="g gu">ぐ<div>gudiv>
td>
<td class="g ge">げ<div>gediv>
td>
<td class="g go">ご<div>godiv>
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 zth>
<td class="z za">ざ<div>zadiv>
td>
<td class="z zi">じ<div>ji(zi)div>
td>
<td class="z zu">ず<div>zudiv>
td>
<td class="z ze">ぜ<div>zediv>
td>
<td class="z zo">ぞ<div>zodiv>
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 dth>
<td class="d da">だ<div>dadiv>
td>
<td class="d none">ーーtd>
<td class="d none">ーーtd>
<td class="d de">で<div>dediv>
td>
<td class="d do">ど<div>dodiv>
td>
<td class="d none">ーーtd>
<td class="d none">ーーtd>
<td class="d none">ーーtd>
tr>
<tr>
<th class="col">P pth>
<td class="p pa">ぱ<div>padiv>
td>
<td class="p pi">ぴ<div>pidiv>
td>
<td class="p pu">ぷ<div>pudiv>
td>
<td class="p pe">ぺ<div>pediv>
td>
<td class="p po">ぽ<div>podiv>
td>
<td class="p pya">ぴゃ<div>pyadiv>
td>
<td class="p pyu">ぴゅ<div>pyudiv>
td>
<td class="p pyo">ぴょ<div>pyodiv>
td>
tr>
<tr>
<th class="col" style="border-bottom-left-radius: 20px;">B bth>
<td class="b ba">ば<div>badiv>
td>
<td class="b bi">び<div>bidiv>
td>
<td class="b bu">ぶ<div>budiv>
td>
<td class="b be">べ<div>bediv>
td>
<td class="b bo">ぼ<div>bodiv>
td>
<td class="b bya">びゃ<div>byadiv>
td>
<td class="b byu">びゅ<div>byudiv>
td>
<td class="b byo" style="border-bottom-right-radius: 20px;">びょ<div>byodiv>
td>
tr>
table>
div>
div>
<center id="url">
<a href="#">制作者:川川a>
<a href="#">QQ：2835809579a>
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:
代码语言：javascript复制* {
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
代码语言：javascript复制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 = ""
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资源：
代码语言：javascript复制970353786
没啥事别来我群捣乱！
