马黑黑 发表于 2022-7-31 21:40

红影大十字回文：汗

本帖最后由 马黑黑 于 2022-7-31 21:43 编辑 <br /><br /><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-7-31 21:59

先抢个沙发{:4_335:}

红影 发表于 2022-7-31 22:00

这个厉害了，不但有读的顺序，文字还能变色的。黑黑太棒了{:4_199:}

红影 发表于 2022-7-31 22:02

当中还有个每次重复的字呢，这个感觉好复杂。黑黑真是什么都能做出来，太厉害了{:4_199:}

红影 发表于 2022-7-31 22:04

有音乐，有背景，文字和音画结合，太棒了。这个俺以后得当发展方向。看起来必须好好学习代码了{:4_173:}

小九 发表于 2022-7-31 22:08

厉害哈{:4_199:}

马黑黑 发表于 2022-7-31 22:30

小九 发表于 2022-7-31 22:08
厉害哈

{:4_180:}

马黑黑 发表于 2022-7-31 22:32

红影 发表于 2022-7-31 22:00
这个厉害了，不但有读的顺序，文字还能变色的。黑黑太棒了

读法还可以加，如果还有读法的话。按 strAr 数组的文字排列，0开始，代表第一个字，12结束，代表第13个字，加在 sentences 数组里，每句八个数组元素，第七、第八相同；按格式做就行。

马黑黑 发表于 2022-7-31 22:34

红影 发表于 2022-7-31 22:02
当中还有个每次重复的字呢，这个感觉好复杂。黑黑真是什么都能做出来，太厉害了

“汗”字会每句都用到，它的下标在 strAr 数组里是 3，按下标找字，就像活字印刷一样的道理{:4_170:}

马黑黑 发表于 2022-7-31 22:37

红影 发表于 2022-7-31 22:04
有音乐，有背景，文字和音画结合，太棒了。这个俺以后得当发展方向。看起来必须好好学习代码了

JS部分有些繁琐，我写了少量的注释

加林森 发表于 2022-7-31 23:01

老黑太厉害了？明天来学习。但愿不晕哈。

马黑黑 发表于 2022-7-31 23:46

加林森 发表于 2022-7-31 23:01
老黑太厉害了？明天来学习。但愿不晕哈。

这个晕定的{:4_170:}

加林森 发表于 2022-7-31 23:49

马黑黑 发表于 2022-7-31 23:46
这个晕定的

再晕才好，必须学习的。{:4_189:}

马黑黑 发表于 2022-8-1 07:46

加林森 发表于 2022-7-31 23:49
再晕才好，必须学习的。

晕是因为JS的基础薄弱。而JS的学习，不是一朝一夕的事情。JS初学者可以去这里学学，最基础的：

https://www.runoob.com/js/js-tutorial.html

加林森 发表于 2022-8-1 08:14

马黑黑 发表于 2022-8-1 07:46
晕是因为JS的基础薄弱。而JS的学习，不是一朝一夕的事情。JS初学者可以去这里学学，最基础的：

https: ...

好的好的。

红影 发表于 2022-8-1 15:23

马黑黑 发表于 2022-7-31 22:34
“汗”字会每句都用到，它的下标在 strAr 数组里是 3，按下标找字，就像活字印刷一样的道理

我特别不习惯下标是从0开始排序的，今天还弄错了呢{:4_173:}

红影 发表于 2022-8-1 15:25

马黑黑 发表于 2022-7-31 22:37
JS部分有些繁琐，我写了少量的注释

要指挥那么多动作，真的很神奇{:4_187:}

红影 发表于 2022-8-1 15:27

马黑黑 发表于 2022-7-31 22:32
读法还可以加，如果还有读法的话。按 strAr 数组的文字排列，0开始，代表第一个字，12结束，代表第13个字 ...

嗯嗯，这个可以加无数种读法呢。

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

红影 发表于 2022-8-1 15:27
嗯嗯，这个可以加无数种读法呢。

只要有

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

红影 发表于 2022-8-1 15:25
要指挥那么多动作，真的很神奇

做细要的是思路和耐心
页: [1] 2 3 4
查看完整版本: 红影大十字回文：汗