美女音乐月历

起个网名好难

   

庶民

很有特色的图图。

微尘

欣赏了你的精彩佳作——《美女音乐月历》，赞一个！

风清

欣赏老师精彩制作，美女个个气质娴雅，美丽大方，而且每月一首古典名曲，相映成辉，为您的精心力作点赞！
辛苦了！

起个网名好难

庶民 发表于 2024-1-7 12:50
很有特色的图图。

起个网名好难

微尘 发表于 2024-1-7 12:56
欣赏了你的精彩佳作——《美女音乐月历》，赞一个！

起个网名好难

风清 发表于 2024-1-7 13:02
欣赏老师精彩制作，美女个个气质娴雅，美丽大方，而且每月一首古典名曲，相映成辉，为您的精心力作点赞！
...

老谟深虑

       老师，好厉害，这个美女月历我看到了，很漂亮。大赞！

老谟深虑

        请老师帮忙，我这个按你的代码制作的，为什么看不到图片？

1. <style>
   
2. #calendar td        {text-align:center;font-size:1.2em;font-weight:bold;color:white;}
   
3. #calendar table        {width:100%;}
   
4. #calendar th        {color:skyblue;font:bold 1.5em '\5fae\8f6f\96c5\9ed1';}
   
5. #calendar        {width:90%;padding:8px;margin:auto;}
   
6. #outBlk        {width:640px;height:850px; margin:auto;overflow:hidden;position:relative;padding:16px 12px;text-align:center;border-radius:32px;
   
7.         background:darkgray url([url]https://s3.bmp.ovh/imgs/2024/01/05/b1e4df02fb672475.jpg[/url]) no-repeat center/cover;box-shadow:2px 2px 8px black;}
   
8. #selMonth {padding:10px;margin:2px;}
   
9. #selMonth, #prem, #nextm {border:none;background-color:lightgray;}
   
10. #inBlk        {width:320px;position:absolute;right:10px;bottom:10px;font-size:13px;}
    
11. </style>
    
12. 
    
13. <div id="outBlk">
    
14.         <div id='inBlk'>
    
15.                 <input type='button' id='prem'value='&#9668' title='上一个月'/>&nbsp;
    
16.                 <input id="selMonth" type="month" min="2024-01" max="2024-12" />
    
17.                 &nbsp;<input type='button' id='nextm' value='&#9658'  title='下一个月' />
    
18.                 <div id='calendar'></div>
    
19.         </div>
    
20. </div>
    
21. 
    
22. <script>
    
23. var bkpics = [
    
24. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/222340yv1pvkpta60k41kk.jpg",
    
25. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/222415lb5ex8o9yxrohxel.jpg",
    
26. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/222416cy0mkyu8mdkp58m9.jpg",
    
27. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/222648n2q72y77mrc700hs.jpg",
    
28. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/222648x8k4wmthhcr9o9wh.jpg",
    
29. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/222649kogzouzup7gvq5no.jpg",
    
30. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/223409cslehe8erle0lxgo.jpg",
    
31. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/223450azfozpnwefcmjop2.jpg",
    
32. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/223607zbhplp6d23hy8thy.jpg",
    
33. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/223543tln1zu1hj83z1bmj.jpg",
    
34. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/224145eqk2arczcf24rmat.jpg",
    
35. "http://www.yinhuabbs.cn/data/attachment/forum/202201/22/223509f7i7v7nqmvpvekpi.jpg"
    
36. ];
    
37. var chkMonth = new Date();
    
38. var cur_month = chkMonth.getMonth()+1;
    
39. selMonth.defaultValue = `${chkMonth.getFullYear()}-${cur_month < 10 ? '0'+cur_month :''+cur_month}`;
    
40. 
    
41. prem.onclick = function()        {
    
42.         selMonth.stepDown(1);
    
43.         showTable();
    
44. }
    
45. nextm.onclick = function()        {
    
46.         selMonth.stepUp(1);
    
47.         showTable();
    
48. }
    
49. selMonth.oninput = function(e)        {
    
50.         if('' === e.target.value) selMonth.value = '1970-01';
    
51.         else        return false;
    
52. }
    
53. 
    
54. function mkTab(yv, mv)        {        // 构造月历表格
    
55.         let tmp_d = new Date(yv, mv-1, 1);
    
56.         let first_d = tmp_d.getDay();        //        这个月的第一天是星期几
    
57.         tmp_d = new Date(yv, mv, 0);
    
58.         let last_d = tmp_d.getDate()        //        这个月有多少天
    
59.        
    
60.         //        表头是不变的
    
61.         let tabStr = "<table><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
    
62.         //        第一行需特殊处理
    
63.         tabStr += '<tr>';
    
64.         let dv = 1, offIdx = 7 - first_d;
    
65.         for(i = 0; i < first_d; i++)        tabStr += '<td>　</td>';        // 第一行加上适当的空格
    
66.         for(i = 0; i < offIdx; i++,dv++) tabStr += `<td>${dv}</td>`;        //       
    
67.         tabStr += '</tr><tr>';
    
68.         //        其余的行处理
    
69.         for(i = dv; i <= last_d; i++)        {
    
70.                 tabStr += `<td>${i}</td>`;
    
71.                 if((i-offIdx) % 7 == 0)        tabStr += '</tr><tr>';        //        七个日子就换一行
    
72.         }
    
73.         tabStr += "</tr></table>"
    
74.         calendar.innerHTML = tabStr;
    
75. }
    
76. function showTable()        {
    
77.         let ym = selMonth.value.split('-');
    
78.         mkTab(parseInt(ym[0]),parseInt(ym[1]));
    
79.         outBlk.style.backgroundImage = `url(${bkpics[parseInt(ym[1]) - 1]})`;
    
80. }
    
81. selMonth.onchange = showTable;
    
82. showTable();
    
83. </script>
    
84. 
    
85. <br /><br /><br><br>
    
86. <video src="https://music.163.com/song/media/outer/url?id=1854387200.mp3" width="1" height="1" controls="" autoplay=""></td></tr>

复制代码

西湖

别具一格的日历图，琴声悠扬！