也曾年轻《5 首千古名篇，致敬奋战十二年的高考少年》
<meta name="referrer" content="never" /><style>
#container {width:640px;min-height:400px;text-align:center;margin:auto;background-color:hsl(60, 30%, 80%);
overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px;font-size:20px;box-shadow:4px 4px 10px black;}
#container img {width:100%;}
#container span {display:block;margin-bottom:6px;}
#container p {text-align:left;text-indent:2em; font-weight:600;margin:12px;}
#container span:nth-of-type(1) {font-size:1.25em;color:brown;}
#container span:nth-of-type(2) {font-size:0.8em;color:gray;}
#ctrlBox {width:640px;margin:16px auto;text-align:center;font-size:2em;color:skyblue;}
#ctrlBox button {cursor:pointer;}
#selIdx {width:32px;text-align:right;border:thin gray dotted;}
</style>
<div id="container"></div>
<div id="ctrlBox">
<button id="backward">⇦ 上一首</button> <input id='selIdx' min='1' value=''/> <button id="forward">下一首 ⇨</button></div>
</div>
<script>
const pics = [
"https://b0.bdstatic.com/ugc/hgkv0-7JshjZPiGi2N4fRQ20a8b9fa3b9a39f2a8686eaf310f5eb6.jpg",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkrosKm7hZvRTomQ3RUZLib2l8jpbQo93yyb2mqEmlr9ricLpGIetkWT12mE4934d99gBwibdibLodzWZAuKm1q2nmCFk5knk99AsXw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkq5USzRd7mZ9Ficeu9wnrQzgsEshHWPkBHv07bqdgDXgTPwBLarEiaeAvWQficI3FvAF30ECIGBR9ibcJpeOfRfRWV5XdfUew2Uyiaw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkobGS5fuBSB7wIdupibZ7asUc07SayJwphwnlGlxAW4q2pnsgIuK5r8An6ntVr0LOhicIfK9X6OWd6HiaSThJH9fS1sNibswgICpk8/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkrHpRFic8odoFQny396K7HPC5HUab9AzThyvChHsibXUiaRtw62fzDrrj0JeTjOWibCvpliafNX2TNYyNXhIZHPBu9ibwzl0Awh49Yho/640",
];
// https://mp.weixin.qq.com/s/sa-VCs8zMTj_5WMBMFH1lw
const tab = `  `;
const poems = [
[`《登科后》`,
`唐·孟郊`,
`昔日龌龊不足夸，今朝放荡思无涯。`,
`春风得意马蹄疾，一日看尽长安花。`,
`从前那阵子穷愁潦倒、处处受制的日子，哪还值得提？如今中了进士，心门一开，意气纵横收不住。乘着春风一路得意，马蹄敲得又快又亮；好像只用一天，就把长安的好风光、好日子全看尽了。`],
[`《送人赴举》`,
`明·李梦阳`,
`宝剑动连星，金鞍别马鸣。`,
`持将五色笔，夺取锦标名。`,
`腰间宝剑寒光跃动，仿佛惊起星斗；金鞍已备，临别跨上征马，长嘶一声便要启程。带上你那支“五色彩笔”（满腹文才）去考场，此行就该夺下锦标、榜上题名！`],
[`《贺新郎 · 和徐斯远下第谢诸公载酒相访韵》`,
`宋·辛弃疾`,
`逸气轩眉宇。`,`似王良、轻车熟路，骅骝欲舞。`,`我觉君非池中物，咫尺蛟龙云雨。`,
`时与命、犹须天付。`,`兰珮芳菲无人问，叹灵均、欲向重华诉。`,`空壹郁，共谁语。`,
`儿曹不料扬雄赋。`,`怪当年、甘泉误说，青葱玉树。`,`风引船回沧溟阔，目断三山伊阻。`,
`但笑指、吾庐何许。`,`门外苍官千百辈，尽堂堂、八尺鬚髯古。`,`谁载酒，带湖去。`,
`你眉宇间那股逸气藏不住：文章驾御得像王良走熟路，像骅骝一踏就要起舞。我知道你绝不是池中之物，离蛟龙翻身只差一层云雨；只是“时运”这东西到底还得天意拍板，所以才卡在这里。你佩兰芳洁却无人来问，那闷郁跟屈子想向重华申诉差不多——憋着，跟谁说得清？<br>${tab}
庸儿们根本读不懂你这种“扬雄之赋”，只会拿旧话头挑刺，把好端端的青葱玉树当错处。你本想乘风去三山那片理想之境，偏偏风把你推回，眼前只有一片阔海与阻隔。<br>${tab}
那就笑一笑：我指个方向——回我那庐舍边坐坐。门外千百“苍官”，都是堂堂老松，八尺躯、古髯苍劲；它们不候春风也能站得住。谁带了酒？咱去带湖。`],
[`《江夏使君叔席上赠史郎中》`,
`唐·李白`,
`凤凰丹禁里，衔出紫泥书。`,
`昔放三湘去，今还万死馀。`,
`仙郎久为别，客舍问何如？`,
`涸辙思流水，浮云失旧居。`,
`多惭华省贵，不以逐臣疏。`,
`复如竹林下，叨陪芳宴初。`,
`希君生羽翼，一化北溟鱼。`,
`将画船撑入柳荫深处，享受一片清凉，耳畔传来一派悦耳的笙簧之声。采莲人互相应和着采莲的曲调，歌声嘹亮，惊起了栖息在荷丛中的鸳鸯。佳人才子们乘坐游船，带着醉意，笑语盈盈地畅饮美酒。待到乘船晚归时，只见湖光荡漾，天边悬着一钩新月，晚风送来十里荷塘的阵阵清香。`],
[`《及第后作》`,
`唐·袁皓`,
`金榜高悬姓字真，分明折得一枝春。`,
`蓬瀛乍接神仙侣，江海回思耕钓人。`,
`九万抟扶排羽翼，十年辛苦涉风尘。`,
`升平时节逢公道，不觉龙门是嶮津。`,
`高高悬挂的金榜上，清清楚楚地写着我的名字，这一看好高兴啊，满怀的灿烂，仿佛折得了一枝春天。<br>${tab}
刚刚与蓬莱瀛洲的同伴结识，他们个个如神仙一般优秀，回想起过去在江海边耕种钓鱼的日子感慨万千。<br>${tab}
十多年在尘世中奔波，历经辛苦和艰难，如今，努力终于得到回报，感觉自己就如同大鹏鸟一般振翅高飞，直冲九万里的云霄。<br>${tab}
真庆幸遇到了这太平盛世，得到了公正的选拔。曾经觉得高不可攀的龙门，再也不是难以逾越的险关了！`],
];
const synth = window.speechSynthesis
var poemIdx = 0;
var utterance = null;
var timeoutID = null;
const pStart = 2, eStart = [-2, -1];
selIdx.max = poems.length;
selIdx.title = `选择有效值：1 到 ${poems.length}`;
function recitationPoem(idx, pIdx) {
if(typeof synth === 'undefined') {
backward.disabled = false;
forward.disabled = false;
selIdx.disabled = false;
timeoutID = setTimeout(function(){
forward.click();
}, 30000);
}
else {
if(pIdx < poems.length - 3) {
utterance = new SpeechSynthesisUtterance(poems);
utterance.lang = 'zh-CN'; // 设置语言为中文
utterance.rate = 1; // 设置语速
utterance.pitch = 1; // 设置音调
synth.speak(utterance); // 播放语音
}
utterance.onend = () => {
if(pIdx < poems.length - 4) {
recitationPoem(idx,++pIdx)
}
else {
synth.cancel();
backward.disabled = false;
forward.disabled = false;
selIdx.disabled = false;
timeoutID = setTimeout(function(){
forward.click();
}, 5000);
}
};
}
}
function showPoem(idx) {
if(timeoutID) clearTimeout(timeoutID);
selIdx.value = idx + 1;
while (container.firstChild) {
container.removeChild(container.firstChild);
}
backward.disabled = true;
forward.disabled = true;
selIdx.disabled = true;
let imgObj = document.createElement('img');
imgObj.src = pics;
container.appendChild(imgObj);
for(sIdx = 0; sIdx < poems.length - 1; sIdx++) {
let sObj = document.createElement('span');
sObj.innerHTML = poems;
if(sIdx > 1 ) sObj.style.cssText = `font-size:1.3em;color:red;font-family:楷体;`;
//else if(sIdx == poems.length - 2) sObj.style.cssText = 'text-align:left; margin-left:1em;';
container.appendChild(sObj);
}
let pObj = document.createElement('p');
pObj.innerHTML = poems.length - 1];
container.appendChild(pObj);
recitationPoem(idx,0);
}
backward.onclick = () => {
poemIdx--; if(poemIdx < 0) poemIdx = poems.length - 1;
showPoem(poemIdx);
}
forward.onclick = () => {
poemIdx++; poemIdx %= poems.length;
showPoem(poemIdx);
}
const vMin = parseInt(selIdx.min);
const vMax = parseInt(selIdx.max);
selIdx.onchange = () => {
if(parseInt(selIdx.value) < vMin) selIdx.value = vMin;
if(parseInt(selIdx.value) > vMax) selIdx.value = vMax;
poemIdx = parseInt(selIdx.value) - 1;
showPoem(poemIdx);
}
showPoem(poemIdx);
</script>
页:
[1]