夏
<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 = [
,
,
,
,
];
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;
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) spans.style.color = `rgb(${num(0,255)},${num(0,255)},${num(0,255)})`;
sMsg.innerText = idx + 1;
}
function txtCircle() {
let x = sentences;
spans.style.border = '1px solid lightgreen';
step ++;
if(step > 7) {
step = 0;
idx ++;
if(idx >3) idx = 0;
txtColor();
}
setTimeout(txtCircle, 1500);
}
</script>
十字回文诗又称为转尾或鳞迭，属连环回文诗，是古人创造的一种七言绝句诗体，由10个字连环往复，综合运用，句与句之间有一个字或多个字重叠，其结构如鳞片之叠压覆盖，层层推进，先鳞迭环读至尾，再从尾字开始连环读至开头，形成重复倒旋的回文格，最后读成一首28个字的七绝。
吴绛雪的《夏》原文：
香莲碧水动风凉夏日长
为节省处理代码，帖子中将其前五个字和后五个字置换位置：
风凉夏日长香莲碧水动 帖子以加彩、画圈圈的方式提示十字回文作品的读法，并在诗句中央用数字标明是第几局诗。 全帖代码：
<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 = [
,
,
,
,
];
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;
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) spans.style.color = `rgb(${num(0,255)},${num(0,255)},${num(0,255)})`;
sMsg.innerText = idx + 1;
}
function txtCircle() {
let x = sentences;
spans.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:04 编辑
JS代码中，诗句读法用数组表示：
[*] sentences = [
[*] ,
[*] ,
[*] ,
[*] ,
[*] ];
每句七个字，但给出的每句数组元素是8个，最后一字重复。如此设置，是为了确保最后一个字圈上了才跳到下一句，也就是说，单句中的第八次循环画圈的执行实际上是看不到的，在画之前程序已经跳到下一句了。若只给出7个元素，对应的判断语句 if(step > 7) 中的数字要改为 6，则给第七个字画圈前就会跳到下一句，最后一个字没能看到画圈。
这个高档的回文诗词用的，黑黑特棒！{:4_178:} 小辣椒 发表于 2022-7-31 17:19
这个高档的回文诗词用的，黑黑特棒！
也不知做对了木有，俺没啥文化 马黑黑 发表于 2022-7-31 17:36
也不知做对了木有，俺没啥文化
小辣椒根本就不会回文，高手们玩的 小辣椒 发表于 2022-7-31 17:41
小辣椒根本就不会回文，高手们玩的
樵歌他们玩的 哦哟，老黑又出新的制作了啊。真搞不赢学习了。{:4_199:} 这个好，黑黑用代码的方式给出了4种读法，非常有趣。 依次点亮文字，点亮4次，于是得到如下诗句：
香莲碧水动风凉，
水动风凉夏日长。
长日夏凉风动水，
凉风动水碧莲香。
这个代码的构思十分棒{:4_187:} 这个例子的10个字里有3个韵字，若将7也换为韵字，祝贺的方式还要多。 黑黑开辟了回文诗的新玩法{:4_173:} 加林森 发表于 2022-7-31 18:45
哦哟，老黑又出新的制作了啊。真搞不赢学习了。
这个有难度额 红影 发表于 2022-7-31 18:46
这个好，黑黑用代码的方式给出了4种读法，非常有趣。
你那个大十字回文诗俺研究了一下，貌似比这个古人发明的东东复杂 红影 发表于 2022-7-31 18:53
依次点亮文字，点亮4次，于是得到如下诗句：
香莲碧水动风凉，
传统十字回文，它有规律 红影 发表于 2022-7-31 19:02
这个例子的10个字里有3个韵字，若将7也换为韵字，祝贺的方式还要多。
可以的吧。酱紫的话，加 sentences 就可以 红影 发表于 2022-7-31 19:02
黑黑开辟了回文诗的新玩法
这个也不算什么新吧，就是加入读法而已 马黑黑 发表于 2022-7-31 19:12
这个有难度额
是的，看见这个就有点头疼了。