论坛 › 欢乐水吧 › 学习代码音画《回家的路》

老谟深虑 发表于 2024-1-8 16:33

学习代码音画《回家的路》

本帖最后由 老谟深虑 于 2024-1-8 18:24 编辑 <br /><br />空格这是克隆红影老师的音画代码，只是换了图片，作为学习试贴。

<style>
#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 740px; box-shadow: 3px 3px 20px #000; background: url('https://s11.ax1x.com/2024/01/08/pFS4ouT.jpg') no-repeat center/cover; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
#papa video { position: absolute; width: 100%; height: 810px; top: -70px; opacity: .85; object-fit: cover; pointer-events: none; mix-blend-mode: screen; }

#mydiv {
      position: absolute;
      left: 220px;
      top: 500px;
      padding: 6px;
      width: fit-content;
      border: 4px solid rgba(0,0,0,.15);
      border-radius: 6px;
      background: rgba(100,100,100,.2);
      box-shadow: 4px 4px 16px rgba(0,0,0,.25);
}
#rlTop {
      display: flex;
      gap: 6px;
      background: #ccc;
      padding: 10px;
      border-radius: 10px 10px 0 0;
}
#today {
      text-align: right;
      cursor: pointer;
      user-select: none;
}
#rili {
      width: 210px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      background: #eee;
      border-radius: 0 0 10px 10px;
}
.tbox {
      width: 30px;
      height: 30px;
      text-align: center;
      font: normal 16px/40px sans-serif;
}
</style>

<div id="papa">
      <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b977d9e77.mp4" autoplay loop muted></video>

<div id="mydiv">
      <div id="rlTop">
                <select id="sYear"></select>
                <select id="sMonth"></select>
                <span id="today" title="今日日历">今日</span>
      </div>
      <div id="rili"></div>
</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=2091979975');
      player.setBtnCss(`
                width: 300px;
                bottom: 50px;               
                --btnBg: url('https://pic.imgdb.cn/item/658fbbadc458853aefa56c63.png') no-repeat center/cover;
                --trackBg: linear-gradient(to right, hsla(38, 100%, 82%, .35), hsla(34, 100%, 63%, 0.25), hsla(34, 100%, 63%, 0.25));
                --progBg: #F4A460;
                --btnSize: 50px;
      `);
      player.setLrcCss('top: 80px; color: #E6E9E6; --bg: linear-gradient(rgba(255,236,199,.25),rgba(255,164,36,.9));');
      player.lrcAr = [
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      
];
};

let thisYear = new Date().getFullYear();
let thisMonth = new Date().getMonth();
let thisDay = new Date().getDate();
let m1stDay = (y,m) => new Date(y, m).getDay();
let mAllDays = (y,m) => new Date(y, m + 1, 0).getDate();

let calendar = (year,month) => {
      let ar = '日一二三四五六'.split('').map(c => `<div class="tbox">${c}</div>`);
      let output = ar.join('');
      let d = new Date(year,month);
      let y = d.getFullYear(), m = d.getMonth();
      let alldays = mAllDays(y,m);
      let firstday = m1stDay(y,m);
      Array.from({length: alldays + firstday}).forEach((item,key) => {
                let idx = key < firstday ? '' : (key - firstday + 1);
                if(idx == thisDay && month == thisMonth && year == thisYear)
                        idx = `<span style="color:red">${idx}</span>`;
                output += `<div class="tbox">${idx}</div>`;
      });
      rili.innerHTML = output;
};

let mkYear = () => {
      let ar = [...new Array(10).keys()].map(item => item + 2018);
      ar.forEach((y,k) => {
                let selected = y == new Date().getFullYear() ? 'selected' : '';
                sYear.innerHTML += `<option ${selected} value="${y}">${y}年</option>`;
      });
};

let mkMonth = () => {
      Array.from({length: 12}).forEach((m,k) => {
                let selected = k === new Date().getMonth() ? 'selected' : '';
                sMonth.innerHTML += `<option ${selected} value="${k}">${k + 1}月</option>`;
      });
};

sYear.onchange = sMonth.onchange = () => calendar(sYear.value,sMonth.value);

today.onclick = () => {
      sYear.value = thisYear;
      sMonth.value = thisMonth;
      calendar(thisYear,thisMonth);
};

calendar(thisYear,thisMonth);
mkYear();
mkMonth();

})();
</script>

起个网名好难 发表于 2024-1-8 17:55

因为看不到底图只见漫天雪花飞舞{:5_106:}

看不见图是我这的问题。

老谟深虑 发表于 2024-1-8 18:12

起个网名好难 发表于 2024-1-8 17:55
因为看不到底图只见漫天雪花飞舞

看不见图是我这的问题。

          哈哈哈，我能看到。

起个网名好难 发表于 2024-1-8 18:21

老谟深虑 发表于 2024-1-8 18:12
哈哈哈，我能看到。

您在离退休论坛的帖子也是这样，例如学习代码音画《2024年美女月历》前三季度看不见，第四季度就看到了{:5_117:}

老谟深虑 发表于 2024-1-8 18:24

起个网名好难 发表于 2024-1-8 18:21
您在离退休论坛的帖子也是这样，例如学习代码音画《2024年美女月历》前三季度看不见，第四季度就看到了{: ...

          这是为什么？

起个网名好难 发表于 2024-1-8 18:48

老谟深虑 发表于 2024-1-8 18:24
这是为什么？

有的网站我这到不了而另一些网站您那到不了，估计还是DNS的问题，马马虎虎对付着来吧。

樵歌 发表于 2024-1-8 19:51

我看得真真的音乐也有，做得不错的{:4_199:}

红影 发表于 2024-1-8 20:03

图图里的是老谟深虑老师自己么？真的是冰天雪地呢，这样的背景特别适合这个代码呢，真正的大雪纷飞就是这样的背景才好{:4_187:}

马黑黑 发表于 2024-1-8 20:04

起个网名好难 发表于 2024-1-8 18:48
有的网站我这到不了而另一些网站您那到不了，估计还是DNS的问题，马马虎虎对付着来吧。

自动获取DNS或许没问题？

红影 发表于 2024-1-8 20:05

这首歌当时只是想搜个歌，现在听听觉得很好。特别快要过年了，非常适合风雪中回家过年的心情{:4_204:}

红影 发表于 2024-1-8 20:05

帖子制作很完美，给老谟深虑老师点赞{:4_199:}

起个网名好难 发表于 2024-1-8 20:36

本帖最后由 起个网名好难 于 2024-1-8 20:38 编辑

马黑黑 发表于 2024-1-8 20:04
自动获取DNS或许没问题？
如果没有特殊的需求是不会去设置DNS的，估计95%以上的人都是使用自动获取。

马黑黑 发表于 2024-1-8 20:39

起个网名好难 发表于 2024-1-8 20:36
如果没有特殊的需求是不会去设置DNS的，估计95%以上的人都是使用自动获取。

那是应该没问题的

起个网名好难 发表于 2024-1-8 20:58

马黑黑 发表于 2024-1-8 20:39
那是应该没问题的

理论上是，实际上就难说了。

马黑黑 发表于 2024-1-8 21:24

起个网名好难 发表于 2024-1-8 20:58
理论上是，实际上就难说了。

跟网络提供商的线路也有关系。一般来说，电信的网没啥问题。

起个网名好难 发表于 2024-1-8 21:34

马黑黑 发表于 2024-1-8 21:24
跟网络提供商的线路也有关系。一般来说，电信的网没啥问题。

恰好就是电信的光纤宽带{:5_102:}

小辣椒 发表于 2024-1-8 22:11

欣赏精彩的制作，感谢分享{:4_187:}

马黑黑 发表于 2024-1-8 23:22

起个网名好难 发表于 2024-1-8 21:34
恰好就是电信的光纤宽带

那应该不会有什么问题的。估计与路由器的设置有关，或当地供应商有什么限制。

起个网名好难 发表于 2024-1-9 08:26

马黑黑 发表于 2024-1-8 23:22
那应该不会有什么问题的。估计与路由器的设置有关，或当地供应商有什么限制。



就是无法解析地址

马黑黑 发表于 2024-1-9 12:57

起个网名好难 发表于 2024-1-9 08:26
就是无法解析地址

应该尝试过路由器复位了吧？反正大部分设置用默认的，其他特殊需要的设置一下，然后，电脑可以设两组通用的DNS，主打的用当地电信的DNS，通用的可以考虑百度或阿里的。

查看完整版本: 学习代码音画《回家的路》