电脑日历制作方法

发布网友发布时间：2022-04-19 13:10

共2个回答

懂视网时间：2022-05-16 03:42

新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑

 <!doctype html> 
 <html> 
 <head>  
 <meta charset="utf-8"> 6  
 <title>无标题文档</title> 7  
 <style> 8  
 * {margin: 0;padding: 0} 9  
 #calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative} 10 
 #calendar h4 {text-align: center;margin-bottom: 10px} 11  
 #calendar .a1 {position: absolute;top: 20px;left: 20px;} 12  
 #calendar .a2 {position: absolute;top: 20px;right: 20px;} 13  
 #calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px} 14  #calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;} 15  #calendar .dateList {overflow: hidden;clear: both} 16  #calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;} 17  
 #calendar .dateList .ccc {color: #ccc;} 18  #calendar .dateList .red {background: #F90;color: #fff;} 19  #calendar .dateList .sun {color: #f00;} 20  </style> 21  <script src="js/jquery-1.11.3.min.js?1.1.11"></script> 22  <script> 23  $(function() { 24 25   //必要的数据 26   
 //今天的年 月 日 ；本月的总天数；本月第一天是周几？？？ 27   var iNow=0; 28   29   function run(n) { 30 31   var oDate = new Date(); //定义时间 32   oDate.setMonth(oDate.getMonth()+n);//设置月份 33   var year = oDate.getFullYear(); //年 34   
 var month = oDate.getMonth(); //月 35   var today = oDate.getDate(); //日 36 37   //计算本月有多少天 38   var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; 39 40   //判断闰年 41   if(month == 1) { 42    
 if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { 43    allDay = 29; 44    } 45   } 46 47   //判断本月第一天是星期几 48   oDate.setDate(1); //时间调整到本月第一天 49   
 var week = oDate.getDay(); //读取本月第一天是星期几 50 51   //console.log(week); 52   $(".dateList").empty();//每次清空 53   //插入空白 54 55   for(var i = 0; i < week; i++) { 56    $(".dateList").append("<li></li>"); 57   } 58 59   
 //日期插入到dateList 60   for(var i = 1; i <= allDay; i++) { 61    $(".dateList").append("<li>" + i + "</li>") 62   } 63   //标记颜色=====================    $(".dateList li").each(function(i, elm){ 65    
 //console.log(index,elm); 66    
 var val = $(this).text(); 67    //console.log(val); 68    if (n==0) { 69    
 if(val<today){ 70    $(this).addClass('ccc') 71    }else if(val==today){ 72    
 $(this).addClass('red') 73    
 }else if(i%7==0 || i%7==6 ){ 74    $(this).addClass('sun') 75    } 76    }else if(n<0){ 77    
 $(this).addClass('ccc') 78    }else if(i%7==0 || i%7==6 ){ 79    
 $(this).addClass('sun') 80    
 } 81   
 }); 82 83   
 //定义标题日期 84   
 $("#calendar h4").text(year + "年" + (month + 1) + "月"); 85   }; 86   run(0); 87     
 $(".a1").click(function(){    iNow--; 90   run(iNow); 91   });   
 $(".a2").click(function(){ 94   
 iNow++; 95   
 run(iNow); 96   
 }) 97  }); 98  
 </script> 99 
 </head>100 101 <body>102  
 <div id="calendar">103  
 <h4>2013年10月</h4>104  
 <a href="##" class="a1">上月</a>105  
 <a href="##" class="a2">下月</a>106  
 <ul class="week">107   
 <li>日</li>108   
 <li>一</li>109   
 <li>二</li>110   
 <li>三</li>111   
 <li>四</li>112   
 <li>五</li>113   
 <li>六</li>114 115  
 </ul>116  
 <ul class="dateList"></ul>117  
 </div>118 119 </body>120 121 </html>

热心网友时间：2022-05-16 00:50

我们小的时候，家里都会摆放日历，既可以装饰家里又可以看日期。今天就跟大家分享一下如何用电脑制作日历。

工具/原料

电脑

光影魔术手

方法/步骤

首先在电脑上打开光影魔术手这款软件，然后点击右上角“打开”按钮。

请点击输入图片描述

然后在下图的对话框中选择一张做为日历背景的图片。

请点击输入图片描述

用光影魔术手打开图片后，在软件上方的功能栏里找“日历”按钮，并点击。在出现的菜单中选择“模板日历”。

请点击输入图片描述

然后软件的右侧会出现很多推荐的素材，选择其中一个。

请点击输入图片描述

再在软件左侧对这张日历的日期、语言，还有年份、月份、星期、日期的字体进行选择调节。

请点击输入图片描述

小编找的橙子图片是做为日历素材中相框内的背景，可以移动下图中的蓝色方框，来选择背景图片的最佳位置。

请点击输入图片描述

全部弄合适后，点击“确定”，确定最终的日历样式。

请点击输入图片描述

最后就是将日历保存。如果要覆盖以前的图片就点击“保存”，然后“确定”。如果不覆盖以前的图片就点击“另存”，选择路径，输入文件名，点击“保存”即可。

请点击输入图片描述

全部频道

电脑日历制作方法