js生成动态日历

最新推荐文章于 2024-07-17 10:20:02 发布
最新推荐文章于 2024-07-17 10:20:02 发布
阅读量161 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/tancp/p/3876830.html
版权

效果图：

 




 

 看代码：

 

 

Html代码   收藏代码
  1. <html>  
  2.     <head>  
  3.     <title>动态日历</title>  
  4.     <style type="text/css">  
  5.         table{border:1px solid white;}  
  6.         thead tr{}  
  7.         thead tr td{text-align:center;}  
  8.         #calendar tr td{color: #000000;text-decoration: none;text-align:center;}  
  9.     </style>  
  10.       
  11.     </head>   
  12.     <body>  
  13.         年份：<select id="selYear" name="year" οnchange="changeCalendar()"></select>  
  14.         月份：<select id="selMonth" name="month" οnchange="changeCalendar()"></select>  
  15.         <table width="100%" border="1" cellspacing="0" cellpadding="1">  
  16.             <thead>  
  17.             <tr>  
  18.                 <td>Sunday</td>                    
  19.                 <td>Monday</td>  
  20.                 <td>Tuesday</td>  
  21.                 <td>Wednesday</td>                    
  22.                 <td>Thursday</td>  
  23.                 <td>Friday</td>  
  24.                 <td>Saturday</td>  
  25.             </tr>  
  26.             </thead>  
  27.             <tbody id="calendar"></tbody>  
  28.         </table>  
  29.     </body>  
  30.     <script type="text/javascript">  
  31.         (function(){  
  32.             var selYear = document.getElementById("selYear");  
  33.             var selMonth = document.getElementById("selMonth");  
  34.           
  35.             var date = new Date();  
  36.             var year = date.getFullYear();  
  37.             var month = date.getMonth() + 1;  
  38.             var day = date.getDate();  
  39.             //生成当前年往前推10往后推5的数据  
  40.             for(var i = year - 10,len = year + 5; i < len; i++){  
  41.                 var opt = new Option(i + "年", i);  
  42.                 if(i == year) opt.selected = true;  
  43.                 selYear.options.add(opt);  
  44.             }  
  45.             //生成月份数据  
  46.             for(var j = 1; j <= 12; j++){  
  47.                 var m = j < 10 ? "0" + j : j;  
  48.                 var opt = new Option(m + "月", m);  
  49.                 if(j == month) opt.selected = true;  
  50.                 selMonth.options.add(opt);  
  51.             }  
  52.             //显示当前月日历  
  53.             showCalendar(year, month);  
  54.         })();  
  55.           
  56.         //得到每月的天数  
  57.         function getDaysOfMonth(year, month){  
  58.             if(year && month){  
  59.                 if(month == 2){  
  60.                     //2月闰年判断  
  61.                     if((year % 4 == 0 && year % 100 !=0) || year % 400 == 0){  
  62.                         return 29;  
  63.                     }  
  64.                     return 28;  
  65.                 }  
  66.                 var bigMonth = [1,3,5,7,8,10,12];  
  67.                 var littleMonth = [4,6,9,11];  
  68.                 for(var m in bigMonth){  
  69.                     if(bigMonth[m] == month)  
  70.                         return 31;  
  71.                 }  
  72.                 for(var m in littleMonth) {  
  73.                     if(littleMonth[m] == month)  
  74.                         return 30;  
  75.                 }  
  76.             }  
  77.         }  
  78.           
  79.         //根据年月生成日历  
  80.         function showCalendar(year, month){  
  81.             if(year && month){  
  82.                 var tbody = document.getElementById("calendar");  
  83.                 //生成前删除之前的行  
  84.                 for(var i = 0,len =tbody.rows.length;i< len;i++){  
  85.                     tbody.deleteRow();  
  86.                 }  
  87.                 var date = new Date(year, month - 1, 1);//month月的第一天  
  88.                 var day = date.getDay();//星期  
  89.                 var days = getDaysOfMonth(year, month);//month月的总天数  
  90.                 var temp = Math.floor((days + day) / 7);  
  91.                 var rows = (days + day) % 7 == 0 ? temp : (temp + 1);//要循环的行数  
  92.                 var d = 1;  
  93.                 for(var i = 1; i <= rows; i++){//循环行  
  94.                     var tr = document.createElement("tr");  
  95.                     for(var j = 1; j <= 7; j++){//循环列  
  96.                         var td = document.createElement("td");  
  97.                         //超过最大天数赋空  
  98.                         if(d > days){  
  99.                             td.innerHTML = "";  
  100.                             tr.appendChild(td);  
  101.                             continue;  
  102.                         }  
  103.                         if(i == 1){  
  104.                             //第一行判断month月第一天是星期几，例如星期二前面空两个周日、周一  
  105.                             if(j >= day + 1){  
  106.                                 var html = "<input type='checkbox' name='chkDay'>";  
  107.                                 td.innerHTML = html + (d < 10 ? "0" + d : d);  
  108.                                 d++;  
  109.                             }else{  
  110.                                 td.innerHTML = "";  
  111.                             }  
  112.                         } else {  
  113.                             var html = "<input type='checkbox' name='chkDay'>";  
  114.                             td.innerHTML = html + (d < 10 ? "0" + d : d);  
  115.                             d++;  
  116.                         }  
  117.                         tr.appendChild(td);  
  118.                     }  
  119.                     tbody.appendChild(tr);  
  120.                 }  
  121.             }  
  122.         }  
  123.           
  124.         function changeCalendar(){  
  125.             var y = document.getElementById("selYear").value;  
  126.             var m = document.getElementById("selMonth").value;  
  127.             showCalendar(y, m);  
  128.         }  
  129.     </script>  
  130. </html> 

转载于:https://www.cnblogs.com/tancp/p/3876830.html

weixin_30369087
关注
利用js制作简单的动态日历
mj_hoe的博客
12-27 561
利用js制作简单的动态日历 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .calendar{ position:absolute; left: 50%; top: 50
javascript生成动态日历
qq_47336023的博客
08-16 412
话不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态日历</title> <style> * {
简单的js动态日历
shiyani2012year的专栏
08-13 2643
<!-- #calendar {background:#000; color:#FFF; font-size:0.8em} #tittle {font-size:1.4em; padding:4px 0.55em} #days th {font-weight:bold; text-align:center; padding:4px 0.55em} #cale
JavaScript实现动态日历
FengyangCoder的博客
11-13 3421
原生JS实现动态日历: 思路分析: 1.手写对页面进行布局 2.创建时间 3.动态的改变标签中的内容 4.实现动态日历 源代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;JS实现动态日历&
JavaScript用写一个动态日历
qq1024609194的博客
04-27 1514
很粗劣，适合新手看吧，总来思想就是类似java动态日历 document.write("<br/>"); 是换行 &nbsp; 占位符 空格 其他的都简单 （适合新手观看哈，欢迎留言） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态日历</title> </head&g...
创建一个js日历（原生JS实现日历）
ailiangguan5844的博客
01-01 202
前言 方法是有参考网上一些资料的，比如闰年的判断，比如每个月第一天是星期几的判断。不说太多，拆分出一个个函数，希望能描述尽可能的清晰明了。 一，判断闰年 //判断闰年 function runNian(_year) { if(_year%400 === 0 || (_year%4 === 0 && _year%100 !== 0) ) ...
JavaScript实现简单日历效果
10-14
接着，清除表格中的旧数据，根据计算结果循环向表格中添加天数，从而生成日历。 2. initial()函数：这个函数用于初始化select标签中的option元素，为用户提供了从1990年到2019年的年份选择以及1到12月份的选项。 ...
js自动生成日历的插件
08-25
在JavaScript编程领域，生成日历插件是一种常见的需求，它能帮助用户在网页上方便地展示和交互日期信息。本文将深入探讨如何使用JavaScript来创建一个自定义的日历插件，以及相关的技术要点。 首先，JavaScript作为...
javascript(js)生成日历，不需引入其它文件
10-21
使用纯前端技术原生javascript技术和css编写日历，无需引入任何文件，可移植能力，使用方便,能够选择日期和时间（精确到秒）。应用到document对象中的getElementById和getElementsByTagName方法、Date对象中的获取...
LinkToCalendar-server:LinkToCalendar的服务器使用express.js的node.js生成所有日历类型的响应
05-16
在LinkToCalendar-server中，中间件可能用于验证请求、处理错误、记录日志，或者在生成日历链接前执行其他必要的操作。 7. **文件结构**： “LinkToCalendar-server-master”可能包含项目的源代码、配置文件、测试...
calendar.js:使用 javascript 生成日历数据:calendar:
05-30
日历.js 使用 javascript 生成日历数据 :calendar: 使用 yarn add calendar-data-generate 或者 npm install calendar-data-generate import Calendar from 'calendar-data-generate' let currentDate = { year : new Date ( ) . getFullYear ( ) , month : new Date ( ) . getMonth ( ) , date : new Date ( ) . getDate ( ) , firstDayOfWeek : 'monday' // 'sunday' or 'monday', } , let dateFormat = { day : '2-digit' , m
js创建年日历
04-30
使用javascript创建年日历，简单易用。
日历生成js
08-22
自己写的一个自动生成当前月历的js，大小自适应，显示当前日期，可以切换月份 。
javascript实现的动态日历
09-03
javascript实现的动态日历，可以用于jsp或asp页面，界面美观，是一款非常专业的日历组件。
js制作日历
weixin_63794155的博客
09-21 1577
new Date()第3个参数默认为1，就是每个月的1号，将它设置为0后，new Date()会返回。可以获取y年第一天（1月1日）方法一：设置本月份天数参数为0 ，能返回当前月份总共天数。getDate()获取最后一天，即整月天数。，然后通过getDate()方法得到天数。
js动态日历
qq_39186056的博客
08-26 1494
用js设计一个动态日历，布局用到了bootstrap 代码： &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt;     &lt;head&gt;         &lt;meta charset="UTF-8" /&gt;         &lt;meta name="viewport" content="width=
(JS)生成日历
最新发布
IMUT_HuHao的博客
07-17 167
【代码】(JS)生成日历。
js生成日历
平静、平淡、平凡
04-30 1194
算法： 1. 根据指定年份和月份，计算该月第一天的qishi
使用JavaScript构建动态日历
然后，使用JavaScript来动态生成日历内容。这通常涉及到以下几个步骤： 1. 获取当前年份和月份。 2. 计算该月的第一天是星期几（一周的起始日可能因文化差异而不同，例如周日或周一）。 3. 创建一个二维数组来表示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值