马黑黑 发表于 2022-8-1 12:17

樵歌轱辘回文·农

<style>
#papa { left: -214px; width: 1024px; height: 600px; background: gray url('/data/attachment/forum/202208/01/121439t4vgel87lzgr7vfr.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#mama { position: absolute; left: 100px; top: calc(50% - 180px); display: grid; place-items: center; width: 360px; height: 360px; cursor: pointer; }
#tit { position: absolute; left: 26px; top: 26px; font: bold 26px / 26px sans-serif; color: lightblue; text-shadow: 1px 1px 2px rgba(0,0,0,.8); }
.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">1</span></div>
</div>

<script>
let idx = 0, step = 0;
let strAr = '方报晓笔抒农事赋耕躬蹈垅东'.split(''), spans = [],
        sentences = [
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
        ];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1873763455.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*27.6}deg) translateY(180px) rotate(${-x*27.6}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 purple';
        step ++;
        if(step > sentences.length - 1) {
                step = 0;
                idx ++;
                if(idx > sentences.length - 1) idx = 0;
                txtColor();
        }
        setTimeout(txtCircle, 1500);
}
</script>

加林森 发表于 2022-8-1 12:25

看着真有意思。整不太懂。{:4_199:}
@樵歌 帮喊！{:4_195:}

马黑黑 发表于 2022-8-1 12:25

加林森 发表于 2022-8-1 12:25
看着真有意思。整不太懂。
@樵歌 帮喊！

三言：事，赋耕躬，蹈垅东。方报晓，笔抒农。
四言：事赋耕躬，躬蹈垅东。东方报晓，晓笔抒农。
五绝：农事赋耕躬，耕躬蹈垅东。垅东方报晓，报晓笔抒农。
七绝：笔抒农事赋耕躬，事赋耕躬蹈垅东。躬蹈垅东方报晓，东方报晓笔抒农。

加林森 发表于 2022-8-1 12:28

马黑黑 发表于 2022-8-1 12:25
三言：事，赋耕躬，蹈垅东。方报晓，笔抒农。
四言：事赋耕躬，躬蹈垅东。东方报晓，晓笔抒农。
五绝： ...

哦哦。辛苦了。喝茶：{:4_190:}

马黑黑 发表于 2022-8-1 12:29

加林森 发表于 2022-8-1 12:28
哦哦。辛苦了。喝茶：

樵歌大文豪，整的诗复杂无比

红影 发表于 2022-8-1 13:17

黑黑把四种读法共十六句的诗句全弄出来了，真不容易。太赞了{:4_199:}

红影 发表于 2022-8-1 13:17

师兄快来看轱辘诗也能做成代码呢@樵歌{:4_195:}

红影 发表于 2022-8-1 13:21

想请教一下黑黑，能不能一种读法是一个颜色？
比如三言的读到的字就是红色，没读到的不变。四言读的字是蓝。诸如此类。
也就是让各种体的4句的颜色区别于其他体。

加林森 发表于 2022-8-1 13:21

马黑黑 发表于 2022-8-1 12:29
樵歌大文豪，整的诗复杂无比

我不懂这些的。{:5_103:}

梦油 发表于 2022-8-1 13:42

灵动的画面，绝妙的设计。

          {:4_199:}

马黑黑 发表于 2022-8-1 18:18

梦油 发表于 2022-8-1 13:42
灵动的画面，绝妙的设计。

主要是樵歌的作品好

马黑黑 发表于 2022-8-1 18:20

红影 发表于 2022-8-1 13:21
想请教一下黑黑，能不能一种读法是一个颜色？
比如三言的读到的字就是红色，没读到的不变。四言读的字是蓝 ...

这个可以设计，得重建多维数组什么的

马黑黑 发表于 2022-8-1 18:21

加林森 发表于 2022-8-1 13:21
我不懂这些的。

学学就懂

梦油 发表于 2022-8-1 18:38

马黑黑 发表于 2022-8-1 18:18
主要是樵歌的作品好

珠联璧合

樵歌 发表于 2022-8-1 18:51

黑黑辛苦啦{:4_176:}

樵歌 发表于 2022-8-1 18:52

怕是烧了好多脑细胞哈{:4_190:}

樵歌 发表于 2022-8-1 18:53

重感冒了，在床上昏睡哈{:4_198:}

加林森 发表于 2022-8-1 18:55

马黑黑 发表于 2022-8-1 18:21
学学就懂

等电脑好了才行。

樵歌 发表于 2022-8-1 18:57

红影 发表于 2022-8-1 13:17
师兄快来看轱辘诗也能做成代码呢@樵歌

从昨天开始重感冒！一开始当夏天的风热感冒吃药了，越吃越重！今天再查，属风寒感冒！{:4_198:}

樵歌 发表于 2022-8-1 18:59

加林森 发表于 2022-8-1 12:25
看着真有意思。整不太懂。
@樵歌 帮喊！

感冒了还吃错药了！在睡呢，才起来哈
页: [1] 2 3 4
查看完整版本: 樵歌轱辘回文·农