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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
Javascript函数的参数
Jul 16 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
js实现点赞按钮功能的实例代码
Mar 06 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
B2K与车机的中波PK
2021/03/02 无线电
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
javascript面向对象之二 命名空间
2011/02/08 Javascript
js数组的操作详解
2013/03/27 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
js闭包学习心得总结
2018/04/17 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
python如何修改装饰器中参数
2018/03/20 Python
python3实现表白神器
2019/04/09 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
Java程序员常见面试题
2015/07/16 面试题
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
天堂的孩子观后感
2015/06/11 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书