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


Posted in Javascript onJune 27, 2017

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

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日历插件使用方法汇总》进行学习

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

Javascript 相关文章推荐
javascript 写类方式之十
Jul 05 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
node.js从数据库获取数据
May 08 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
ionic环境配置及问题详解
Jun 27 #Javascript
微信小程序 密码输入(源码下载)
Jun 27 #Javascript
Javascript实现base64的加密解密方法示例
Jun 27 #Javascript
微信小程序 空白页重定向解决办法
Jun 27 #Javascript
ionic 自定义弹框效果
Jun 27 #Javascript
js脚本编写简单刷票投票系统
Jun 27 #Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 #Javascript
You might like
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
详解vue 组件注册
2020/11/20 Vue.js
python 字典(dict)按键和值排序
2016/06/28 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Python多项式回归的实现方法
2019/03/11 Python
django迁移数据库错误问题解决
2019/07/29 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
正规的求职信范文分享
2013/12/11 职场文书
初三家长会邀请函
2014/01/18 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
实习指导教师评语
2014/12/30 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python