也曾年轻 发表于 2026-6-17 15:54

古诗词里的夏雨

本帖最后由 也曾年轻 于 2026-6-17 15:53 编辑 <br /><br /><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;box-shadow:4px 4px 10px black;font-size:20px;}
#container img        {width:100%;}
#container span       {display:block;margin-bottom:6px;}
#container p        {text-align:left;text-indent:2em; font-weight:600;margin:12px;font-family:仿宋;line-height:1.5em; letter-spacing:3px;}
#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">⇦&nbsp;上一首</button>&emsp;<input id='selIdx' min='1' value=''/>&emsp;<button id="forward">下一首&nbsp;⇨</button></div>
</div>
<script>
const pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkoSXqbibrU4Km3NDM9IwvIKOo7HesFp2upzAQqm35YwAh93ZaVfZqgSdyvot0xiaZ9ic9ScdiafAHW3xh8huvmbq75Vg9SWHXQEnr8/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkrbPiatmO0soGxP6k6Rd624pMib2EuU34peIKu4zVkJAyb8aqYWm6P1drGmu69nZibn0Zo1W6oDLPSIZjNT7dqDz4WbgsfTGC3UTI/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBko8sN6WR6dGbxAosV8zKcWX6wVgxcGmjnSTeUeZ31QIzMavggtlicEnpqnU6tRvzPS2ibArbK0tJSfdfXEAmvA3AbibJfmeibibQ53s/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkq53wBkwYsWsAcm3hlmiaZou34WdzHrJj6c7kxakrZrnLCiaMshwWPicRYwHrnkbflS1MsRcqdibic4HKib7kth9Hmm8QwU7EAxGf5hw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBko01bVCVGYV7HTVhRoU7Ddxroapf4e7ZmWaxeoAEOZR9lkcKupHBCVocoJpQYAoxjfrR8gNA1LwBYDMGO8QpTpicH5PL8J7VXDI/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkqQSWNmvice9yt3FCxonic8kZQICtyeMuWwk3uiapbe8PDJtYjBDdx0AicRu7H83FIYicptUK2fXrsdCPsbWaGBgBBxLdLWVQ2zn6VQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkpsLWNfiaUMOMicl3ejHwCbibNu39YJhlvtgibKiaYvYIJ9XYgIFRsw2Nibia00w3icStBdaVs6azzGVPA5vnhOeSKTtKMibk9cPXIe3Kok/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkqVhGVOCsVv2Qo4QGC4cQXx4EhLoZo4Ajv501GZ81uWaOhFPN72d0iax6SYwlaAQ9Uk68QohPRyAVOspV8AML1rlj8Rriaib2cjZA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkoKHF3qibNJnn0vibDksDATDVNJH2DoLrJ1BNJBO8CV1FfT4pXayqI8GS0EcQeaVY0ickvJfTCD8c4Zib1UicjQgzlL366zlr6IuEYQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkpwmpia0XGcHpRk6JSLuxh0lCgyME8iblZibViaED119gbUGWRT7ttgseicCLDluSWfz9onuHNNic4RhCKTEUaV6eJ1TDC6gE7YJicx0Q/640",
];
const tab = `&emsp;&emsp;`;
const poems = [
[`《暴雨》`,
`唐·韦庄`,
`江村入夏多雷雨，晓作狂霖晚又晴。`,
`波浪不知深几许，南湖今与北湖平。`,
`江村的夏日雷雨频繁，清晨暴雨倾盆，傍晚却已放晴。<br>
${tab}波浪翻滚不知积水多深，只见南湖与北湖的水面已涨得齐平。`],
[`《昭君怨·咏荷上雨》`,
`宋·杨万里`,
`午梦扁舟花底，香满西湖烟水。`,
`急雨打篷声，梦初惊。`,
`却是池荷跳雨，散了真珠还聚。`,
`聚作水银窝，泻清波。`,
`午睡时梦见荡舟西湖荷花底，烟水朦胧清香满湖。<br>${tab}忽被急雨打船篷的声音惊醒。<br>${tab}
来看见原是荷池上的雨点，像珍珠般在叶上跳跃——散了又聚，最后聚成水银似的亮晶晶一窝，倏然泻入清波。`],
[`《鹤冲天·梅雨霁》`,
`宋·周邦彦`,
`梅雨霁，暑风和，高柳乱蝉多。`,
`小园台榭远池波，鱼戏动新荷。`,
`薄纱厨，轻羽扇，枕冷簟凉深院。`,
`此时情绪此时天，无事小神仙。`,
`梅雨停了，夏风温和，高高的柳树上蝉声纷乱。<br>${tab}从小园的亭台望向远处池水波纹，鱼儿嬉戏，触动了新生的荷叶。<br>${tab}挂着薄纱帐，手执轻羽扇，枕头清凉、竹席生寒，在这幽深的庭院里。<br>${tab}此刻的心情正配得上此刻的天空——做个无事悠闲的小神仙，真是自在。`],
[`《西江月·夜行黄沙道中》 `,
`宋·辛弃疾`,
`明月别枝惊鹊，清风半夜鸣蝉。`,
`稻花香里说丰年，听取蛙声一片。`,
`七八个星天外，两三点雨山前。`,
`旧时茅店社林边，路转溪桥忽见。`,
`明月升起，惊飞了枝头的喜鹊；清凉的夜风，送来了蝉的鸣叫。<br>${tab}稻花的香气里，人们谈论着丰收的年景，耳边传来一片蛙鸣。<br>${tab}天边挂着七八颗星星，山前飘落两三点细雨。<br>${tab}从前熟悉的茅店，就在土地庙旁的树林边，转过小路，跨过溪桥，它忽然出现在眼前。`],
[`《夏雨》`,
`唐·薛能`,
`何处发天涯，风雷一道赊。`,
`去声随地急，残势傍楼斜。`,
`透树垂红叶，沾尘带落花。`,
`潇湘无限思，闲看下蒹葭。`,
`它从遥远的天涯发起，挟着风雷一路奔袭而来。<br>${tab}雨声随着落地变得急促，残余的雨势斜打着楼台。<br>${tab}雨滴穿透树叶，催垂下沾湿的红色叶片；水珠溅起尘埃，又带着零落的花瓣。<br>${tab}心中泛起潇湘般的无限思绪，闲静地看着雨水，洒向下方的芦苇丛。`],
[`《初夏雨中》`,
`宋·寇准`,
`绿树新阴暗井桐，杂英当砌坠疏红。`,
`重门寂寂经初夏，尽日垂帘细雨中。`,
`绿树新生出浓荫，井边的梧桐也显得幽暗，各色花枝在石阶旁，疏疏落落地飘下红瓣。<br>${tab}庭院里门户重重，一片寂静中正经过初夏，整日低垂着帘幕，看那细雨迷蒙了天。`],
[`《夏雨后题青荷兰若》 `,
`唐·施肩吾`,
`僧舍清凉竹树新，初经一雨洗诸尘。`,
`微风忽起吹莲叶，青玉盘中泻水银。`,
`僧舍清凉，竹树经雨焕然一新；骤雨初歇，洗净世间尘埃。<br>${tab}微风忽起，吹动田田莲叶——仿佛青玉盘中，倾泻下晶莹水银。`],
[`《临江仙·柳外轻雷池上雨》`,
`宋·欧阳修`,
`柳外轻雷池上雨，雨声滴碎荷声。`,
`小楼西角断虹明。`,
`阑干倚处，待得月华生。 `,
`燕子飞来窥画栋，玉钩垂下帘旌。`,
`凉波不动簟纹平。`,
`水精双枕，傍有堕钗横。 `,
`柳林外传来轻轻的雷声，池上下起了细雨；雨声淅沥，敲碎了荷叶的声响。<br>${tab}小楼西角，一弯断虹明艳。<br>${tab}倚着栏杆等待，直到皎洁的月亮升起。<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();
                }, 10000);
        }
        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        {
                                backward.disabled = false;
                                forward.disabled = false;
                                selIdx.disabled = false;
                                timeoutID = setTimeout(function(){
                                        forward.click();
                                }, 3000);
                        }
                };
        }
}
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.textAlign = 'left';
                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>

梦江南 发表于 2026-6-17 16:36

https://qny.smzdm.com/202004/10/5e90018f328bf5215.gif


{:4_174:}

梦江南 发表于 2026-6-17 16:37

大沙发出来了。{:4_173:}

梦江南 发表于 2026-6-17 16:38

欣赏古诗词里的夏雨，辛苦了！{:4_199:}

也曾年轻 发表于 2026-6-17 16:45

梦江南 发表于 2026-6-17 16:37
大沙发出来了。



小沙发请笑纳

也曾年轻 发表于 2026-6-17 16:47

梦江南 发表于 2026-6-17 16:38
欣赏古诗词里的夏雨，辛苦了！

https://inews.gtimg.com/om_bt/GvZs6uV9bNKDrX3ymVetdoT7GDNv_2cWg0HQMDqpdCULIAA/0

梦江南 发表于 2026-6-17 16:48

也曾年轻 发表于 2026-6-17 16:45
小沙发请笑纳

复制地址收藏，本来沙发好开店了，系统重装都是没了。

也曾年轻 发表于 2026-6-17 16:49

梦江南 发表于 2026-6-17 16:48
复制地址收藏，本来沙发好开店了，系统重装都是没了。

老店倒闭了{:5_117:}

梦江南 发表于 2026-6-17 16:53

也曾年轻 发表于 2026-6-17 16:49
老店倒闭了

是啊，重新收集

杨帆 发表于 2026-6-17 21:38

主题应景，诗词很美，谢谢年轻老师精彩分享{:4_190:}

红影 发表于 2026-6-17 22:00

这样欣赏古诗词特别好，感谢也曾年轻的好帖，辛苦你了，制作了这么好的帖子{:4_187:}

也曾年轻 发表于 2026-6-17 22:19

杨帆 发表于 2026-6-17 21:38
主题应景，诗词很美，谢谢年轻老师精彩分享

晚上好！ 谢谢欣赏支持！

https://p2.itc.cn/q_70/images03/20200624/ea04440a9e7049138b84b7b075ceaac0.gif

也曾年轻 发表于 2026-6-17 22:20

红影 发表于 2026-6-17 22:00
这样欣赏古诗词特别好，感谢也曾年轻的好帖，辛苦你了，制作了这么好的帖子

晚上好！谢谢欣赏支持！

https://p4.itc.cn/q_70/images03/20210612/796524c78b654712af09305cdfbf0091.gif

淡墨疏影 发表于 2026-6-17 23:07

很别致的形式，好看，学习了

也曾年轻 发表于 2026-6-18 07:39

淡墨疏影 发表于 2026-6-17 23:07
很别致的形式，好看，学习了

https://p8.itc.cn/q_70/images03/20220603/e4d0cc8c42ce4659aa3f59991a04dc61.gif

霜染枫丹 发表于 2026-6-19 07:48

感谢也曾年轻的分享！端午节快乐~~


也曾年轻 发表于 2026-6-19 09:59

霜染枫丹 发表于 2026-6-19 07:48
感谢也曾年轻的分享！端午节快乐~~

https://img.mp.sohu.com/upload/20170527/86479d37c0d045c89b45e1744c29adba_th.jpg
页: [1]
查看完整版本: 古诗词里的夏雨