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 相关文章推荐
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
vue组件中的数据传递方法
May 14 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
学习ExtJS border布局
2009/10/08 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
python单链表实现代码实例
2013/11/21 Python
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
python如何获取服务器硬件信息
2017/05/11 Python
如何在python中使用selenium的示例
2017/12/26 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python适合做数据挖掘吗
2020/06/16 Python
银行毕业实习自我鉴定
2013/09/19 职场文书
自荐书封面下载
2013/11/29 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
文体活动总结范文
2014/05/05 职场文书
宿舍标语大全
2014/06/19 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
浅谈Node的内存泄露问题
2022/05/06 NodeJs