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代码
Dec 28 Javascript
js清理Word格式示例代码
Feb 13 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
vue实现五子棋游戏
May 28 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巧获服务器端信息
2006/12/06 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
python对数组进行反转的方法
2015/05/20 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
django 多数据库配置教程
2018/05/30 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
20年同学聚会感言
2014/02/03 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
青年文明号服务承诺
2014/03/31 职场文书
餐饮投资计划书
2014/04/25 职场文书
项目建议书范文
2014/05/12 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
小学生交通安全寄语
2015/02/27 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书