简单的 js 日历控件

需求背景，需要在日历上展示每天的消耗数据，有数据的高亮显示，测试集成日历控件，改起来太费劲，找了这个还可以，修改比较方便，记录下~~

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>日历</title>
       <style type="text/css">
           *{margin: 0;padding: 0;}
           .box{line-height: 40px;font-size: 16px;text-align: center;width: 280px;height: 320px; border: 1px #ccc solid;position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);color: #000;padding: 20px;}
           .top{font-size: 0;}
           .top button{width: 25%;display: inline-block;font-size: 16px;}
           .top #month{width: 50%;display: inline-block;font-size: 16px;}
           .evrday{width: 40px;height: 40px;float: left;}
       </style>
   </head>
   <body>
       <div class="box">
           <div class="top">
               <button type="button" οnclick="prev()">上个月</button>
               <div id="month"></div>
               <button type="button" οnclick="next()">下个月</button>
           </div>
           <div class="week">
               <div class="evrday">日</div>
               <div class="evrday">一</div>
               <div class="evrday">二</div>
               <div class="evrday">三</div>
               <div class="evrday">四</div>
               <div class="evrday">五</div>
               <div class="evrday">六</div>
           </div>
           <div id="day"></div>
       </div>

       <script type="text/javascript">
           var tody = new Date();//获取当前时间
           var year = tody.getFullYear();//获取当前年份
           var month = tody.getMonth()+1;//获取当前月份
           var day = tody.getDate();//获取当前日
           var allday = 0;

           function showmonth(){
               if(month<10){       //给小于10的数字前面加0
                   var year_month=year+" 年 "+"0"+month+" 月 ";
               }else{
                   var year_month=year+" 年 "+month+" 月 ";
               }
               document.getElementById("month").innerHTML=year_month;//当前年月赋到页面
           }

           function count(){
               if(month!=2){
                   if(month==4||month==6||month==9||month==11)//判断月是30天还是31天,2月除外
                       allday=30;
                   else
                       allday=31;
               }else{
                   if((year%4==0&&year%100!=0)||(year%400==0))//判断是否是闰年，进行相应的改变
                   allday=29;
                   else
                   allday=28;
               }
           }
           //显示相应月份的天数
           function showday(){
               showmonth()
               count();
           var fistdate=new Date(year,month-1,1);
           var xinqi=fistdate.getDay();
           var daterow=document.getElementById("day");

           for(var i=0;i<xinqi;i++)//循环输出天数
           {
               var dayElement=document.createElement("div");
                   dayElement.className="evrday";
                   daterow.appendChild(dayElement);
           }

           for(var j=1;j<=allday;j++)
           {
               var dayElement=document.createElement("div");
                   if(j<10){       //给小于10的数字前面加0
                       dayElement.innerHTML="0"+j;
                   }else{
                       dayElement.innerHTML=j;
                   }

                   dayElement.className="evrday";
                   if(j==day)//当前日，标红
                   dayElement.style.color="red";
                   daterow.appendChild(dayElement);
           }
           }
           showday();

           //下个月
           function next(){
               document.getElementById("day").innerHTML="";//先清空day里面的内容
               if(month<12){
                   month=month+1;
               }else{
                   month=1;
                   year=year+1;
               }
               showday();//再把下个月的月份放到day里
           }
           //上个月
           function prev(){
               document.getElementById("day").innerHTML="";
               if(month>1){
                   month=month-1;
               }else{
                   month=12;
                   year=year-1;
               }
               showday();
           }
       </script>
   </body>
</html>

简单的 js 日历控件相关推荐

JS日历控件集合----附效果图、源代码
在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为重要. 尽管ASP.NET也集成了日历控件,但是其集成的代码量很大,你可以做一个测试,当你在页面使用一个日历控件时,在发 ...
JS日历控件优化(增加时分秒)
JS日历控件优化在今年7月份时候写了一篇关于 "JS日历控件" 的文章 , 当时只支持年月日的日历控件,现在优化如下: 1. 在原基础上支持 yyyy-mm- ...
JS日历控件不显示2021年问题, 不显示2021年以后的年份，怎么解决？
JS日历控件不显示2021年问题, 不显示2021年以后的年份,怎么解决? //日历 var date_start,date_end,g_object var today = new Date(); ...
一个非常好用的JS日历控件(支持.NET)
今天把一个非常好用的日历控件和大家分享一下,在平时输入日期的时候,往往我们需要达到一个更好的用户体验效果,使用日历控件是一个最佳的选择,这个日历控件非常的美观,是基于js方式的日历控件,而且调用非常的 ...
一个强大的js日历控件 FullCalendar 外加一堆可以直接运行的测试代码拿走不谢
资料地址 FullCalendar官网地址 FullCalendar文档 FullCalendar-v5.5.1在下地址 FullCalendar测试实例免费下载地址: https://downloa ...
一个适用于visual studio 2005的一个js日历控件--zhuan
最近要用到日历控件刚开始是使用梅花雨3.0不过发现了一些弹出的快慢还有定位的问题.总是有点麻烦.另外我是处于一个隐藏层内所以会有很多问题. 这个时候研究了下discuznt.net看到他们投票里面有一 ...
js日历控件，值得收藏，完美支持自定义
My97日期控件一个非常好用的日期控件,功能非常优秀,绝对是你一直想要的日期控件. 演示地址: http://www.my97.net/dp/demo/ 下载1: http://www.cnblog ...
js日历控件html,jQuery日历插件sys-calendar.js
插件描述:jQuery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单 sys-calendar.js jquery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单,版 ...
支持简体，繁体，英文的js日历控件
1 js文件下载地址 http://download.csdn.net/detail/jianfpeng241241/8293955 2 调用方法在liferay 的jsp中 <script ...
jquery日历控件
最近弄了个简单jquery的日历控件,拿出来分享一下,先看效果图: 大家可以到下面的链接下载源文件代码: http://download.csdn.net/detail/sunjava1/746626 ...

简单的 js 日历控件

简单的 js 日历控件相关推荐

最新文章

热门文章