2023年音乐月历
本帖最后由 起个网名好难 于 2022-11-28 17:11 编辑 <br /><br /><style>.mCalendar {position:relative;width:560px;min-height:900px;heght:auto !impotant;border:thick brown solid;overflow:hidden;padding:8px;display:none;}
.mCalendar img {width:560px;position:absolute;left:8px;}
#mBlk {width:120px;display:grid;place-items:center;float:left;height:920px;}
.mBox {width:120px;margin-left:18px;text-align:left;display:grid;place-items:center;cursor:pointer;}
.mBox img {width:40px;height:40px;border-radius:20%;}
.mBox span {font:normal 1em 微软雅黑;color:brown;}
</style>
<div id="outblk" style="float:left;"></div>
<div id="mBlk">
<div class="mBox" data-index="0">
<img src="https://img3.kuwo.cn/star/albumcover/500/18/89/3272161414.jpg" />
<span>一 月</span>
</div>
<div class="mBox" data-index="1">
<img src="https://y.gtimg.cn/music/photo_new/T002R500x500M000001reyjF1shLhr.jpg" />
<span>二 月</span>
</div>
<div class="mBox" data-index="2">
<img src="https://y.gtimg.cn/music/photo_new/T002R500x500M000003R9SS03yL7J0.jpg" />
<span>三 月</span>
</div>
<div class="mBox" data-index="3">
<img src="https://y.gtimg.cn/music/photo_new/T002R500x500M000003aOTcC3XVIlk.jpg" />
<span>四 月</span>
</div>
<div class="mBox" data-index="4">
<img src="https://img4.kuwo.cn/star/albumcover/500/4/90/2801756653.jpg" />
<span>五 月</span>
</div>
<div class="mBox" data-index="5">
<img src="https://y.gtimg.cn/music/photo_new/T002R500x500M0000024RXz94OSKCa.jpg" />
<span>六 月</span>
</div>
<div class="mBox" data-index="6">
<img src="https://img4.kuwo.cn/star/albumcover/500/9/7/1105144808.jpg" />
<span>七 月</span>
</div>
<div class="mBox" data-index="7">
<img src="https://img2.kuwo.cn/star/starheads/500/52/58/2533712679.jpg" />
<span>八 月</span>
</div>
<div class="mBox" data-index="8">
<img src="https://y.gtimg.cn/music/photo_new/T002R500x500M000003RaCYl19XJKU.jpg" />
<span>九 月</span>
</div>
<div class="mBox" data-index="9">
<img src="https://img1.kuwo.cn/star/albumcover/500/64/50/2397036994.jpg" />
<span>十 月</span>
</div>
<div class="mBox" data-index="10">
<img src="https://img4.kuwo.cn/star/albumcover/500/65/80/1670373567.jpg" />
<span>十一月</span>
</div>
<div class="mBox" data-index="11">
<img src="https://img2.kuwo.cn/star/albumcover/500/0/81/954118169.jpg" />
<span>十二月</span>
</div>
</div>
<audio src="" id="mSound"></audio>
<script>
var pics = [
"https://s1.ax1x.com/2022/11/27/zUlzDK.jpg",
"https://s1.ax1x.com/2022/11/27/zUlsHS.jpg",
"https://s1.ax1x.com/2022/11/27/zU1SHO.png",
"https://s1.ax1x.com/2022/11/27/zUlwct.jpg",
"https://s1.ax1x.com/2022/11/27/zUlcNQ.png",
"https://s1.ax1x.com/2022/11/27/zUlrB8.jpg",
"https://s1.ax1x.com/2022/11/27/zUl6Ag.jpg",
"https://s1.ax1x.com/2022/11/27/zUl0jP.jpg",
"https://s1.ax1x.com/2022/11/27/zUlR9s.jpg",
"https://s1.ax1x.com/2022/11/27/zUlDnf.jpg",
"https://s1.ax1x.com/2022/11/27/zUlW3n.jpg",
"https://s1.ax1x.com/2022/11/27/zUlghj.jpg",
"https://s1.ax1x.com/2022/11/27/zUlfcq.jpg",
"https://s1.ax1x.com/2022/11/27/zUl5uV.jpg",
"https://s1.ax1x.com/2022/11/27/zUlHN4.jpg",
"https://s1.ax1x.com/2022/11/27/zUloHU.jpg",
"https://s1.ax1x.com/2022/11/27/zUlIBT.jpg",
"https://s1.ax1x.com/2022/11/27/zUl7EF.jpg",
"https://s1.ax1x.com/2022/11/27/zUlO3R.jpg",
"https://s1.ax1x.com/2022/11/27/zUlb4J.jpg",
"https://s1.ax1x.com/2022/11/27/zUljjx.jpg",
"https://s1.ax1x.com/2022/11/27/zUlLC9.jpg",
"https://s1.ax1x.com/2022/11/27/zUlXg1.jpg",
"https://s1.ax1x.com/2022/11/27/zUlxu6.jpg"
];
var musicInfo = [
["等你回草原-奥云格日乐","https://www.qqmc.com/up/kwlink.php?id=219204505&.mp3"],
["我要醉在草原上-乌兰图雅","https://www.qqmc.com/up/kwlink.php?id=203233950&.mp3"],
["回到草原-巴特尔·邓勇","https://www.qqmc.com/up/kwlink.php?id=147915733&.mp3"],
["敖包相会-陈蓉晖","https://www.qqmc.com/up/kwlink.php?id=38617378&.mp3"],
["草原醉-乌兰图雅","https://www.qqmc.com/up/kwlink.php?id=3413703&.mp3"],
["西海情歌-刀郎","https://www.qqmc.com/up/kwlink.php?id=203164&.mp3"],
["草原芬芳-云飞","https://www.qqmc.com/up/kwlink.php?id=54649547&.mp3"],
["我和草原有个约定-齐峰","https://www.qqmc.com/up/kwlink.php?id=4295846&.mp3"],
["陪你一起看草原-乌兰托娅","https://www.qqmc.com/up/kwlink.php?id=511395&.mp3"],
["天下最美的草原-呼斯楞","https://www.qqmc.com/up/kwlink.php?id=6990228&.mp3"],
["美丽的草原我的家-德德玛","https://www.qqmc.com/up/kwlink.php?id=212878309&.mp3"],
["天边的家乡-布仁巴雅尔","https://www.qqmc.com/up/kwlink.php?id=1661159&.mp3"]
];
var outblk = document.querySelector("#outblk");
for(n = 0; n < pics.length; n+=2) {
let divObj = document.createElement('div');
divObj.className = "mCalendar";
let imgObj0 = document.createElement('img');
imgObj0.src = pics;imgObj0.style.top='8px';
divObj.appendChild(imgObj0);
let imgObj1 = document.createElement('img');
imgObj1.src = pics;imgObj1.style.bottom='8px';
divObj.appendChild(imgObj1);
outblk.appendChild(divObj);
}
let mCalendars = document.querySelectorAll('.mCalendar');
let mBoxes = document.querySelectorAll('.mBox');
let mSound = document.querySelector('#mSound');
for(n = 0; n < mBoxes.length; n++) {
mBoxes.title = musicInfo;
mBoxes.onclick = function() {
let mIdx = this.dataset.index;
for(k = 0; k < mCalendars.length; k++) mCalendars.style.display='none';
mCalendars.style.display='block';
mSound.pause();
mSound.src = musicInfo;
mSound.play();
}
}
mBoxes.click();
</script> 谢谢老师分享精彩！{:4_178:} 近朱者赤 发表于 2022-11-28 18:42
谢谢老师分享精彩！
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670938097&t=c536553ce66f644df4b5b7999f2029b2 切换小图后，不但月份变了，图片变了，音乐也变了。这个制作真精彩{:4_187:} 已经把明年的月历做出来了，真超前啊{:4_173:} 红影 发表于 2022-11-28 18:54
切换小图后，不但月份变了，图片变了，音乐也变了。这个制作真精彩
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670938097&t=c536553ce66f644df4b5b7999f2029b2 红影 发表于 2022-11-28 18:54
已经把明年的月历做出来了，真超前啊
素材基本来自于微信公众号，是他们积极了{:5_106:} 起个网名好难 发表于 2022-11-28 19:25
素材基本来自于微信公众号，是他们积极了
不过也快了，还剩一个月多点，就要跨入23年了，时间真快啊{:4_187:} 红影 发表于 2022-11-28 20:12
不过也快了，还剩一个月多点，就要跨入23年了，时间真快啊
https://ts1.cn.mm.bing.net/th/id/R-C.404e43cbd7d13a8025ee4248b7128526?rik=uKwi7anpLbi7gg&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f16%2f10%2f24%2fe7d8549ca3e49c19121824ead360efcd.jpg&ehk=%2bILH1aI57MUN6fAbQg7eSM1K%2bpss%2bSVyVSsyYNi%2btpM%3d&risl=&pid=ImgRaw&r=0 这个制作很实用呢，年历{:4_178:} 醉美水芙蓉 发表于 2022-11-28 21:41
欣赏老师佳作！
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670938097&t=c536553ce66f644df4b5b7999f2029b2 小辣椒 发表于 2022-11-28 21:49
这个制作很实用呢，年历
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670938097&t=c536553ce66f644df4b5b7999f2029b2 立马收藏起来，谢谢精彩制作，真是有心了！{:4_190:} 发送到手机上看日历时欣赏{:4_181:} 樵歌 发表于 2022-11-29 08:07
立马收藏起来，谢谢精彩制作，真是有心了！
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670938097&t=c536553ce66f644df4b5b7999f2029b2 樵歌 发表于 2022-11-29 08:10
发送到手机上看日历时欣赏
手机上好像用电脑版才行 精美的月历，欣赏问好！{:4_204:} 梦缘 发表于 2022-11-29 20:14
精美的月历，欣赏问好！
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670938097&t=c536553ce66f644df4b5b7999f2029b2 欣赏精彩的制作！
页:
[1]
2