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 相关文章推荐
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
浅谈React之状态(State)
Sep 19 Javascript
处理canvas绘制图片模糊问题
May 11 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项目开发中最常用的自定义函数整理
2010/12/02 PHP
深入php之规范编程命名小结
2013/05/15 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
Javascript - HTML的request类
2007/01/09 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Anaconda入门使用总结
2018/04/05 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Django model class Meta原理解析
2020/11/14 Python
应届大学生的推荐信
2013/11/20 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
企业职业病防治方案
2014/05/29 职场文书
三好学生评语大全
2014/12/29 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
休学证明范本
2015/06/19 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python