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 相关文章推荐
JS Timing
Apr 21 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 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.0对象模型深度探索之绑定
2006/09/05 PHP
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
自动更新作用
2006/10/08 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
小程序自定义日历效果
2018/12/29 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
py中的目录与文件判别代码
2008/07/16 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
python实现画图工具
2020/08/27 Python
工程业务员岗位职责
2013/12/31 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
2014年技术员工作总结
2014/11/18 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
辩护词格式
2015/05/22 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python