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 学习笔记(六)
Dec 31 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
JS访问对象两种方式区别解析
Aug 29 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
定义php常量的详解
2013/06/09 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python多线程并发实例及其优化
2019/06/27 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
同学聚会策划方案
2014/06/06 职场文书
采购员岗位职责
2015/02/03 职场文书
2015年宣传工作总结
2015/04/08 职场文书
文员岗位职责范本
2015/04/16 职场文书
消防安全培训工作总结
2015/10/23 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS