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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
three.js如何实现3D动态文字效果
Mar 03 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&amp;&amp;mysql)二
2006/10/09 PHP
php计算一个文件大小的方法
2015/03/30 PHP
joomla组件开发入门教程
2016/05/04 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
JS 控制CSS样式表
2009/08/20 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
详解NodeJs开发微信公众号
2018/05/25 NodeJs
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
在python中使用nohup命令说明
2020/04/16 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
某个公司的Java笔面试题
2016/03/11 面试题
国际经济与贸易专业求职信
2014/07/10 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
新教师培训心得体会
2014/09/02 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
幼师个人总结范文
2015/02/28 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python