绿叶清舟 发表于 2022-7-31 21:56
这个十字太考功底了，粗人飘过
细腻的银更要走十字步哈{:4_189:}
小九 发表于 2022-7-31 21:57
这个是走的十字架路程？
嗯，你家灰灰的步子{:4_189:}
我就看看，不懂的。支持！
<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('/data/attachment/forum/202207/31/213753z9ymmpyynczpeesj.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#mama { position: absolute; right: 110px; top: calc(50% - 215px); display: grid; place-items: center; width: 420px; height: 420px; cursor: pointer; }
#mama::before { position: absolute; content: ''; width: inherit; height: inherit; box-shadow: 2px 2px 12px #000; transform: rotate(45deg); }
#tit { position: absolute; left: 210px; top: 26px; font: bold 30px / 30px sans-serif; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,.8); }
#sMsg { position: absolute; left: 120px; top: 120px; }
.txt { position: absolute; width: 60px; height: 60px; font: bold 40px / 60px 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"></span></div>
</div>
<script>
let idx = 0, step = 0, milsecs = 1000, spans = [];
//横、纵排列 纵向不要重复的汗字
let strAr = '雁鸣忙去远山苍江流退黯怀乡'.split(''),
sentences = [ //诗句读法：可添加
,
,
,
,
],
ttAr = ; //纵向排列Top数据
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1818276770.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;
if(parseInt(x) / 6 <= 1) {
ele.style.left = (x * 60) + 'px';
} else {
ele.style.left = '180px';
ele.style.top = ttAr + 'px';
}
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 > sentences.length - 1) idx = 0;
txtColor();
}
setTimeout(txtCircle, 1500);
}
</script>
樵歌 发表于 2022-8-1 08:18
换个形式好玩哈，顺带把以前玩过的复习一下
很有趣味，值得玩味，读后给人留有不尽的余味。
樵歌 发表于 2022-8-1 08:14
本想弄成红影那种式样，但和她的读法顺序不一样，就难住了
读法不重要，前面的字数一致的就可以，读法都是自定规则，建立下标对应单字的数组即可。
樵歌 发表于 2022-8-1 08:22
先想着忙字，然后再用忙许多组词，看上去到去字作轴好凑，就用了，也算误打误撞蒙对了
也算是妙手偶得了，成就一首好诗{:4_187:}
樵歌 发表于 2022-8-1 08:25
和师妹对字的处理一样，总先设定一种意境，然后慢慢顺字去适应意境并丰满圆润它
师妹今天的字还没想好怎么弄呢，师兄选的这些字还都挺难凑的呢{:4_173:}
马黑黑 发表于 2022-8-1 11:17
读法不重要，前面的字数一致的就可以，读法都是自定规则，建立下标对应单字的数组即可。
哪天来试下
红影 发表于 2022-8-1 16:18
也算是妙手偶得了，成就一首好诗
也只好将就了。
红影 发表于 2022-8-1 16:19
师妹今天的字还没想好怎么弄呢，师兄选的这些字还都挺难凑的呢
恩，中伏后面字不太好组
樵歌 发表于 2022-8-2 20:26
哪天来试下
细心一点这个可以试出来
樵歌 发表于 2022-8-2 20:47
也只好将就了。
师兄谦虚，这个东西难，能弄出来，就是胜利呢{:4_187:}
樵歌 发表于 2022-8-2 20:48
恩，中伏后面字不太好组
到最后肯定都能完成的{:4_173:}
红影 发表于 2022-8-3 12:38
师兄谦虚，这个东西难，能弄出来，就是胜利呢
也是哙
红影 发表于 2022-8-3 12:39
到最后肯定都能完成的
快一半了{:4_174:}
红影 发表于 2022-8-1 09:51
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('/data/attachment/forum/2 ...
我上脑去把代码收藏！谢谢师妹，太好啦{:4_187:}
樵歌 发表于 2022-8-3 20:07
快一半了
不知不觉就一半了，倒也快呢。
樵歌 发表于 2022-8-3 20:12
我上脑去把代码收藏！谢谢师妹，太好啦
师兄只要换字就行了，等熟练了，可以换图图和音乐，就是自己的代码帖子了{:4_173:}
红影 发表于 2022-8-4 16:23
不知不觉就一半了，倒也快呢。
后天立秋了，虽伏天，但早晚好点