js+html制作简单日历的方法

新手一枚,不会写什么高大上的博文,一些平时做的小练习,献丑

js+html制作简单日历的方法

代码:

<!doctype html>
<html>

 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <style>
   * {margin: 0;padding: 0}
   #calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}
   #calendar h4 {text-align: center;margin-bottom: 10px}
   #calendar .a1 {position: absolute;top: 20px;left: 20px;}
   #calendar .a2 {position: absolute;top: 20px;right: 20px;}
   #calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px}
   #calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;}
   #calendar .dateList {overflow: hidden;clear: both}
   #calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;}
   #calendar .dateList .ccc {color: #ccc;}
   #calendar .dateList .red {background: #F90;color: #fff;}
   #calendar .dateList .sun {color: #f00;}
  </style>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script>
   $(function() {

    //必要的数据
    //今天的年 月 日 ;本月的总天数;本月第一天是周几???
    var iNow=0;

    function run(n) {

     var oDate = new Date(); //定义时间
     oDate.setMonth(oDate.getMonth()+n);//设置月份
     var year = oDate.getFullYear(); //年
     var month = oDate.getMonth(); //月
     var today = oDate.getDate(); //日

     //计算本月有多少天
     var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];

     //判断闰年
     if(month == 1) {
      if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
       allDay = 29;
      }
     }

     //判断本月第一天是星期几
     oDate.setDate(1); //时间调整到本月第一天
     var week = oDate.getDay(); //读取本月第一天是星期几

     //console.log(week);
     $(".dateList").empty();//每次清空
     //插入空白

     for(var i = 0; i < week; i++) {
      $(".dateList").append("<li></li>");
     }

     //日期插入到dateList
     for(var i = 1; i <= allDay; i++) {
      $(".dateList").append("<li>" + i + "</li>")
     }
     //标记颜色=====================
     $(".dateList li").each(function(i, elm){
      //console.log(index,elm);
      var val = $(this).text();
      //console.log(val);
      if (n==0) {
       if(val<today){
       $(this).addClass('ccc')
      }else if(val==today){
       $(this).addClass('red')
      }else if(i%7==0 || i%7==6 ){
       $(this).addClass('sun')
      }
      }else if(n<0){
       $(this).addClass('ccc')
      }else if(i%7==0 || i%7==6 ){
       $(this).addClass('sun')
      }
     });

     //定义标题日期
     $("#calendar h4").text(year + "年" + (month + 1) + "月");
    };
    run(0);

    $(".a1").click(function(){
     iNow--;
     run(iNow);
    });

    $(".a2").click(function(){
     iNow++;
     run(iNow);
    })
   });
  </script>
 </head>

 <body>
  <div id="calendar">
   <h4>2013年10月</h4>
   <a href="##" rel="external nofollow" rel="external nofollow" class="a1">上月</a>
   <a href="##" rel="external nofollow" rel="external nofollow" class="a2">下月</a>
   <ul class="week">
    <li>日</li>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
    <li>六</li>

   </ul>
   <ul class="dateList"></ul>
  </div>

 </body>

</html>

更多精彩内容请点击专题《javascript日历插件使用方法汇总》进行学习

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

时间: 2017-06-25

基于javascript编写简单日历

一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解决行数问题之前,还得先知道这个月的第1天是星期几,因为每个月的1号并不都是从日历上的星期天开始排的,可能1号是星期五,星期六也说不定,所以1号的左边部分,就得用空表格代替了.那么用多少个空表格代替呢,这里就得用到getDay()方法了,该方法返回数组[0-6]中的一个数字,0代表星期天,1代表星期一,2代表星期二,以此类推.所以如果一个月的1号是星期

js日历控件(可精确到分钟)

.menu_iframe{position:absolute; visibility:inherit; top:0px; left:0px; width:170px; z-index:-1; filter: Alpha(Opacity=0);} .cal_table{ border:#333333 solid 1px; border-collapse:collapse; background:#ffffff; font-size:12px} .cal_table td{ border:1px #

纯JS实现简单的日历

本文实例为大家分享了纯JS实现日历的具体代码,供大家参考,具体内容如下 封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" var yy=f23timeselecta1.value,mm=f23timeselecta2.value-1 var newdara=new Date() var dd=newdara.getDate(); var d=new Date(y

JS实现一个简单的日历

主要分为三个部分,1:获取li元素 2:如何填写对应的日期 3:如何获取点击li元素的事件. 1:通过节点间关系的属性children 获取li元素(两个for循坏遍历): 2:在遍历填写日期时,在第一行判断在当月的第一天在星期几,然后从第一天开始填写,直到大于当月的天数就暂停填写,并开始填写下个月的日期.第一行上个月的日期显示  : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1,然后在第一行上月天数显示开始值自加. 3:利用JS的事件冒泡获取li的inne

js css+html实现简单的日历

web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe

纯js简单日历实现代码

复制代码 代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa

轻量级的原生js日历插件calendar.js使用指南

使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-

JS学习之一个简易的日历控件

这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo

JS日历 推荐

两年前写过一个日历,可是兼容性不好. 这次重新写了一次.  兼容多种浏览器  了解了不少东东,特别是对于W3C标准化.  如 FF和IE 对box模型的理解不同  box.style{width:100;border 1px;}  ie理解 为 box.width = 100  ff 理解 为 box.width = 100 + 1*2 = 102  可以使用这种方法使两种浏览器都可以正常浏览  box.style{width:100!important; width /**/:120px;bo

php+javascript的日历控件

复制代码 代码如下: <html> <head> <title>js calendar</title> <script language="javascript"> /* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo * ----------------------------------------------------------- * * The DHT

javascript实现日历控件(年月日关闭按钮)

经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id=&quo

纯javascript版日历控件

平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo

纯javascript制作日历控件

以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就是让input控件内部右边显示一个按钮,我是直接给input加了个背景,然后把input的边框去掉实现的. 这个是最初版的,再往后打算做出纯javascript版的,再往后打算用JQuery做一套. <!doctype html> <html> <head> <met

javascript特殊日历控件分享

本文为大家分享了一个炫酷的js日历控件,供大家参考,具体内容如下 引用JSLit.js 下载 JSLite.io,兼容 JSLite 和 jQuery 安装方法 页面引用 JSLite 或者jQuery <div id="JSLiteCalenbar4"><input type="text"></div> <script type="text/javascript" src="../JSLite

支持IE,Firefox的javascript 日历控件

效果图:其实学习的方法,就是会搜索的方法,会搜索才能更快的解决问题.搜索方法: javascript 日历控件 site:jb51.net| 日期输入框演示-jb51.net script body{font-size:12px;font-family:Verdana,Arial,"宋体";} a:link {color:#464646;text-decoration:none;} a:visited {color:#464646;text-decoration:none;}ifram

JavaScript blog式日历控件新算法

使用说明: 程序比较简单,代码中都有说明,这里说说怎么使用. 首先是实例化一个Calendar,并设置参数. 参数说明: Year:要显示的年份 Month:要显示的月份 SelectDay:选择日期 onSelectDay:在选择日期触发 onToday:在当天日期触发 onFinish:日历画完后触发 一般SelectDay设置成选择了的日期,并在onSelectDay中设置一个函数用来设置这个日期的样式, 例如实例里SelectDay设置成今个月10号并在那天样式设为onSelect: 复

.net mvc页面UI之Jquery博客日历控件实现代码

一.效果图 二.页面文件 页面上需要添加<div id="cal"></div>标记. 三.JS代码 复制代码 代码如下: // JavaScript 日历 $(document).ready(function () { //当前时间 $now = new Date();                      //当前的时间 $nowYear = $now.getFullYear();          //当前的年 $nowMonth = $now.get

ASP.NET中日历控件和JS版日历控件的使用方法(第5节)

今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一  Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个