[灌水] 夏

马黑黑 · 发表于 2022-7-31 16:47

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

[清]吴绛雪 - 《咏四季·夏》

1

马黑黑 · 发表于 2022-7-31 16:51

十字回文诗又称为转尾或鳞迭，属连环回文诗，是古人创造的一种七言绝句诗体，由10个字连环往复，综合运用，句与句之间有一个字或多个字重叠，其结构如鳞片之叠压覆盖，层层推进，先鳞迭环读至尾，再从尾字开始连环读至开头，形成重复倒旋的回文格，最后读成一首28个字的七绝。

吴绛雪的《夏》原文：

香莲碧水动风凉夏日长

为节省处理代码，帖子中将其前五个字和后五个字置换位置：

风凉夏日长香莲碧水动

马黑黑 · 发表于 2022-7-31 16:53

帖子以加彩、画圈圈的方式提示十字回文作品的读法，并在诗句中央用数字标明是第几局诗。

马黑黑 · 发表于 2022-7-31 16:55

全帖代码：

<style>
#papa { left: -214px; width: 1024px; height: 600px; background: gray url('https://638183.freep.cn/638183/Pic/81/summer.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#mama { position: absolute; right: 100px; top: calc(50% - 120px); display: grid; place-items: center; width: 240px; height: 240px; cursor: pointer; }
#tit { position: absolute; left: 26px; top: 26px; font: bold 20px / 20px sans-serif; color: #ccc; text-shadow: 1px 1px 2px rgba(0,0,0,.8); }
.txt { position: absolute; width: 80px; height: 80px; font: bold 50px / 80px sans-serif; text-align: center; text-shadow: 2px 2px 4px rgba(0,0,0,.7); border-radius: 50%; color: snow; }
</style>
<div id="papa">
<span id="tit">[清]吴绛雪 - 《咏四季·夏》</span>
<div id="mama"><span id="sMsg" class="txt">1</span></div>
</div>
<script>
let idx = 0, step = 0, milsecs = 1000;
let strAr = '风凉夏日长香莲碧水动'.split(''), spans = [],
sentences = [
[5,6,7,8,9,0,1,1],
[8,9,0,1,2,3,4,4],
[4,3,2,1,0,9,8,8],
[1,0,9,8,7,6,5,5],
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=434871406.mp3';
aud.loop = true;
aud.autoplay = true;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
for(let x in strAr) {
let ele = document.createElement('span');
ele.className = 'txt';
ele.innerText = strAr[x];
ele.style.transform = `rotate(${x*36}deg) translateY(120px) rotate(${-x*36}deg)`;
mama.appendChild(ele);
spans.push(ele);
}
txtColor()
txtCircle();
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
function txtColor() {
for(let y of spans) {
y.style.color = 'snow';
y.style.border = 'none';
}
for(let x of sentences[idx]) spans[x].style.color = `rgb(${num(0,255)},${num(0,255)},${num(0,255)})`;
sMsg.innerText = idx + 1;
}
function txtCircle() {
let x = sentences[idx][step];
spans[x].style.border = '1px solid lightgreen';
step ++;
if(step > 7) {
step = 0;
idx ++;
if(idx >3) idx = 0;
txtColor();
}
setTimeout(txtCircle, 1500);
}
</script>

复制代码

马黑黑 · 发表于 2022-7-31 17:02

本帖最后由马黑黑于 2022-7-31 17:04 编辑

JS代码中，诗句读法用数组表示：

sentences = [
[5,6,7,8,9,0,1,1],
[8,9,0,1,2,3,4,4],
[4,3,2,1,0,9,8,8],
[1,0,9,8,7,6,5,5],
];

每句七个字，但给出的每句数组元素是8个，最后一字重复。如此设置，是为了确保最后一个字圈上了才跳到下一句，也就是说，单句中的第八次循环画圈的执行实际上是看不到的，在画之前程序已经跳到下一句了。若只给出7个元素，对应的判断语句 if(step > 7) 中的数字要改为 6，则给第七个字画圈前就会跳到下一句，最后一个字没能看到画圈。