醉美水芙蓉 发表于 前天 22:32

也曾年轻10首最美夏日诗

<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">⇦&nbsp;上一首</button>&emsp;<input id='selIdx' min='1' value=''/>&emsp;<button id="forward">下一首&nbsp;⇨</button></div>
</div>
<script>
const pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkodbt715LjHsARmQ85yQv9nNS38IDvDHPjkvjzdlLB6Y6XUvDicESn8qEexuXC61WARib0bmGR9kLJaMSIIb0wwTqibWSweq65H3E/640?wx_fmt=jpeg&watermark=1#imgIndex=9",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkofQMj0p9Ags1BO8zCHtVNGVugyewafib74VCv2fXiaSddxTzbNbu1MTReiaSbfm4vjUdAu9PC212WBbQtOAIV7ZNLqQ81Isf4Vick/640?wx_fmt=jpeg&watermark=1#imgIndex=10",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkpiaESb6ksPZfGvoicZo6RibcRszXj36Xm8V6fk8rCX89UUbAYdHmVoxOssdcKroUy59gAlVDicoNpg3sicmUfk5DgHxj9cM9VsoJQg/640?wx_fmt=jpeg&watermark=1#imgIndex=11",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkqze8JmRbh446dBRgQnb9aU9gBmsmWwKsI7icEWRnp4qicORZ4xV9uTDavmdPzZspIfjeygb5b3GG6VoicZVgJAnZr1ZVjGR8XzTQ/640?wx_fmt=jpeg&watermark=1#imgIndex=12",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkqVaMnVF3GyAysEHFx7gwUQ80HKIbMpaBlrw8abMK5qIsLh8wmwTtJYhHibRt1N6HfPIXREWpkhNJKR9wYSDXf7O0NHlOdfokL8/640?wx_fmt=jpeg&watermark=1#imgIndex=13",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkqlqwnB9xIcotyVhKWjWibJucaJjAu6NsRbXSEFaoqTibmiaEoc9mIFlVxWKzwsIaOUs3EaqH4HEKibadB2ibVuQ1stu8dS6BJiacgx8/640?wx_fmt=jpeg&watermark=1#imgIndex=14",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkrsI3x2zdDJ0ELsTHXoBRlYXxx7cOOoS4QACvSAUncWLsQCu7RvtNxBe2hqZibAuHuPqEwA0sgCIhCbSUSk6kYdsmVicWUib81TfU/640?wx_fmt=jpeg&watermark=1#imgIndex=15",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkrwsaUcVZFaxM7pSOxRDW0MeBwON2OibknjAYamMD51lEFqqNf5KtMeHXkPpcticzGH45hb3UN1HRKvicxAibeMUl1F5Bicw2kMeX7w/640?wx_fmt=jpeg&watermark=1#imgIndex=16",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/RKBUapibjBkobVZhRNW8ibCctUlZQOaIwGzqdsVibbLsD87IMppleDVBcLStOQFkcmiaMu1L7iazRo5B5OhnEiasYxwEQibMMicQOstcknnnSW7lGhI/640?wx_fmt=jpeg&watermark=1#imgIndex=17",
"https://mmbiz.qpic.cn/mmbiz_jpg/RKBUapibjBkreRwMmEefy1FvfNeN4d2VuKh7KZTWE613NrkFiaqzFMYu0MlZlibKYYDbicwHtJZ74KG20RWVARsjQ569WEY5jPUJlm2x9PkBrBw/640?wx_fmt=jpeg&watermark=1#imgIndex=18",
];
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}
微风拂过，水晶帘轻轻摇动，满架的蔷薇使整个庭院弥漫芬芳。`],
];
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 - 4)        {
                        utterance = new SpeechSynthesisUtterance(poems);
                        utterance.lang = 'zh-CN'; // 设置语言为中文
                        utterance.rate = 1; // 设置语速
                        utterance.pitch = 1; // 设置音调
                        synth.speak(utterance); // 播放语音
                }

                utterance.onend = () => {
                        if(pIdx < poems.length - 5)        {
                                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 && sIdx < poems.length - 2) 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]
查看完整版本: 也曾年轻10首最美夏日诗