醉美水芙蓉 发表于 3 天前

也曾年轻《今日芒种 --- 古诗里的芒种》

<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">⇦&nbsp;上一首</button>&emsp;<input id='selIdx' min='1' value=''/>&emsp;<button id="forward">下一首&nbsp;⇨</button></div>
</div>
<script>
const pics = [
"https://copyright.bdstatic.com/vcg/creative/bc247511954f678482b6ad213f8f2a40.jpg",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkqwuX6DFUiaNQxgyXW8VksP5ltkRlH9ia7J5rJXf0QeQGwZB09iaUicNrrsyiaLZnRgfpohWjZbZDOetrONtoAgjQJ3t2gFoCfHIqWM/640?wx_fmt=jpeg&watermark=1#imgIndex=14",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkqICibSsQk5wOFrakaNBRpfEucu5GFmKRIEeOlzBJvC1kpeSred5q3SicUyPOoo8DQh6uNT4aQgibvvcrdWge5ukzSt3q5AC8Oa2Y/640?wx_fmt=jpeg&watermark=1#imgIndex=15",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkqdbrOiakqZkibKoaYpeFXflKibNzdrkKuRuDTS4h1U7ukfmGyY4cMzHnrmEUNz4y0iawCtPv9gKoKo4sbsdJx4WRzs60HWUBKnRBg/640?wx_fmt=jpeg&watermark=1#imgIndex=16",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkrHbXOQOa1ibLeHicxUicWBvbuy6UCHcuar8vAUOsSnML8XeBn0oEmX5owstwjlF6nZ2MdOZ4rFw1gQiaErmSDMLW3QpzmwkzHkiaec/640?wx_fmt=jpeg&watermark=1#imgIndex=17",
];
//       https://mp.weixin.qq.com/s/AmXoQWfxCQG1RO_E222cEw
const tab = `&emsp;&emsp;`;
const poems = [
[`《咏廿四气诗·芒种五月节》`,
`唐·元稹`,
`芒种看今日，螳螂应节生。`,
`彤云高下影，鴳鸟往来声。`,
`渌沼莲花放，炎风暑雨晴。`,
`相逢问蚕麦，幸得称人情。`,
`芒种节气就在今日，螳螂感应时节破壳而生。红霞映照出高低错落的云影，鹌鹑类小鸟往来啼鸣不断。碧绿池塘中莲花悄然绽放，热风伴着骤雨后又转晴。路上相逢总要问问蚕丝与麦收，幸而今年收成还能慰藉人心。`],
[`《芒种后积雨骤冷三绝·其二》`,`宋·范成大`,
`梅黄时节怯衣单，五月江吴麦秀寒。`,
`香篆吐云生暖热，从教窗外雨漫漫。`,
`梅子黄熟的时节，却因衣衫单薄而感到寒意，五月江南的麦子抽穗时，天气竟也如此清冷。点燃盘香，看烟云袅袅生出暖意，任凭窗外的雨水无尽无休地洒落。`],
[`《芒种·其一》`,`宋·韩淲`,
`田家一雨插秧时，成把担禾水拍泥。`,
`分段排行到畦岸，背蓬浑不管归迟。`,
`农家趁着这一场好雨，赶忙插秧，成把的秧苗担在肩上，田水拍打着泥浆。分段排行，一直插到田埂岸边，背着遮雨的篷具，全然不顾归家已晚。`],
[`《寓武昌郡寄真定刘晋川先生·其二》`,`明·李贽`,
`芒种在今朝，君行岂不遥。`,
`农夫欢倒极，雨立迓星轺。`,
`芒种节气就在今天早晨，您的行程怎能说不遥远。农夫们欢喜到了极点，竟冒雨站立迎接您华美的车驾。`],
[`《梅雨五绝·其二》`,`宋·范成大`,
`乙酉甲申雷雨惊，乘除却贺芒种晴。`,
`插秧先插蚤籼稻，少忍数旬蒸米成。`,
`乙酉、甲申日接连的雷雨令人心惊，但晴雨相抵，终可喜贺芒种逢晴。插秧要先插早籼稻，只需忍耐几十天，蒸煮米饭便可成。`],
];
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>

klxf 发表于 前天 12:31

有声有色，谢谢友友分享

醉美水芙蓉 发表于 前天 21:51

klxf 发表于 2026-6-6 12:31
有声有色，谢谢友友分享

这个你也可以制作的！

klxf 发表于 昨天 10:18

醉美水芙蓉 发表于 2026-6-6 21:51
这个你也可以制作的！

是，欣赏学习了
页: [1]
查看完整版本: 也曾年轻《今日芒种 --- 古诗里的芒种》