论坛 › 音乐沙龙 › 《心愿》（学习黑黑日历效果）

红影 发表于 2024-1-3 22:19

《心愿》（学习黑黑日历效果）

<style>
#papa { margin: 80px 0 0 calc(50% - 681px); width: 1200px; height: 656px; border: 4px solid rgba(0,92,0,.15); border-radius: 10px; background: gray url('https://pic.imgdb.cn/item/659519dc871b83018a8a0b46.jpg') no-repeat center/cover; box-shadow: 0px 0px 16px rgba(185,213,133,.95); position: relative; display: grid; place-items: center; z-index: 1; }
#rili { padding: 6px; top: 40px; left: 80px; max-width: 222px; display: flex; flex-direction: row; flex-wrap: wrap; color: #eee; box-sizing: border-box; user-select: none; position: absolute; }
#rili::before { position: absolute; content: attr(data-bg); width: 100%; height: 100%; color: rgba(20,20,20,.25); display: grid; place-items: center; font: bold 2em sans-serif; }
#iRed { position: relative; color: red; transition: .5s; }
#iRed:hover { font-size: 32px; font-weight: bold; } .tbox { width: 30px; height: 26px; text-align: center; font: normal 16px/26px sans-serif; }
</style>
<div id="papa">       
        <div id="rili" ></div>
</div>
<script>
(function() {
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        let player = new ypP();
        player.setAudSrc('https://music.163.com/song/media/outer/url?id=2083277095');
        player.setBtnCss(`
                width: 300px; height: 5px;
                bottom: 80px;               
                --btnBg: url('https://pic.imgdb.cn/item/65956008871b83018a736ef5.png') no-repeat center/cover;
                --trackBg: linear-gradient(to right, rgba(165, 188, 217, .35), rgba(175, 210, 253, 0.25), rgba(165, 188, 217, 0.25));
                --progBg: rgba(140,211,247, .85);
                --btnSize: 70px;
        `);
        player.setLrcCss('top: 600px; color: #E6E9E6; --bg:rgba(158,219,245, .85); font:bold 1.8em serif; filter:drop-shadow(1px 1px 2px#777);');
        player.lrcAr = [
        , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
};

(function () {
      let ar = '日一二三四五六'.split('').map(c => `<div class="tbox">${c}</div>`);
      let output = ar.join('');
      let y = new Date().getFullYear(), m = new Date().getMonth();
      let days = new Date(y, m+1, 0).getDate();
      let day1st = new Date(y, m).getDay();
      let today = new Date().getDate();
      Array.from({length: days + day1st}).forEach((item,key) => {
                let idx = key < day1st ? '' : (key - day1st + 1);
                if(idx == today) idx = `<span id="iRed">${idx}</span>`;
                output += `<div class="tbox">${idx}</div>`;
      });
      rili.innerHTML = output;
      rili.dataset.bg = `${y}年${m+1}月`;
})();
})();
</script>

红影 发表于 2024-1-3 22:20

既然想跟着学做帖子，就索性别的都放下了，赶紧学个。{:4_173:}
很喜欢这个效果，帖子里的日历可以跟着时间的变化而变化，无论何时看到，都是最新的日历呢。
感谢 黑黑的代码{:4_187:}

红影 发表于 2024-1-3 22:23

这个歌词特别长，做个歌词还花费不少时间，不过倒是想起歌词不分行的事了，这个里面终于弄出来了，否则歌词占的位置太多了@马黑黑{:4_187:}

红影 发表于 2024-1-3 22:23

比较喜欢带进度条的那个效果，所以换成了那个{:4_204:}

红影 发表于 2024-1-3 22:25

为了突出日历，我把歌词缩小了一点，貌似再小点更好？先这样吧。

红影 发表于 2024-1-3 22:26

先回帖去了，一堆提醒没回呢，还有今天的消寒还没写呢，真不知道怎么写了{:4_173:}

醉美水芙蓉 发表于 2024-1-4 07:16

马黑黑 发表于 2024-1-4 12:55

红影 发表于 2024-1-3 22:23
这个歌词特别长，做个歌词还花费不少时间，不过倒是想起歌词不分行的事了，这个里面终于弄出来了，否则歌词 ...

歌词数组可以不分行

红影 发表于 2024-1-4 16:49

醉美水芙蓉 发表于 2024-1-4 07:16
不错的制作，欣赏红影美女精彩音画！

多谢水芙蓉美女鼓励{:4_187:}

红影 发表于 2024-1-4 16:49

马黑黑 发表于 2024-1-4 12:55
歌词数组可以不分行

知道，但是这个歌词太长了，看着难受{:4_173:}

马黑黑 发表于 2024-1-4 17:30

红影 发表于 2024-1-4 16:49
知道，但是这个歌词太长了，看着难受

{:4_172:}

红影 发表于 2024-1-4 19:28

马黑黑 发表于 2024-1-4 17:30


刚做好的时候，我自己翻看都翻半天。

马黑黑 发表于 2024-1-4 20:58

红影 发表于 2024-1-4 19:28
刚做好的时候，我自己翻看都翻半天。

数组元素可以分行写，可以写作一行

红影 发表于 2024-1-4 22:11

马黑黑 发表于 2024-1-4 20:58
数组元素可以分行写，可以写作一行

是的，不影响结果。

马黑黑 发表于 2024-1-5 13:04

红影 发表于 2024-1-4 22:11
是的，不影响结果。

JS是有书写规范的。比如字串变量赋值，下面的写法都是可以的：

var mystr = '锄禾日当午，汗滴禾下土。谁知盘中餐？粒粒皆辛苦。';

var mystr = `
    锄禾日当午，
    汗滴禾下土。
    谁知盘中餐？
    粒粒皆辛苦。
`;

但下面的写法是错误的，会报错不能执行：

var mystr = '
    锄禾日当午，
    汗滴禾下土。
    谁知盘中餐？
    粒粒皆辛苦。
';

红影 发表于 2024-1-5 14:06

马黑黑 发表于 2024-1-5 13:04
JS是有书写规范的。比如字串变量赋值，下面的写法都是可以的：

var mystr = '锄禾日当午，汗滴禾下土 ...

是的小撇的符号么，要求这么细致啊，不仔细看都区分不出来。
分行就要换符号了呢。

马黑黑 发表于 2024-1-5 15:06

红影 发表于 2024-1-5 14:06
是的小撇的符号么，要求这么细致啊，不仔细看都区分不出来。
分行就要换符号了呢。

小角单引号 ：''
小角反引号 ：``
小角双引号 ：""

红影 发表于 2024-1-5 19:42

马黑黑 发表于 2024-1-5 15:06
小角单引号 ：''
小角反引号 ：``
小角双引号 ：""
嗯嗯，不分行小单引号，分行要用小反引号。{:4_187:}

马黑黑 发表于 2024-1-5 20:52

红影 发表于 2024-1-5 19:42
嗯嗯，不分行小单引号，分行要用小反引号。
反引号的使用是很聪明的。反引号纳入JS之前，前端程序员拼接长长的字符串是很是辛苦并且痛苦的，后来他们想出了酱紫的办法：

var str =
      '锄禾日当午，' +
      '汗滴禾下土。' +
      '谁知盘中餐？' +
      '粒粒皆辛苦。'
;

红影 发表于 2024-1-5 22:36

马黑黑 发表于 2024-1-5 20:52
反引号的使用是很聪明的。反引号纳入JS之前，前端程序员拼接长长的字符串是很是辛苦并且痛苦的，后来他们 ...

要是用的别的符号肯定更聪明。这两长得太像了，一个不注意就混了啊{:4_173:}

查看完整版本: 《心愿》（学习黑黑日历效果）