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 23 Javascript
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 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
PHP - Html Transfer Code
2006/10/09 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
js 深拷贝函数
2008/12/04 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
python操作excel的方法
2018/08/16 Python
设置python3为默认python的方法
2018/10/31 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
Java语言的优势
2015/01/10 面试题
机械电子工程毕业生自荐信
2013/11/23 职场文书
军训自我鉴定
2014/01/22 职场文书
超市商业计划书
2014/05/04 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫