JavaScript实现简单日历效果


Posted in Javascript onSeptember 11, 2020

本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下

实现效果:

根据所选择的年月,列出当月对应是周几,效果图如下:

JavaScript实现简单日历效果

实现思路:

1、使用select标签保存年月的所选菜单。使用table标签保存当月天数,表头为固定的周日周一等。

2、使用option对象,给年月循环赋值。

3、将每月的天数保存到数组中,根据所选的年月获取当月的天数,以及当月一号对应周几,对应周几就在第一行先打印几个空格,然后从一号开始依次打印当月天数。

4、刷新年月时,清除上次表格中(除表头的周)的数据,重新填入数据。

代码实现:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <!--CSS样式-->
 <style type="text/css">
 *{margin: 0px;padding: 0px;}
 #div{width: 400px;height: 300px;border: 1px solid red;margin: auto;}
 #div div:nth-child(1){display: flex;align-items: center;justify-content: center;}
 #tbcal{border-collapse: collapse;width: 100%;text-align: center;}
 #tbcal tr td{border: 1px solid red;}
 </style>
 <script type="text/javascript">
// 加载完HTML内容后,JavaScript开始执行
 window.onload=function(){
 initial();
 document.getElementById("selyear").onchange=show;
 document.getElementById("selmonth").onchange=show;
 show();
 }
// 显示日历
 function show(){
// 获取鼠标点击所选择的年月值
 var year=parseInt(document.getElementById("selyear").value);
 var month=parseInt(document.getElementById("selmonth").value);
// 判断是否为闰年,以便确定2月的天数
 var flag=year%4==0&&year%100!=0||year%400==0;
 var dayofmonth=[31,flag?29:28,31,30,31,30,31,31,30,31,30,31];
// 给date赋值,值为所选择的某年某月一号
 var dt=new Date();
 dt.setFullYear(year);
 dt.setMonth(month-1);
 dt.setDate(1);
// 获取date对应周几
 var week=dt.getDay();
// 当月应该打印多少行
 var rows=Math.ceil((dayofmonth[dt.getMonth()]+week)/7);
 var k=0;
// 如果表格中有除表头外的数据,进行数据删除,避免上次月份的数据对下次有影响
 var table=document.getElementById("tbcal");
 while(table.rows.length>1){
  table.deleteRow(1);
  
 }
// 循环向表格中添加数据,生成日历
 for(var i=0;i<rows;i++){
  var row=table.insertRow(i+1);
  for(var j=0;j<7;j++){
  var cell=row.insertCell(j);
  k++;
  if(k<=week || k>dayofmonth[dt.getMonth()]+week){
  cell.innerHTML="";
  }
  else{
  cell.innerHTML=k-week;
  }
  }
 }
 }
// 通过option对象向年月中循环赋值
 function initial(){
 var years=document.getElementById("selyear");
 var months=document.getElementById("selmonth");
 for (var i=1990;i<2019;i++) {
  var option=document.createElement("option");
  option.text=i;
  years.add(option);
 }
 for (var i=1;i<13;i++) {
  var option=document.createElement("option");
  option.text=i;
  months.add(option);
 }
 }
 </script>
 </head>
 <body>
 <div id="div">
 <!--定义年月菜单-->
 <div>
 <select id="selyear"></select> 年 
 <select id="selmonth"></select> 月 
 </div>
 <div>
 <!--定义列表-->
 <table id="tbcal">
  <tr>
  <td>周日</td>
  <td>周一</td>
  <td>周二</td>
  <td>周三</td>
  <td>周四</td>
  <td>周五</td>
  <td>周六</td>
  </tr>
 </table>
 </div>
 </div>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
微信小程序 教程之模板
Oct 18 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
vue $mount 和 el的区别说明
Sep 11 #Javascript
JavaScript 判断数据类型的4种方法
Sep 11 #Javascript
jQuery实现日历效果
Sep 11 #jQuery
JS实现密码框效果
Sep 10 #Javascript
JavaScript常用工具函数库汇总
Sep 17 #Javascript
el-form 多层级表单的实现示例
Sep 10 #Javascript
详解React的回调渲染模式
Sep 10 #Javascript
You might like
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
再论Javascript的类继承
2011/03/05 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
从vue源码看props的用法
2019/01/09 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
python文件拆分与重组实例
2018/12/10 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
巴西购物网站:Submarino
2020/01/19 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
实习指导老师评语
2014/04/26 职场文书
物业管理工作方案
2014/05/10 职场文书
经济管理专业求职信
2014/06/09 职场文书
房屋维修协议书范本
2014/09/25 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书