在某网浏览古诗词时，发现一个开启或关闭拼音的效果，于是将需求告诉豆包也模拟了一个。功能很简单，就是当选择开启拼音时，会在标题和正文内容上方标注出汉字拼音，就像读注音课文一样。文字太多就会失效，暂未找到应对之策。
一、拼音样式
<style>
:root {
--accent: #d97706;
}
/* 拼音标注样式 */
ruby {
ruby-position: over;
-webkit-ruby-position: over;
}
rt {
font-size: 13px;
color: var(--accent);
font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
font-weight: 500;
letter-spacing: 0;
padding-bottom: 2px;
}
</style>二、开启或关闭按钮
<button id="toggleBtn">开启拼音</button>
<div id="poemTitle">静夜思</div>
<div id="poemContent">低头思故乡</div>三、特效加持
<script src="https://cdn.jsdelivr.net/npm/pinyin-pro@3.24.2/dist/index.min.js"></script>
<script>
(function() {
var btn = document.getElementById('toggleBtn');
var titleEl = document.getElementById('poemTitle');
var contentEl = document.getElementById('poemContent');
var isPinyinOn = false;
// 保存原始纯文本
var titleText = '静夜思';
var lines = ['低头思故乡'];
function addPinyin(char) {
// 只给汉字加拼音
if (/[\u4e00-\u9fa5]/.test(char)) {
var py = pinyinPro.pinyin(char, { toneType: 'symbol' });
return '<ruby>' + char + '<rt>' + py + '</rt></ruby>';
}
return char;
}
function toPinyinMode() {
// 标题
titleEl.innerHTML = titleText.split('').map(addPinyin).join('');
// 每行
var html = '';
lines.forEach(function(line) {
html += '' + line.split('').map(addPinyin).join('') + '';
});
contentEl.innerHTML = html;
}
function toNormalMode() {
titleEl.textContent = titleText;
var html = '';
lines.forEach(function(line) {
html += '' + line + '';
});
contentEl.innerHTML = html;
}
btn.addEventListener('click', function() {
isPinyinOn = !isPinyinOn;
if (isPinyinOn) {
toPinyinMode();
btn.textContent = '关闭拼音';
btn.classList.add('active');
} else {
toNormalMode();
btn.textContent = '开启拼音';
btn.classList.remove('active');
}
});
})();
</script>
评论