论坛 › 古风雅韵 › 给庶民转个轱辘

樵歌 发表于 2023-4-3 12:09

给庶民转个轱辘

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('http://img3.chinadaily.com.cn/images/202209/26/6331807fa310817f5c10f72c.jpeg')
no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#mama { position: absolute; left: 100px; top: calc(50% - 140px); display: grid; place-items: center; width: 360px; height: 360px; cursor: pointer; }
#tit { position: absolute; left: 26px; top: 46px; font: bold 26px / 26px sans-serif; color: #4D0CAF; 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,.4); 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 style="position: absolute; left:560px; top: 250px; width:451px;">
                <img alt="" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif"/></div>
</div><br><br><br><br><br><br>

<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=1320139252.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>

樵歌 发表于 2023-4-3 12:11

三言：字。养精神，鬼亦尊。称一绝，庶民文。四言：字养精神，神鬼亦尊。尊称一绝，绝庶民文。王绝：文字养精神，精神鬼亦尊。亦尊称一绝，一绝庶民文。七绝：庶民文字养精神，字养精神鬼亦尊。神鬼亦尊称一绝，尊称一绝庶民文。

樵歌 发表于 2023-4-3 12:14

@小辣椒我在易云选的歌“深秋清风”
https://music.163.com/song?id=1320139252&userid=1375167424放代码里没声音！另外有个问题是：每一首歌链接后面都是“&userid=1375167424”，你们是用的哪个易云呀？我用的是：网易云音乐PC版，把用的那个易云民个给我看看。弄了一上午也没搞明白，气死我了{:4_198:}

马黑黑 发表于 2023-4-3 12:20

{:4_199:}

樵歌 发表于 2023-4-3 12:22

马黑黑 发表于 2023-4-3 12:20


请帮看一个为啥没音乐呀{:4_198:}

马黑黑 发表于 2023-4-3 13:32

樵歌 发表于 2023-4-3 12:22
请帮看一个为啥没音乐呀

你的音乐地址来自QQ音乐，QQ音乐不许外链。

梦油 发表于 2023-4-3 14:03

《给庶民转个轱辘》堪称一绝啊！

红影 发表于 2023-4-3 14:05

樵歌 发表于 2023-4-3 12:14
@小辣椒我在易云选的歌“深秋清风”
https://music.163.com/song?id=1320139252&userid=1375167424放代 ...

师兄不要用客户端，直接进入网易云地址，都不能登录就能看到歌曲地址。记得这事上次就说过。
链接地址在论坛链接里就有，直接点链接，搜歌曲就可以了。很简单。

红影 发表于 2023-4-3 14:17

这个轱辘诗漂亮，组词自然，意思流畅，对庶民的文字给予了赞誉。很棒的轱辘诗。
师兄不但诗句厉害，还做成了漂亮的代码帖子，更是美妙。给师兄点赞，@庶民收礼开心{:4_187:}

红影 发表于 2023-4-3 14:17

我没分了，等攒出来再加{:4_173:}

亦是金 发表于 2023-4-3 16:44

将歌曲链接改为：aud.src = 'https://music.163.com/song/media/outer/url?id=1320139252';

樵歌 发表于 2023-4-3 17:35

红影 发表于 2023-4-3 14:05
师兄不要用客户端，直接进入网易云地址，都不能登录就能看到歌曲地址。记得这事上次就说过。
链接地址在 ...

谢谢师妹指点{:4_185:}终于明白了点。把音乐给放出来了{:4_205:}

樵歌 发表于 2023-4-3 18:21

马黑黑 发表于 2023-4-3 13:32
你的音乐地址来自QQ音乐，QQ音乐不许外链。

用易云客户端了，复制的链接不对，经红影指点，已经纠正过来了{:4_190:}

樵歌 发表于 2023-4-3 18:23

红影 发表于 2023-4-3 14:17
这个轱辘诗漂亮，组词自然，意思流畅，对庶民的文字给予了赞誉。很棒的轱辘诗。
师兄不但诗句厉害，还做成 ...

这不全都跟着师妹混才学了几招{:4_205:}

樵歌 发表于 2023-4-3 18:25

亦是金 发表于 2023-4-3 16:44
将歌曲链接改为：aud.src = 'https://music.163.com/song/media/outer/url?id=1320139252';

谢谢，网用错了{:4_190:}

樵歌 发表于 2023-4-3 18:25

梦油 发表于 2023-4-3 14:03
《给庶民转个轱辘》堪称一绝啊！

谢谢老哥夸奖{:4_190:}

马黑黑 发表于 2023-4-3 19:01

樵歌 发表于 2023-4-3 18:21
用易云客户端了，复制的链接不对，经红影指点，已经纠正过来了

额，挺好

梦油 发表于 2023-4-3 20:12

樵歌 发表于 2023-4-3 18:25
谢谢老哥夸奖

你才是有真本事的人。

千羽 发表于 2023-4-3 21:01

好美的背景图，樵歌老师做的图很亮眼，刮目相看哦，棒棒哒，点赞送花花啦{:4_187:}{:4_199:}

千羽 发表于 2023-4-3 21:04

文采飞扬的转轱辘，樵歌老师太棒了{:4_199:}{:4_187:}

查看完整版本: 给庶民转个轱辘