skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第211个小实例：实时给中文添加拼音

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2023-03-12 16:39:25 +08:00
parent 7317185f31
commit 0a295c11bf
5 changed files with 104 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -218,6 +218,7 @@
208. HTML5+CSS3+JS小实例：五彩纸屑礼花筒
209. HTML5+CSS3+JS小实例：音频可视化
210. HTML5+CSS3小实例：文字溶合切换效果
211. HTML5+CSS3+JS小实例：实时给中文添加拼音
#### 赞赏作者
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)

48
code/211/211.css Normal file
View File

@ -0,0 +1,48 @@
*{
margin: 0;
padding: 0;
}
body{
/* 100%窗口宽高 */
min-height: 100vh;
/* 弹性布局 居中演示 */
display: flex;
justify-content: center;
align-items: center;
background-color: #eaf0f3;
}
.container{
background-color: #1ecaab;
color: #fff;
padding: 25px 30px;
border-radius: 30px;
}
/* 输入框样式 */
.ipt{
width: 300px;
height: 40px;
line-height: 40px;
text-indent: 15px;
border: 1px solid transparent;
border-radius: 10px;
background-color: #fff;
outline: none;
font-size: 16px;
/* 绝对定位 在底部 水平居中 */
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}
/* 获得焦点样式 */
.ipt:focus{
border-color: #1ecaab;
}
/* ruby标签样式 */
ruby{
padding: 10px;
font-size: 32px;
}
rt{
font-size: 20px;
}

20
code/211/211.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时给中文添加拼音</title>
<link rel="stylesheet" href="211.css">
<!-- 这里用到的拼音库是：pinyin-pro -->
<script src="pinyin-pro.min.js"></script>
</head>
<body>
<div class="container">
<input type="text" class="ipt" placeholder="输入试试..." value="艾恩小灰灰">
<div class="val"></div>
</div>
</body>
</html>
<script src="211.js"></script>

34
code/211/211.js Normal file
View File

@ -0,0 +1,34 @@
// 拼音库
const {pinyin}=pinyinPro;
// 要操作的元素
const ipt=document.querySelector('.ipt');
const val=document.querySelector('.val');
setPinYin();
// 设置拼音
function setPinYin(){
val.innerHTML="";
let value=ipt.value;
let arr=value.split('');
arr.forEach(item=>{
val.innerHTML+=`<ruby>${item}<rt>${pinyin(item)}</rt></ruby>`;
})
}
let flag=false;
// 输入框输入事件
ipt.addEventListener('input',()=>{
// 判断是否输入完毕（拼写汉字时会触发input事件，加此判断避免）
if(!flag){
setPinYin();
}
})
// 以下代码避免了拼写汉字时触发input事件
ipt.addEventListener('compositionstart',()=>{
flag=true;
})
ipt.addEventListener('compositionend',()=>{
flag=false;
setPinYin();
})

1
code/211/pinyin-pro.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long