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里使用Dom操作Xml
Sep 20 Javascript
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
vue-router单页面路由
Jun 17 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 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
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
跟老齐学Python之Import 模块
2014/10/13 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
滞留工资返还协议书
2014/10/19 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫